@feedlog-ai/webcomponents 0.0.25 → 0.0.27

package/dist/collection/components/feedlog-issue/feedlog-issue.css

@@ -149,14 +149,15 @@
 
 .issue-main {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
+  flex-direction: column;
+  gap: 0;
 }
 
-.issue-details {
-  flex: 1;
-  min-width: 0;
+.issue-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 0.75rem;
 }
 
 .issue-title {
@@ -294,62 +295,208 @@
 }
 
 .upvote-button {
-  display: flex;
-  flex-direction: column;
+  display: inline-flex;
+  flex-direction: row;
   align-items: center;
-  gap: 0.125rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.5rem;
-  background-color: var(--feedlog-muted);
-  border: 1px solid transparent;
+  border-radius: 0.375rem; /* 6px */
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   flex-shrink: 0;
-  font-size: 0.75rem;
-  font-weight: 600;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  padding: 0.375rem 0.75rem;
+  gap: 0.5rem;
+  font-family: inherit;
+  line-height: 1;
 }
 
 .upvote-button:hover {
-  background-color: var(--feedlog-blue-100);
-  border-color: var(--feedlog-blue-400);
+  background-color: #f8fafc;
+  border-color: #cbd5e1;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
+}
+
+.upvote-button:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
 .upvote-button.upvoted {
-  background-color: var(--feedlog-red-100);
-  border-color: var(--feedlog-red-400);
+  background-color: #eff6ff;
+  border-color: #bfdbfe;
 }
 
 .upvote-button.upvoted:hover {
-  background-color: var(--feedlog-red-100);
-  border-color: var(--feedlog-red-600);
+  background-color: #dbeafe;
+  border-color: #93c5fd;
 }
 
-:host(.dark) .upvote-button:hover {
-  background-color: var(--feedlog-blue-900-30);
-  border-color: var(--feedlog-blue-600);
+.upvote-action {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.375rem;
+  color: #475569;
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: color 0.2s ease;
 }
 
-:host(.dark) .upvote-button.upvoted {
-  background-color: var(--feedlog-red-900-30);
-  border-color: var(--feedlog-red-600);
+.upvote-button:hover .upvote-action {
+  color: #0f172a;
+}
+
+.upvote-button.upvoted .upvote-action {
+  color: #2563eb;
+}
+
+.upvote-button.upvoted:hover .upvote-action {
+  color: #1d4ed8;
 }
 
 .upvote-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  min-width: 1.125rem;
+  min-height: 1.125rem;
   color: inherit;
+  flex-shrink: 0;
+  display: block;
+  vertical-align: middle;
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.upvote-button:hover .upvote-icon {
+  transform: translateY(-2px);
+}
+
+.upvote-button:active .upvote-icon {
+  transform: translateY(0) scale(0.9);
 }
 
 .upvote-icon.filled {
-  color: var(--feedlog-upvote-icon-filled-color);
+  color: inherit;
 }
 
 .upvote-icon.outline {
-  color: var(--feedlog-upvote-icon-color);
+  color: inherit;
+}
+
+.reel-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 1.25rem;
+  overflow: hidden;
+  border-left: 1px solid #e2e8f0;
+  padding-left: 0.5rem;
+  transition: border-color 0.2s ease;
+}
+
+.upvote-button:hover .reel-container {
+  border-color: #cbd5e1;
+}
+
+.upvote-button.upvoted .reel-container {
+  border-color: #bfdbfe;
+}
+
+.upvote-button.upvoted:hover .reel-container {
+  border-color: #93c5fd;
 }
 
 .upvote-count {
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   font-weight: 600;
+  color: #475569;
+  transition: color 0.2s ease;
+  line-height: 1.25rem;
+}
+
+.upvote-button:hover .upvote-count {
+  color: #0f172a;
+}
+
+.upvote-button.upvoted .upvote-count {
+  color: #2563eb;
+}
+
+.upvote-button.upvoted:hover .upvote-count {
+  color: #1d4ed8;
+}
+
+.reel-number {
+  display: inline-block;
+  animation: reelIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+@keyframes reelIn {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Dark theme overrides */
+:host(.dark) .upvote-button {
+  background-color: var(--feedlog-card);
+  border-color: var(--feedlog-border);
+}
+
+:host(.dark) .upvote-button:hover {
+  background-color: var(--feedlog-muted);
+  border-color: var(--feedlog-muted-foreground);
+}
+
+:host(.dark) .upvote-button.upvoted {
+  background-color: rgba(37, 99, 235, 0.15);
+  border-color: rgba(37, 99, 235, 0.3);
+}
+
+:host(.dark) .upvote-button.upvoted:hover {
+  background-color: rgba(37, 99, 235, 0.25);
+  border-color: rgba(37, 99, 235, 0.4);
+}
+
+:host(.dark) .upvote-action,
+:host(.dark) .upvote-count {
+  color: var(--feedlog-muted-foreground);
+}
+
+:host(.dark) .upvote-button:hover .upvote-action,
+:host(.dark) .upvote-button:hover .upvote-count {
   color: var(--feedlog-card-foreground);
 }
+
+:host(.dark) .upvote-button.upvoted .upvote-action,
+:host(.dark) .upvote-button.upvoted .upvote-count {
+  color: var(--feedlog-blue-400);
+}
+
+:host(.dark) .upvote-button.upvoted:hover .upvote-action,
+:host(.dark) .upvote-button.upvoted:hover .upvote-count {
+  color: var(--feedlog-blue-300);
+}
+
+:host(.dark) .reel-container {
+  border-color: var(--feedlog-border);
+}
+
+:host(.dark) .upvote-button:hover .reel-container {
+  border-color: var(--feedlog-muted-foreground);
+}
+
+:host(.dark) .upvote-button.upvoted .reel-container {
+  border-color: rgba(37, 99, 235, 0.3);
+}
+
+:host(.dark) .upvote-button.upvoted:hover .reel-container {
+  border-color: rgba(37, 99, 235, 0.4);
+}

package/dist/collection/components/feedlog-issue/feedlog-issue.js

@@ -27,13 +27,15 @@ export class FeedlogIssueComponent {
         return (h("svg", { class: "pin-icon", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M12 17v5" }), h("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16h1v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-2h1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" })));
     }
     /**
-     * Renders the upvote (thumbs-up) icon SVG
+     * Renders the upvote (caret-up / arrow) icon SVG
+     * Path centered in 24x24 viewBox for proper vertical alignment
      */
     renderUpvoteIcon(filled) {
+        const path = 'M12 7l7 10H5l7-10z';
         if (filled) {
-            return (h("svg", { class: "upvote-icon filled", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { d: "M7 10v12" }), h("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })));
+            return (h("svg", { class: "upvote-icon filled", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { d: path })));
         }
-        return (h("svg", { class: "upvote-icon outline", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M7 10v12" }), h("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })));
+        return (h("svg", { class: "upvote-icon outline", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: path })));
     }
     /**
      * Format an ISO date string to a relative time string
@@ -102,7 +104,7 @@ export class FeedlogIssueComponent {
         const statusBadgeLabel = this.getStatusBadgeLabel();
         const githubUrl = (_b = issue.githubIssueLink) !== null && _b !== void 0 ? _b : issueUrl;
         const showGithubButton = githubUrl != null && githubUrl !== '';
-        return (h(Host, { class: this.theme === 'dark' ? 'dark' : '', "data-upvoted": issue.hasUpvoted ? 'true' : 'false' }, h("div", { class: `issue-card issue-type-${issue.type}` }, h("div", { class: "issue-content" }, h("div", { class: "issue-header" }, h("div", { class: "issue-header-left" }, h("div", { class: "issue-type-badge" }, issue.type === 'bug' ? (h("feedlog-badge", { variant: "destructive" }, "Bug")) : (h("feedlog-badge", { variant: "enhancement" }, "Enhancement"))), statusBadgeLabel && (h("feedlog-badge", { variant: "secondary" }, statusBadgeLabel)), issue.pinnedAt && (h("div", { class: "pinned-indicator", title: "Pinned issue" }, this.renderPinIcon()))), h("span", { class: "issue-timestamp", title: timestampTitle }, timestampLabel, " ", this.formatDate(timestampDate))), h("div", { class: "issue-main" }, h("div", { class: "issue-details" }, h("h3", { class: "issue-title" }, displayTitle), issue.body != null && issue.body !== '' && (h("div", { class: "issue-body", innerHTML: parseMarkdown(issue.body) })), h("div", { class: "issue-repository" }, repoName != null && (h("span", { class: "repo-name", title: repoTooltip }, repoName)), showGithubButton && (h("a", { part: "github-link", class: "github-link", href: githubUrl, target: "_blank", rel: "noopener noreferrer", title: "View on GitHub" }, this.renderExternalLinkIcon(), h("span", { class: "github-link-text" }, "View on GitHub"))))), issue.type !== 'bug' && (h("button", { part: "upvote-button", class: `upvote-button ${issue.hasUpvoted ? 'upvoted' : ''}`, onClick: (e) => this.handleUpvote(e), title: issue.hasUpvoted ? 'Remove upvote' : 'Upvote this issue' }, h("slot", { name: "upvote-icon" }, this.renderUpvoteIcon(issue.hasUpvoted)), h("span", { class: "upvote-count" }, issue.upvoteCount))))))));
+        return (h(Host, { class: this.theme === 'dark' ? 'dark' : '', "data-upvoted": issue.hasUpvoted ? 'true' : 'false' }, h("div", { class: `issue-card issue-type-${issue.type}` }, h("div", { class: "issue-content" }, h("div", { class: "issue-header" }, h("div", { class: "issue-header-left" }, h("div", { class: "issue-type-badge" }, issue.type === 'bug' ? (h("feedlog-badge", { variant: "destructive" }, "Bug")) : (h("feedlog-badge", { variant: "enhancement" }, "Enhancement"))), statusBadgeLabel && (h("feedlog-badge", { variant: "secondary" }, statusBadgeLabel)), issue.pinnedAt && (h("div", { class: "pinned-indicator", title: "Pinned issue" }, this.renderPinIcon()))), h("span", { class: "issue-timestamp", title: timestampTitle }, timestampLabel, " ", this.formatDate(timestampDate))), h("div", { class: "issue-main" }, h("h3", { class: "issue-title" }, displayTitle), issue.body != null && issue.body !== '' && (h("div", { class: "issue-body", innerHTML: parseMarkdown(issue.body) })), h("div", { class: "issue-repository" }, repoName != null && (h("span", { class: "repo-name", title: repoTooltip }, repoName)), showGithubButton && (h("a", { part: "github-link", class: "github-link", href: githubUrl, target: "_blank", rel: "noopener noreferrer", title: "View on GitHub" }, this.renderExternalLinkIcon(), h("span", { class: "github-link-text" }, "View on GitHub")))), issue.type !== 'bug' && (h("div", { class: "issue-footer" }, h("button", { part: "upvote-button", class: `upvote-button ${issue.hasUpvoted ? 'upvoted' : ''}`, onClick: (e) => this.handleUpvote(e), title: issue.hasUpvoted ? 'Remove upvote' : 'Upvote this issue' }, h("div", { class: "upvote-action" }, h("slot", { name: "upvote-icon" }, this.renderUpvoteIcon(issue.hasUpvoted)), h("span", { class: "upvote-label" }, "Upvote")), h("div", { class: "reel-container" }, h("span", { class: "upvote-count reel-number", key: issue.upvoteCount }, issue.upvoteCount))))))))));
     }
     static get is() { return "feedlog-issue"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedlog-issues/feedlog-issues.css

@@ -22,6 +22,7 @@
   --feedlog-radius: 0.625rem;
   --feedlog-gap: 0.5rem;
   --feedlog-padding: 2rem;
+  --feedlog-min-height: 100%;
   --feedlog-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
 }
 
@@ -45,11 +46,12 @@
 
 
 .issues-container {
-  min-height: 100vh;
+  min-height: var(--feedlog-min-height);
   /* Parent can override via --feedlog-background (e.g. transparent); fallback to theme default */
   background-color: var(--feedlog-background, var(--feedlog-theme-bg, #ffffff));
   padding: var(--feedlog-padding);
   margin: 0 auto;
+  border-radius: var(--feedlog-radius);
 }
 
 .issues-header {

package/dist/collection/components/feedlog-issues/feedlog-issues.js

@@ -55,13 +55,13 @@ export class FeedlogIssues {
     }
     renderIssuesList() {
         var _a, _b;
-        return (h("feedlog-issues-list", { issues: this.issues, theme: this.currentTheme, getIssueUrl: this.getIssueUrl, emptyStateTitle: (_a = this.emptyStateTitle) !== null && _a !== void 0 ? _a : 'No updates yet', emptyStateMessage: (_b = this.emptyStateMessage) !== null && _b !== void 0 ? _b : 'Check back later for new updates.', onFeedlogUpvote: (e) => this.handleUpvote(e) }));
+        return (h("feedlog-issues-list", { issues: this.issues, limit: this.limit, theme: this.currentTheme, getIssueUrl: this.getIssueUrl, emptyStateTitle: (_a = this.emptyStateTitle) !== null && _a !== void 0 ? _a : 'No updates yet', emptyStateMessage: (_b = this.emptyStateMessage) !== null && _b !== void 0 ? _b : 'Check back later for new updates.', onFeedlogUpvote: (e) => this.handleUpvote(e) }));
     }
     render() {
         const containerStyle = {
             maxWidth: this.maxWidth,
         };
-        return (h(Host, { key: '812719c5d6f25108834d1a422dee280c18033e36', class: this.currentTheme === 'dark' ? 'dark' : '' }, h("div", { key: '1e415969878bad8fb14ea9e648d2c2d2e0d492a1', class: "issues-container", style: containerStyle }, (this.heading || this.subtitle) && (h("header", { key: '5bf1308396ff3bc04a57763317fa71a34d48cc95', class: "issues-header" }, h("div", { key: '19494458a1bcd11c3d91c08e98887f9d6ed33314', class: "header-content" }, this.heading && h("h1", { key: 'f89bd679a9dd9262c93573ef0bfbbb23bd892a87', class: "issues-title" }, this.heading), this.subtitle && h("p", { key: '2bcc73dfb95d7ae8971004522fe44cca5128701b', class: "issues-subtitle" }, this.subtitle)))), this.loading && (h("div", { key: '85c06c80b624cd16d532bea5f0ad6fb7cc06f692', class: "loading-state", role: "status", "aria-label": "Loading issues" }, h("div", { key: '766cd9e7c18586f937a1b864e7bcfce60fe79707', class: "loading-skeletons" }, [1, 2, 3].map(i => (h("div", { key: i, class: "skeleton-card" }, h("div", { class: "skeleton-content" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-badge" }), h("div", { class: "skeleton-timestamp" })), h("div", { class: "skeleton-main" }, h("div", { class: "skeleton-title" }), h("div", { class: "skeleton-body" }, h("div", { class: "skeleton-line" }), h("div", { class: "skeleton-line short" })), h("div", { class: "skeleton-repo" })), h("div", { class: "skeleton-footer" }, h("div", { class: "skeleton-upvote" }))))))))), this.error && (h("div", { key: '5ca08a9ddc95b4ef59d6c776a24e08b5ac65c0b3', class: "error-state", role: "alert" }, h("div", { key: '93218f816564cff58f591b53d1aad6b6bc8a1c64', class: "error-state-content" }, this.renderErrorIcon(), h("h2", { key: 'f141f75b92164af3f4d139a17937b0533641bcc0', class: "error-state-title" }, "Something went wrong"), h("p", { key: '61225c7f4f46944787d4a6448386c8209cdaf74c', class: "error-state-message" }, this.error)))), !this.loading && !this.error && (h("div", { key: '5ac699f4c5d0e5b5d20f1546efe24f80cba70748' }, this.renderIssuesList(), this.hasMore && (h("div", { key: '9ad22c48dac0d8874dfae9735c850b2ca52836e7', class: "load-more-container" }, h("feedlog-button", { key: 'de55c05ca8b80ec5df98051653ca135874edc98b', onFeedlogClick: this.handleLoadMore, disabled: this.isLoadingMore, variant: "outline" }, this.isLoadingMore ? 'Loading...' : 'Load More Issues'))))))));
+        return (h(Host, { key: '96686863c5eb831e64993c681c7780e035c0e2b2', class: this.currentTheme === 'dark' ? 'dark' : '' }, h("div", { key: '54d01678053f4fe58eb547f9954f497402495a83', class: "issues-container", style: containerStyle }, (this.heading || this.subtitle) && (h("header", { key: '889aa47cb4ceea60ca4a5615f512793d726059d9', class: "issues-header" }, h("div", { key: '8b4ac6a9ed0c6120ec838a1329416f3471cd2751', class: "header-content" }, this.heading && h("h1", { key: 'cfc52f28bc5131715a5c7a0b9231e440b4c0b67c', class: "issues-title" }, this.heading), this.subtitle && h("p", { key: '8b4488546ceb6e807d689b8fca2b2fd85722f824', class: "issues-subtitle" }, this.subtitle)))), this.loading && (h("div", { key: '35c382f4417893c17951b73dedb12452e805668c', class: "loading-state", role: "status", "aria-label": "Loading issues" }, h("div", { key: '2d83dd9d40bf7b2a14744ee4a715108a9cdebd60', class: "loading-skeletons" }, [1, 2, 3].map(i => (h("div", { key: i, class: "skeleton-card" }, h("div", { class: "skeleton-content" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-badge" }), h("div", { class: "skeleton-timestamp" })), h("div", { class: "skeleton-main" }, h("div", { class: "skeleton-title" }), h("div", { class: "skeleton-body" }, h("div", { class: "skeleton-line" }), h("div", { class: "skeleton-line short" })), h("div", { class: "skeleton-repo" })), h("div", { class: "skeleton-footer" }, h("div", { class: "skeleton-upvote" }))))))))), this.error && (h("div", { key: '43efd42ce0d213131ba97d42d1f98c52515ea9fd', class: "error-state", role: "alert" }, h("div", { key: 'ad22b0378e290556c896c628dadabf6091bbf972', class: "error-state-content" }, this.renderErrorIcon(), h("h2", { key: '9a9779f52de12aa2241ba9ddda6cf8297a4af84d', class: "error-state-title" }, "Something went wrong"), h("p", { key: 'c697040d37909d882730e5d9ab3a3b147061fc51', class: "error-state-message" }, this.error)))), !this.loading && !this.error && (h("div", { key: 'afc12552ff7ccc808c7191c1dd1e26d3b95bf2fd' }, this.renderIssuesList(), this.hasMore && (h("div", { key: '0f6c84bdeda386e4eec439fb80f4ee1606b9b559', class: "load-more-container" }, h("feedlog-button", { key: 'e6983bd889a6cdfd4a4b8a06f3a6a97c2d276243', onFeedlogClick: this.handleLoadMore, disabled: this.isLoadingMore, variant: "outline" }, this.isLoadingMore ? 'Loading...' : 'Load More Issues'))))))));
     }
     static get is() { return "feedlog-issues"; }
     static get encapsulation() { return "shadow"; }
@@ -121,6 +121,25 @@ export class FeedlogIssues {
                 "attribute": "max-width",
                 "defaultValue": "'42rem'"
             },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Page size for issues list pagination. When set, enables pagination when issues exceed this limit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "limit"
+            },
             "theme": {
                 "type": "string",
                 "mutable": true,

package/dist/collection/components/feedlog-issues/feedlog-issues.stories.js

@@ -96,6 +96,7 @@ const sampleIssues = [
         hasUpvoted: false,
     },
 ];
+const manyIssues = Array.from({ length: 200 }, (_, i) => (Object.assign(Object.assign({}, sampleIssues[0]), { id: `issue-${i + 1}`, title: `Issue ${i + 1}` })));
 const meta = {
     title: 'Components/Issues',
     component: 'feedlog-issues',
@@ -132,6 +133,10 @@ const meta = {
             control: 'text',
             description: 'Empty state message',
         },
+        limit: {
+            control: 'number',
+            description: 'Page size for pagination',
+        },
     },
     args: {
         issues: sampleIssues,
@@ -250,6 +255,29 @@ export const TransparentBackground = {
         }
     },
 };
+export const Paginated = {
+    args: {
+        issues: manyIssues,
+        limit: 10,
+        heading: 'Community feedback',
+        subtitle: 'Upvote issues you care about',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Pagination with 200 issues, 10 per page. Shows first/last pages, 3 pages around current, and prev/next arrows.',
+            },
+        },
+    },
+    render: props => h("feedlog-issues", Object.assign({}, props)),
+    play: async ({ canvasElement, args }) => {
+        const element = canvasElement.querySelector('feedlog-issues');
+        if (element && args.issues) {
+            element.issues = args.issues;
+            element.limit = args.limit;
+        }
+    },
+};
 export const CustomCSSVars = {
     args: {
         issues: sampleIssues,

package/dist/collection/components/feedlog-issues-client/feedlog-issues-client.js

@@ -219,7 +219,7 @@ export class FeedlogIssuesClient {
         const style = hostBg
             ? { '--feedlog-background': hostBg }
             : undefined;
-        return (h("feedlog-issues", { key: '85e92e5ad7b556d97f4d6b94e308c08070e1ff0f', style: style, issues: this.issues, maxWidth: this.maxWidth, theme: this.theme, heading: this.heading, subtitle: this.subtitle, emptyStateTitle: this.emptyStateTitle, emptyStateMessage: this.emptyStateMessage, getIssueUrl: this.getIssueUrl, loading: this.loading, error: this.error, hasMore: this.hasMore, isLoadingMore: this.isLoadingMore, onFeedlogUpvote: this.handleUpvote, onFeedlogLoadMore: async () => this.loadMore() }));
+        return (h("feedlog-issues", { key: '15ae96d7d7b51964026f873f8b97e10530ed02b4', style: style, issues: this.issues, limit: this.limit, maxWidth: this.maxWidth, theme: this.theme, heading: this.heading, subtitle: this.subtitle, emptyStateTitle: this.emptyStateTitle, emptyStateMessage: this.emptyStateMessage, getIssueUrl: this.getIssueUrl, loading: this.loading, error: this.error, hasMore: this.hasMore, isLoadingMore: this.isLoadingMore, onFeedlogUpvote: this.handleUpvote, onFeedlogLoadMore: async () => this.loadMore() }));
     }
     static get is() { return "feedlog-issues-client"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feedlog-issues-list/feedlog-issues-list.css

@@ -34,6 +34,7 @@
   align-items: center;
   text-align: center;
   max-width: 20rem;
+  margin-inline: auto;
 }
 
 .empty-state-illustration {
@@ -55,3 +56,60 @@
   color: var(--feedlog-muted-foreground);
   line-height: 1.5;
 }
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  margin-top: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.pagination-btn {
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+  color: var(--feedlog-foreground);
+  background: transparent;
+  border: 1px solid var(--feedlog-border, oklch(0.9 0 0));
+  border-radius: var(--feedlog-radius, 0.375rem);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.pagination-btn:hover:not(:disabled) {
+  background: var(--feedlog-muted, oklch(0.96 0 0));
+}
+
+.pagination-btn[aria-current='page'] {
+  background: var(--feedlog-accent-color, oklch(0.55 0.2 250));
+  color: white;
+  border-color: var(--feedlog-accent-color, oklch(0.55 0.2 250));
+}
+
+.pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination-arrow {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.pagination-ellipsis {
+  padding: 0 0.25rem;
+  color: var(--feedlog-muted-foreground);
+  font-size: 0.875rem;
+}
+
+:host(.dark) .pagination-btn {
+  border-color: oklch(0.4 0.02 260);
+}
+
+:host(.dark) .pagination-btn:hover:not(:disabled) {
+  background: oklch(0.35 0.02 260);
+}

package/dist/collection/components/feedlog-issues-list/feedlog-issues-list.js

@@ -14,19 +14,64 @@ export class FeedlogIssuesList {
          * Theme variant: 'light' or 'dark'
          */
         this.theme = 'light';
+        this.currentPage = 1;
         this.handleUpvote = (event) => {
             event.stopPropagation();
             this.feedlogUpvote.emit(event.detail);
         };
     }
+    resetPage() {
+        this.currentPage = 1;
+    }
     renderEmptyStateIllustration() {
         return (h("svg", { class: "empty-state-illustration", xmlns: "http://www.w3.org/2000/svg", width: "120", height: "96", viewBox: "0 0 120 96", fill: "none", "aria-hidden": "true" }, h("path", { d: "M20 36h80v44c0 4.4-3.6 8-8 8H28c-4.4 0-8-3.6-8-8V36z", fill: "var(--feedlog-empty-illustration-bg)", stroke: "var(--feedlog-empty-illustration-stroke)", "stroke-width": "1.5", "stroke-linejoin": "round" }), h("path", { d: "M20 36l20-24h40l20 24", fill: "none", stroke: "var(--feedlog-empty-illustration-stroke)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M44 52h32M44 60h24M44 68h28", stroke: "var(--feedlog-empty-illustration-muted)", "stroke-width": "1.25", "stroke-linecap": "round" })));
     }
+    getVisibleIssues() {
+        if (this.issues.length === 0)
+            return [];
+        if (this.limit == null || this.issues.length <= this.limit) {
+            return this.issues;
+        }
+        const offset = (this.currentPage - 1) * this.limit;
+        return this.issues.slice(offset, offset + this.limit);
+    }
+    getPageNumbers() {
+        if (this.limit == null)
+            return [];
+        const totalPages = Math.ceil(this.issues.length / this.limit);
+        if (totalPages <= 1)
+            return [];
+        const toShow = new Set([1, totalPages]);
+        const start = Math.max(1, this.currentPage - 1);
+        const end = Math.min(totalPages, this.currentPage + 1);
+        for (let i = start; i <= end; i++)
+            toShow.add(i);
+        const sorted = Array.from(toShow).sort((a, b) => a - b);
+        const result = [];
+        for (let i = 0; i < sorted.length; i++) {
+            if (i > 0 && sorted[i] - sorted[i - 1] > 1)
+                result.push('ellipsis');
+            result.push(sorted[i]);
+        }
+        return result;
+    }
+    goToPage(page) {
+        const totalPages = this.limit != null ? Math.ceil(this.issues.length / this.limit) : 1;
+        this.currentPage = Math.max(1, Math.min(page, totalPages));
+    }
+    renderPagination() {
+        if (this.limit == null || this.issues.length <= this.limit)
+            return null;
+        const totalPages = Math.ceil(this.issues.length / this.limit);
+        const pageNumbers = this.getPageNumbers();
+        return (h("nav", { class: "pagination", "aria-label": "Issues pagination" }, h("button", { type: "button", class: "pagination-btn pagination-arrow", "aria-label": "Previous page", disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, "\u2039"), pageNumbers.map((p, i) => p === 'ellipsis' ? (h("span", { key: i, class: "pagination-ellipsis", "aria-hidden": "true" }, "\u2026")) : (h("button", { key: i, type: "button", class: "pagination-btn", "aria-current": p === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(p) }, p))), h("button", { type: "button", class: "pagination-btn pagination-arrow", "aria-label": "Next page", disabled: this.currentPage >= totalPages, onClick: () => this.goToPage(this.currentPage + 1) }, "\u203A")));
+    }
     render() {
-        return (h(Host, { key: 'd797fd4978179c9081678e2fb3e7e2be756b4ea2', class: this.theme === 'dark' ? 'dark' : '' }, h("div", { key: '1fe373bbad55cf718d65279ae718f9b95e89e37f', class: "issues-list" }, this.issues.length === 0 ? (h("div", { class: "empty-state" }, this.emptyStateTitle && this.emptyStateMessage ? (h("div", { class: "empty-state-content" }, this.renderEmptyStateIllustration(), h("h2", { class: "empty-state-title" }, this.emptyStateTitle), h("p", { class: "empty-state-message" }, this.emptyStateMessage))) : (h("p", null, "No issues found")))) : (this.issues.map(issue => {
+        const visibleIssues = this.getVisibleIssues();
+        return (h(Host, { key: '474f5ca0d8edc94a8e9a03d83c6a977270391d65', class: this.theme === 'dark' ? 'dark' : '' }, h("div", { key: '8f2f8125653ec5f80b167945a33cefe483c1a001', class: "issues-list" }, visibleIssues.length === 0 ? (h("div", { class: "empty-state" }, this.emptyStateTitle && this.emptyStateMessage ? (h("div", { class: "empty-state-content" }, this.renderEmptyStateIllustration(), h("h2", { class: "empty-state-title" }, this.emptyStateTitle), h("p", { class: "empty-state-message" }, this.emptyStateMessage))) : (h("p", null, "No issues found")))) : (visibleIssues.map(issue => {
             var _a, _b;
             return (h("feedlog-issue", { key: issue.id, issue: issue, issueUrl: (_b = (_a = this.getIssueUrl) === null || _a === void 0 ? void 0 : _a.call(this, issue)) !== null && _b !== void 0 ? _b : undefined, theme: this.theme, onFeedlogUpvote: (e) => this.handleUpvote(e) }));
-        })))));
+        }))), this.renderPagination()));
     }
     static get is() { return "feedlog-issues-list"; }
     static get encapsulation() { return "shadow"; }
@@ -66,6 +111,25 @@ export class FeedlogIssuesList {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Page size (items per page). When set, enables pagination when issues exceed this limit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "limit"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,
@@ -149,6 +213,11 @@ export class FeedlogIssuesList {
             }
         };
     }
+    static get states() {
+        return {
+            "currentPage": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "feedlogUpvote",
@@ -167,4 +236,13 @@ export class FeedlogIssuesList {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "issues",
+                "methodName": "resetPage"
+            }, {
+                "propName": "limit",
+                "methodName": "resetPage"
+            }];
+    }
 }

package/dist/collection/test/mocks/feedlog-core.js

@@ -0,0 +1,10 @@
+/**
+ * Mock for @feedlog-ai/core used in tests.
+ * Mapped via Stencil testing config moduleNameMapper to avoid CI resolution issues.
+ */
+export const FeedlogSDK = jest.fn().mockImplementation(() => ({
+    fetchIssues: jest
+        .fn()
+        .mockResolvedValue({ issues: [], pagination: { cursor: null, hasMore: false } }),
+    toggleUpvote: jest.fn(),
+}));

package/dist/components/feedlog-issue.js

@@ -1 +1 @@
-import{F as o,d as s}from"./p-BBPFf6g7.js";const p=o,r=s;export{p as FeedlogIssue,r as defineCustomElement}
+import{F as o,d as s}from"./p-BuX7UXwe.js";const p=o,r=s;export{p as FeedlogIssue,r as defineCustomElement}