@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-lightbox/co-lightbox.css

@@ -0,0 +1,164 @@
+/* ============================================================
+   co-lightbox — fullscreen image viewer: dark scrim, zoom/pan,
+   prev/next carousel. Chrome is white over the scrim (theme-
+   independent, like any lightbox).
+   ============================================================ */
+
+:host {
+  display: contents;
+  font-family: var(--co-font-family-primary);
+}
+
+.co-lightbox {
+  position: fixed;
+  inset: 0;
+  /* Above co-overlay (1000, hardcoded there too — no z-index tokens). */
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--co-color-opacity-negro-80);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.co-lightbox--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ---- Toolbar ---- */
+.co-lightbox__toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-md) var(--co-spacing-lg);
+  background: linear-gradient(var(--co-color-opacity-negro-50), transparent);
+}
+
+.co-lightbox__caption {
+  flex: 1;
+  min-width: 0;
+  color: var(--co-color-base-blanco);
+  font-size: var(--co-font-size-14);
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-lightbox__zoom {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+  padding: 0 var(--co-spacing-xs);
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-color-opacity-blanco-8);
+}
+
+.co-lightbox__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 var(--co-spacing-xs);
+  border: none;
+  border-radius: var(--co-border-radius-full);
+  background: transparent;
+  color: var(--co-color-base-blanco);
+  font-family: inherit;
+  font-size: var(--co-font-size-13);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.co-lightbox__btn:hover {
+  background: var(--co-color-opacity-blanco-16);
+}
+
+.co-lightbox__zoom-value {
+  min-width: 48px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- Stage / image ---- */
+.co-lightbox__stage {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  /* The browser must not hijack drags for scrolling on touch. */
+  touch-action: none;
+}
+
+.co-lightbox__img {
+  max-width: calc(100vw - var(--co-spacing-5xl) * 2);
+  max-height: calc(100vh - var(--co-spacing-5xl) * 2);
+  border-radius: var(--co-border-radius-xs);
+  user-select: none;
+  transition: transform 0.18s ease;
+}
+
+.co-lightbox__img--zoomed {
+  cursor: grab;
+}
+
+.co-lightbox__img--dragging {
+  cursor: grabbing;
+  transition: none;
+}
+
+/* ---- Nav arrows ---- */
+.co-lightbox__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-color-opacity-blanco-8);
+  color: var(--co-color-base-blanco);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.co-lightbox__nav:hover {
+  background: var(--co-color-opacity-blanco-25);
+}
+
+.co-lightbox__nav--prev {
+  left: var(--co-spacing-lg);
+}
+
+.co-lightbox__nav--next {
+  right: var(--co-spacing-lg);
+}
+
+/* ---- Counter ---- */
+.co-lightbox__counter {
+  position: absolute;
+  bottom: var(--co-spacing-lg);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  padding: var(--co-spacing-xs) var(--co-spacing-md);
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-color-opacity-blanco-8);
+  color: var(--co-color-base-blanco);
+  font-size: var(--co-font-size-13);
+  font-variant-numeric: tabular-nums;
+}

package/dist/collection/components/co-lightbox/co-lightbox.js

@@ -0,0 +1,451 @@
+import { h } from "@stencil/core";
+import { getLightboxStrings } from "../../utils/lightboxI18n";
+const MIN_SCALE = 1;
+const MAX_SCALE = 8;
+const WHEEL_FACTOR = 1.15;
+const DBLCLICK_SCALE = 2.5;
+/**
+ * Fullscreen image viewer — dark scrim, zoom (wheel / buttons / double-click,
+ * anchored at the cursor), drag-to-pan while zoomed, and prev/next carousel
+ * when more than one image is provided. Keyboard: Escape closes, arrows
+ * navigate, +/- zoom, 0 resets.
+ *
+ * Controlled like co-modal: the host owns `open` and reacts to `coClose`.
+ *
+ * CAVEAT: the root is `position: fixed`, so an ancestor with `transform`,
+ * `filter` or `will-change: transform` (e.g. an OPEN co-drawer) becomes its
+ * containing block and traps the overlay. When opening from inside such a
+ * context, create the element imperatively on `document.body` instead of
+ * rendering it declaratively (this is what co-file-field does).
+ *
+ * @part overlay - Fullscreen scrim container
+ * @part toolbar - Top bar (caption + zoom controls + actions)
+ * @part image - The active image element
+ * @part prev - Previous-image arrow button
+ * @part next - Next-image arrow button
+ * @part counter - The "i / n" indicator
+ * @part close - The close button
+ */
+export class CoLightbox {
+    constructor() {
+        /** JSON array of {@link LightboxImage} (controlled by the host). */
+        this.images = '[]';
+        /** Index shown when the viewer opens. */
+        this.startIndex = 0;
+        /** Whether the viewer is visible. */
+        this.open = false;
+        this.index = 0;
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+        this.dragging = false;
+        this.lastImagesStr = '';
+        this.lastParsed = [];
+        this.dragStart = { x: 0, y: 0, tx: 0, ty: 0 };
+        /** Focus the close button on the render that follows opening. */
+        this.pendingFocus = false;
+        this.handleKey = (e) => {
+            if (!this.open)
+                return;
+            switch (e.key) {
+                case 'Escape':
+                    this.requestClose();
+                    break;
+                case 'ArrowLeft':
+                    this.goTo(-1);
+                    break;
+                case 'ArrowRight':
+                    this.goTo(1);
+                    break;
+                case '+':
+                case '=':
+                    this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0);
+                    break;
+                case '-':
+                    this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0);
+                    break;
+                case '0':
+                    this.resetView();
+                    break;
+                case 'Tab':
+                    this.trapTab(e);
+                    return;
+                default:
+                    return; // unhandled keys pass through untouched
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this.requestClose = () => {
+            this.coClose.emit();
+        };
+        this.handleWheel = (e) => {
+            e.preventDefault();
+            const [px, py] = this.stagePoint(e);
+            const factor = e.deltaY < 0 ? WHEEL_FACTOR : 1 / WHEEL_FACTOR;
+            this.zoomAt(this.scale * factor, px, py);
+        };
+        this.handleDblClick = (e) => {
+            const [px, py] = this.stagePoint(e);
+            this.zoomAt(this.scale > MIN_SCALE ? MIN_SCALE : DBLCLICK_SCALE, px, py);
+        };
+        this.handlePointerDown = (e) => {
+            var _a;
+            if (this.scale <= MIN_SCALE)
+                return;
+            e.preventDefault();
+            this.dragging = true;
+            this.dragStart = { x: e.clientX, y: e.clientY, tx: this.tx, ty: this.ty };
+            (_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.dragging)
+                return;
+            const tx = this.dragStart.tx + (e.clientX - this.dragStart.x);
+            const ty = this.dragStart.ty + (e.clientY - this.dragStart.y);
+            [this.tx, this.ty] = this.clampPan(tx, ty, this.scale);
+        };
+        this.handlePointerUp = (e) => {
+            var _a;
+            if (!this.dragging)
+                return;
+            this.dragging = false;
+            (_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
+        };
+        this.openOriginal = () => {
+            const img = this.parsedImages[this.index];
+            if (img === null || img === void 0 ? void 0 : img.src)
+                window.open(img.src, '_blank', 'noopener');
+        };
+        this.stop = (e) => e.stopPropagation();
+    }
+    get parsedImages() {
+        const raw = this.images;
+        if (typeof raw !== 'string' || !raw.trim())
+            return [];
+        if (raw === this.lastImagesStr)
+            return this.lastParsed;
+        let parsed = [];
+        try {
+            const p = JSON.parse(raw);
+            if (Array.isArray(p))
+                parsed = p.filter((i) => i && i.src);
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        this.lastImagesStr = raw;
+        this.lastParsed = parsed;
+        return parsed;
+    }
+    componentWillLoad() {
+        this.index = this.clampIndex(this.startIndex);
+    }
+    connectedCallback() {
+        if (this.open)
+            this.attachKeyListener();
+    }
+    disconnectedCallback() {
+        this.detachKeyListener();
+    }
+    componentDidRender() {
+        var _a;
+        if (this.pendingFocus) {
+            this.pendingFocus = false;
+            (_a = this.closeBtnEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    onOpenChange(open) {
+        var _a, _b, _c;
+        if (open) {
+            this.index = this.clampIndex(this.startIndex);
+            this.resetView();
+            this.preloadNeighbors();
+            this.attachKeyListener();
+            // aria-modal dialog: move focus in on open, restore it on close.
+            this.previouslyFocused = (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined;
+            this.pendingFocus = true;
+        }
+        else {
+            this.detachKeyListener();
+            (_c = (_b = this.previouslyFocused) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+            this.previouslyFocused = undefined;
+        }
+    }
+    onStartIndexChange(v) {
+        if (this.open) {
+            this.index = this.clampIndex(v);
+            this.resetView();
+        }
+    }
+    onImagesChange() {
+        this.index = this.clampIndex(this.index);
+    }
+    // Manual capture-phase listener (not @Listen): while the viewer is open it
+    // must own the keyboard — an ancestor co-drawer/co-modal also listens for
+    // Escape on document, and without capture + stopPropagation one keypress
+    // would close both (losing unsaved drawer state). Capture runs first, and
+    // preventDefault keeps arrows/+/- from scrolling the page behind the scrim.
+    attachKeyListener() {
+        window.addEventListener('keydown', this.handleKey, { capture: true });
+    }
+    detachKeyListener() {
+        window.removeEventListener('keydown', this.handleKey, { capture: true });
+    }
+    /** Minimal focus trap: Tab cycles through the viewer's own buttons. */
+    trapTab(e) {
+        var _a, _b, _c;
+        const focusables = Array.from((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button')) !== null && _b !== void 0 ? _b : []);
+        if (focusables.length === 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const active = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement;
+        const i = focusables.indexOf(active);
+        const delta = e.shiftKey ? -1 : 1;
+        const next = focusables[(i + delta + focusables.length) % focusables.length];
+        next.focus();
+    }
+    clampIndex(i) {
+        const n = this.parsedImages.length;
+        if (n === 0)
+            return 0;
+        return Math.min(Math.max(0, i), n - 1);
+    }
+    resetView() {
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+        this.dragging = false;
+    }
+    goTo(delta) {
+        const n = this.parsedImages.length;
+        if (n < 2)
+            return;
+        this.index = (this.index + delta + n) % n;
+        this.resetView();
+        this.coChange.emit(this.index);
+        this.preloadNeighbors();
+    }
+    preloadNeighbors() {
+        const imgs = this.parsedImages;
+        if (imgs.length < 2)
+            return;
+        for (const d of [1, -1]) {
+            const neighbor = imgs[(this.index + d + imgs.length) % imgs.length];
+            if (neighbor === null || neighbor === void 0 ? void 0 : neighbor.src)
+                new Image().src = neighbor.src;
+        }
+    }
+    // ── Zoom / pan ────────────────────────────────────────────────
+    /** Pan is clamped so the scaled image can't be dragged fully off-stage. */
+    clampPan(tx, ty, scale) {
+        const stage = this.stageEl;
+        const img = this.imgEl;
+        if (!stage || !img)
+            return [tx, ty];
+        const maxTx = Math.max(0, (img.offsetWidth * scale - stage.clientWidth) / 2);
+        const maxTy = Math.max(0, (img.offsetHeight * scale - stage.clientHeight) / 2);
+        return [Math.min(Math.max(tx, -maxTx), maxTx), Math.min(Math.max(ty, -maxTy), maxTy)];
+    }
+    /**
+     * Zoom keeping the stage point (px,py — relative to the stage center) fixed:
+     * t' = p − (p − t)·(s'/s), with transform-origin at the center.
+     */
+    zoomAt(nextScale, px, py) {
+        const s = this.scale;
+        const ns = Math.min(Math.max(nextScale, MIN_SCALE), MAX_SCALE);
+        if (ns === s)
+            return;
+        const ratio = ns / s;
+        let tx = px - (px - this.tx) * ratio;
+        let ty = py - (py - this.ty) * ratio;
+        if (ns === MIN_SCALE) {
+            tx = 0;
+            ty = 0;
+        }
+        else {
+            [tx, ty] = this.clampPan(tx, ty, ns);
+        }
+        this.scale = ns;
+        this.tx = tx;
+        this.ty = ty;
+    }
+    stagePoint(e) {
+        var _a;
+        const rect = (_a = this.stageEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return [0, 0];
+        return [e.clientX - rect.left - rect.width / 2, e.clientY - rect.top - rect.height / 2];
+    }
+    render() {
+        const s = getLightboxStrings(this.locale);
+        const imgs = this.parsedImages;
+        const img = imgs[this.index];
+        const multi = imgs.length > 1;
+        const counter = s.counter
+            .replace('{i}', String(this.index + 1))
+            .replace('{n}', String(imgs.length));
+        return (h("div", { key: 'bfffaae28680b214a562aa3c3ec52aaf16a61571', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, onClick: this.requestClose }, img && (h("div", { key: 'e1bed6448e4878d0e459bdda89d1da98712d8207', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '7ff4d35aaa6c4207c2b623951f14802278e1c631', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: 'bf369f9204faf17c9047c339d893933159078714', class: "co-lightbox__zoom" }, h("button", { key: '94aa9ab08f21bf7d9e77e4ad31325cd13a80bb4d', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'd04c038ec26081190c67eedcccf8e4c61c8cf6d7', name: "minus", size: 16 })), h("button", { key: 'd4333d0c970e71012786915be49be6c0efada12f', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: 'b9efbf3e3912fb557eba59cce0300468a8e86861', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '1d56f6fca5858ba8413f378bc6ac63870663143a', name: "plus", size: 16 }))), h("button", { key: '0fc6adbb0b1c80cb2e8da9eb09dfe107349a59cf', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'b1151b279b700caa0712ff74b09c0440d4b37dd4', name: "arrow-square-out", size: 16 })), h("button", { key: '984f9d2b9498d9715dabff254d2f3da9a42d9172', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '054e307f9116c8dca66412ae54dfee8e3a86da9b', name: "x", size: 16 })))), img && (h("div", { key: 'cd21ae63400375474fca02ebf77c35d4b4fd8b55', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: 'b33b767ba92e4a1ed685409b1a96acc98767c4f7', class: {
+                'co-lightbox__img': true,
+                'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
+                'co-lightbox__img--dragging': this.dragging,
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: '0b35f47557bf3e05db3c98e0df2c6e8d6f5cef94', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+                e.stopPropagation();
+                this.goTo(-1);
+            } }, h("co-icon", { key: 'f84159324fe97c957f0e8b2f0b92f865f180f7ed', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '7c1a9f250bb4b881112a57a2f3455b3c82fc77cc', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+                e.stopPropagation();
+                this.goTo(1);
+            } }, h("co-icon", { key: '00efc2dd2e09c2dc1df35b6317e5bc42a63b2c20', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '7b148b3a2a1c3032c037439293b2b4c6e0100c52', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+    }
+    static get is() { return "co-lightbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-lightbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-lightbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "images": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON array of {@link LightboxImage} (controlled by the host)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "images",
+                "defaultValue": "'[]'"
+            },
+            "startIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index shown when the viewer opens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-index",
+                "defaultValue": "0"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the viewer is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale for the built-in aria strings (es/en/pt)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "index": {},
+            "scale": {},
+            "tx": {},
+            "ty": {},
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coClose",
+                "name": "coClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the viewer requests to close (backdrop, X, Escape)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active image changes (prev/next/keyboard)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }, {
+                "propName": "startIndex",
+                "methodName": "onStartIndexChange"
+            }, {
+                "propName": "images",
+                "methodName": "onImagesChange"
+            }];
+    }
+}

package/dist/collection/components/co-list-footer/co-list-footer.css

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+}
+
+.co-list-footer {
+  display: flex;
+  gap: var(--co-spacing-sm2);
+  padding-top: var(--co-spacing-sm2);
+}
+
+.co-list-footer__btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--co-spacing-sm);
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  border-radius: var(--co-border-radius-xs);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12, 12px);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+  box-sizing: border-box;
+  min-height: 32px;
+}
+
+.co-list-footer__btn:hover {
+  opacity: 0.85;
+}
+
+.co-list-footer__btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 2px;
+}
+
+.co-list-footer__btn--secondary {
+  background: transparent;
+  color: var(--co-semantic-text-default);
+  border: 1px solid var(--co-semantic-border-default);
+}
+
+.co-list-footer__btn--primary {
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
+  border: none;
+}