@feedlog-ai/webcomponents 0.0.39 → 0.0.41

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

@@ -1,32 +1,78 @@
 :host {
   display: block;
-  font-family: var(--feedlog-font-family);
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
+
+  /* Light theme defaults */
+  --feedlog-background: #ffffff;
+  --feedlog-foreground: oklch(0.145 0 0);
+  --feedlog-card: #ffffff;
+  --feedlog-card-foreground: oklch(0.145 0 0);
+  --feedlog-muted: #f1f5f9;
+  --feedlog-muted-foreground: #64748b;
+  --feedlog-border: rgba(0, 0, 0, 0.08);
+  --feedlog-accent-color: #2563eb;
+  --feedlog-destructive: #d4183d;
+  --feedlog-blue-400: oklch(0.707 0.165 254.624);
+  --feedlog-blue-600: oklch(0.546 0.245 262.881);
+  --feedlog-red-600: #db2777;
+  --feedlog-radius: 0.625rem;
+  --feedlog-gap: 0.5rem;
 
   /* Customization variables */
-  --feedlog-card-padding: var(--feedlog-space-6);
-  --feedlog-title-font-size: var(--feedlog-text-xl);
-  --feedlog-title-font-weight: var(--feedlog-font-semibold);
-  --feedlog-body-font-size: var(--feedlog-text-sm);
+  --feedlog-card-padding: 1.25rem;
+  --feedlog-title-font-size: 1.125rem;
+  --feedlog-title-font-weight: 600;
+  --feedlog-body-font-size: 0.875rem;
   --feedlog-body-line-height: 1.6;
-  --feedlog-timestamp-font-size: var(--feedlog-text-xs);
+  --feedlog-timestamp-font-size: 0.6875rem;
   --feedlog-timestamp-color: var(--feedlog-muted-foreground);
-  --feedlog-card-radius: 16px;
+  --feedlog-card-radius: 0.75rem;
   --feedlog-icon-color: var(--feedlog-muted-foreground);
   --feedlog-icon-color-muted: var(--feedlog-muted-foreground);
-  --feedlog-pin-color: var(--feedlog-primary);
-  --feedlog-upvote-icon-color: var(--feedlog-primary);
-  --feedlog-upvote-icon-filled-color: var(--feedlog-primary);
+  --feedlog-pin-color: var(--feedlog-accent-color);
+  --feedlog-upvote-icon-color: var(--feedlog-blue-600);
+  --feedlog-upvote-icon-filled-color: var(--feedlog-red-600);
+  /* Layered shadows for depth */
+  --feedlog-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  --feedlog-shadow-hover-enhancement: 0 8px 16px rgba(37, 99, 235, 0.08), 0 12px 24px rgba(37, 99, 235, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  --feedlog-shadow-hover-bug: 0 8px 16px rgba(212, 24, 61, 0.08), 0 12px 24px rgba(212, 24, 61, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 :host(.dark) {
   /* Dark theme values */
+  --feedlog-background: oklch(0.18 0.01 260);
+  --feedlog-foreground: oklch(0.985 0 0);
+  --feedlog-card: oklch(0.24 0.01 260);
+  --feedlog-card-foreground: oklch(0.985 0 0);
+  --feedlog-muted: oklch(0.32 0.01 260);
+  --feedlog-muted-foreground: oklch(0.72 0.02 260);
+  --feedlog-border: oklch(0.34 0.01 260);
+  --feedlog-accent-color: #3b82f6;
+  --feedlog-destructive: oklch(0.396 0.141 25.723);
+  --feedlog-blue-300: oklch(0.78 0.12 255);
+  --feedlog-blue-400: oklch(0.707 0.165 254.624);
+  --feedlog-blue-600: oklch(0.546 0.245 262.881);
+  --feedlog-upvote-icon-color: var(--feedlog-blue-400);
+  --feedlog-upvote-icon-filled-color: var(--feedlog-red-600);
+  --feedlog-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  --feedlog-shadow-hover-enhancement: 0 8px 16px rgba(59, 130, 246, 0.15), 0 12px 24px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  --feedlog-shadow-hover-bug: 0 8px 16px rgba(220, 38, 38, 0.15), 0 12px 24px rgba(220, 38, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .issue-card {
-  background-color: var(--feedlog-card);
+  background: linear-gradient(180deg, var(--feedlog-card) 0%, color-mix(in oklab, var(--feedlog-card) 98%, var(--feedlog-muted) 2%) 100%);
   border: 1px solid var(--feedlog-border);
   border-radius: var(--feedlog-card-radius, var(--feedlog-radius));
-  box-shadow: var(--feedlog-shadow-sm);
+  box-shadow: var(--feedlog-shadow);
   transition:
     box-shadow 0.2s ease,
     transform 0.2s ease;
@@ -35,8 +81,14 @@
 }
 
 .issue-card:hover {
-  box-shadow: var(--feedlog-shadow);
-  transform: translateY(-2px);
+}
+
+.issue-card.issue-type-enhancement:hover {
+  box-shadow: var(--feedlog-shadow-hover-enhancement);
+}
+
+.issue-card.issue-type-bug:hover {
+  box-shadow: var(--feedlog-shadow-hover-bug);
 }
 
 /* Media area - ready for future images/videos. Hidden until media support is added. */
@@ -65,21 +117,21 @@
   padding: var(--feedlog-card-padding);
   display: flex;
   flex-direction: column;
-  gap: var(--feedlog-space-3);
+  gap: 0.875rem;
 }
 
 .issue-header-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--feedlog-space-4);
-  margin-bottom: var(--feedlog-space-3);
+  gap: 1rem;
+  margin-bottom: 0.875rem;
 }
 
 .issue-badges {
   display: flex;
   align-items: center;
-  gap: var(--feedlog-space-1);
+  gap: 0.375rem;
   flex-wrap: wrap;
   margin-left: -0.25rem;
 }
@@ -87,13 +139,13 @@
 .issue-meta-right {
   display: flex;
   align-items: center;
-  gap: var(--feedlog-space-2);
+  gap: 0.5rem;
 }
 
 .pinned-indicator {
   display: flex;
   align-items: center;
-  color: var(--feedlog-pin-color, var(--feedlog-primary));
+  color: var(--feedlog-pin-color, var(--feedlog-accent-color));
   opacity: 0.9;
 }
 
@@ -122,9 +174,9 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: var(--feedlog-space-3);
-  margin-top: var(--feedlog-space-3);
-  padding-top: var(--feedlog-space-4);
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+  padding-top: 1rem;
   border-top: 1px solid var(--feedlog-border);
   flex-wrap: wrap;
 }
@@ -132,24 +184,19 @@
 .issue-footer-meta {
   display: flex;
   align-items: center;
-  gap: var(--feedlog-space-2);
-  font-size: var(--feedlog-text-xs);
+  gap: 0.5rem;
+  font-size: 0.75rem;
   color: var(--feedlog-muted-foreground);
   flex-wrap: wrap;
 }
 
-/* Keeps upvote on the right when footer-meta is omitted (e.g. null repo name, no GitHub link) */
-.issue-footer .upvote-button {
-  margin-left: auto;
-}
-
 .issue-title {
   color: var(--feedlog-card-foreground);
   font-size: var(--feedlog-title-font-size);
   font-weight: var(--feedlog-title-font-weight);
-  margin: 0 0 var(--feedlog-space-3) 0;
+  margin: 0 0 0.5rem 0;
   line-height: 1.3;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.015em;
   word-break: break-word;
 }
 
@@ -157,27 +204,10 @@
   color: var(--feedlog-muted-foreground);
   font-size: var(--feedlog-body-font-size);
   line-height: var(--feedlog-body-line-height);
-  margin: 0 0 var(--feedlog-space-3) 0;
+  margin: 0 0 0.75rem 0;
   word-break: break-word;
 }
 
-.issue-body h1,
-.issue-body h2,
-.issue-body h3,
-.issue-body h4,
-.issue-body h5,
-.issue-body h6 {
-  color: var(--feedlog-card-foreground);
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  font-weight: var(--feedlog-font-semibold);
-  letter-spacing: -0.01em;
-}
-
-.issue-body h1 { font-size: 1.5em; }
-.issue-body h2 { font-size: 1.25em; }
-.issue-body h3 { font-size: 1.125em; }
-
 .issue-body :first-child {
   margin-top: 0;
 }
@@ -195,7 +225,7 @@
 }
 
 .issue-body a {
-  color: var(--feedlog-primary);
+  color: var(--feedlog-accent-color);
   text-decoration: none;
 }
 
@@ -206,15 +236,15 @@
 .issue-body code {
   background-color: var(--feedlog-muted);
   padding: 0.125em 0.375em;
-  border-radius: var(--feedlog-radius-sm);
+  border-radius: 0.25rem;
   font-size: 0.9em;
 }
 
 .issue-body pre {
   margin: 0.5em 0;
-  padding: var(--feedlog-space-3);
+  padding: 0.75rem;
   background-color: var(--feedlog-muted);
-  border-radius: var(--feedlog-radius-sm);
+  border-radius: 0.25rem;
   overflow-x: auto;
   font-size: 0.85em;
 }
@@ -225,7 +255,7 @@
 }
 
 .issue-body strong {
-  font-weight: var(--feedlog-font-semibold);
+  font-weight: 600;
 }
 
 .issue-body ul,
@@ -246,19 +276,19 @@
 }
 
 .repo-name {
-  font-weight: var(--feedlog-font-medium);
+  font-weight: 500;
 }
 
 .github-link {
   display: inline-flex;
   align-items: center;
-  gap: var(--feedlog-space-1);
+  gap: 0.25rem;
   color: var(--feedlog-muted-foreground);
   text-decoration: none;
-  font-weight: var(--feedlog-font-medium);
-  font-size: var(--feedlog-text-xs);
-  padding: var(--feedlog-space-1) var(--feedlog-space-2);
-  border-radius: var(--feedlog-radius-sm);
+  font-weight: 500;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
   transition:
     background-color 0.2s ease,
     color 0.2s ease;
@@ -279,12 +309,12 @@
 }
 
 .github-number {
-  color: var(--feedlog-primary);
-  font-weight: var(--feedlog-font-semibold);
+  color: var(--feedlog-blue-600);
+  font-weight: 600;
 }
 
 :host(.dark) .github-number {
-  color: var(--feedlog-primary);
+  color: var(--feedlog-blue-400);
 }
 
 .upvote-button {
@@ -292,56 +322,64 @@
   flex-direction: row;
   align-items: center;
   border-radius: 9999px;
-  background-color: var(--feedlog-muted);
-  border: 1px solid transparent;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  border: 1px solid #e2e8f0;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   flex-shrink: 0;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   overflow: hidden;
-  padding: var(--feedlog-space-1) var(--feedlog-space-3);
-  gap: var(--feedlog-space-2);
+  padding: 0.375rem 0.875rem;
+  gap: 0.5rem;
   font-family: inherit;
   line-height: 1;
 }
 
 .upvote-button:hover {
-  background-color: color-mix(in oklab, var(--feedlog-muted) 90%, var(--feedlog-foreground));
+  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+  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(1px);
+  transform: translateY(0);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
 .upvote-button.upvoted {
-  background-color: var(--feedlog-badge-enhancement-bg, #eef2ff);
-  border-color: color-mix(in oklab, var(--feedlog-badge-enhancement-text, #4338ca) 15%, transparent);
+  background: linear-gradient(180deg, #eff6ff 0%, #e0e7ff 100%);
+  border-color: #bfdbfe;
 }
 
 .upvote-button.upvoted:hover {
-  opacity: 0.9;
+  background: linear-gradient(180deg, #dbeafe 0%, #c7d2fe 100%);
+  border-color: #93c5fd;
 }
 
 .upvote-action {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--feedlog-space-1);
-  color: var(--feedlog-muted-foreground);
-  font-size: var(--feedlog-text-sm);
-  font-weight: var(--feedlog-font-medium);
+  gap: 0.375rem;
+  color: #475569;
+  font-size: 0.875rem;
+  font-weight: 600;
   transition: color 0.2s ease;
 }
 
 .upvote-button:hover .upvote-action {
-  color: var(--feedlog-foreground);
+  color: #0f172a;
 }
 
 .upvote-button.upvoted .upvote-action {
-  color: var(--feedlog-badge-enhancement-text, #4338ca);
+  color: #2563eb;
 }
 
 .upvote-button.upvoted:hover .upvote-action {
-  color: var(--feedlog-badge-enhancement-text, #4338ca);
+  color: #1d4ed8;
 }
 
 .upvote-icon {
@@ -353,15 +391,15 @@
   flex-shrink: 0;
   display: block;
   vertical-align: middle;
-  transition: transform 0.2s ease;
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .upvote-button:hover .upvote-icon {
-  transform: translateY(-1px);
+  transform: translateY(-2px);
 }
 
 .upvote-button:active .upvote-icon {
-  transform: translateY(0) scale(0.95);
+  transform: translateY(0) scale(0.9);
 }
 
 .upvote-icon.filled {
@@ -378,38 +416,46 @@
   align-items: center;
   height: 1.25rem;
   overflow: hidden;
-  border-left: 1px solid var(--feedlog-border);
-  padding-left: var(--feedlog-space-2);
+  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: color-mix(in oklab, var(--feedlog-badge-enhancement-text, #4338ca) 20%, transparent);
+  border-color: #bfdbfe;
+}
+
+.upvote-button.upvoted:hover .reel-container {
+  border-color: #93c5fd;
 }
 
 .upvote-count {
-  font-size: var(--feedlog-text-sm);
-  font-weight: var(--feedlog-font-medium);
-  color: var(--feedlog-muted-foreground);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #475569;
   transition: color 0.2s ease;
   line-height: 1.25rem;
 }
 
 .upvote-button:hover .upvote-count {
-  color: var(--feedlog-foreground);
+  color: #0f172a;
 }
 
 .upvote-button.upvoted .upvote-count {
-  color: var(--feedlog-badge-enhancement-text, #4338ca);
+  color: #2563eb;
 }
 
 .upvote-button.upvoted:hover .upvote-count {
-  color: var(--feedlog-badge-enhancement-text, #4338ca);
+  color: #1d4ed8;
 }
 
 .reel-number {
   display: inline-block;
-  animation: reelIn 0.3s ease forwards;
+  animation: reelIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
 }
 
 @keyframes reelIn {
@@ -425,15 +471,57 @@
 
 /* Dark theme overrides */
 :host(.dark) .upvote-button {
-  background-color: var(--feedlog-muted);
-  border-color: transparent;
+  background: linear-gradient(180deg, var(--feedlog-card) 0%, color-mix(in oklab, var(--feedlog-card) 95%, var(--feedlog-muted) 5%) 100%);
+  border-color: var(--feedlog-border);
 }
 
 :host(.dark) .upvote-button:hover {
-  background-color: color-mix(in oklab, var(--feedlog-muted) 80%, var(--feedlog-foreground));
+  background: var(--feedlog-muted);
+  border-color: var(--feedlog-muted-foreground);
 }
 
 :host(.dark) .upvote-button.upvoted {
-  background-color: var(--feedlog-badge-enhancement-bg);
-  border-color: color-mix(in oklab, var(--feedlog-badge-enhancement-text) 15%, transparent);
+  background: linear-gradient(180deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.2) 100%);
+  border-color: rgba(37, 99, 235, 0.3);
+}
+
+:host(.dark) .upvote-button.upvoted:hover {
+  background: linear-gradient(180deg, rgba(37, 99, 235, 0.25) 0%, rgba(37, 99, 235, 0.3) 100%);
+  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

@@ -130,7 +130,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}`, part: "base" }, h("div", { class: "issue-media", part: "media" }, h("slot", { name: "media" })), h("div", { class: "issue-content", part: "content" }, h("div", { class: "issue-main", part: "main" }, h("div", { class: "issue-header-top", part: "header-top" }, h("div", { class: "issue-badges", part: "badges" }, issue.type === 'bug' ? (h("feedlog-badge", { variant: "destructive", part: "badge badge-bug" }, "Bug")) : (h("feedlog-badge", { variant: "enhancement", part: "badge badge-enhancement" }, "Enhancement")), statusBadgeLabel && (h("feedlog-badge", { variant: "secondary", part: "badge badge-status" }, statusBadgeLabel))), h("div", { class: "issue-meta-right", part: "meta-right" }, issue.pinnedAt && (h("div", { class: "pinned-indicator", title: "Pinned issue", part: "pinned-indicator" }, this.renderPinIcon())), h("span", { class: "issue-timestamp", title: timestampTitle, part: "timestamp" }, timestampLabel, " ", this.formatDate(timestampDate)))), h("h3", { class: "issue-title", part: "title" }, displayTitle), issue.body != null && issue.body !== '' && (h("div", { class: "issue-body", innerHTML: parseMarkdown(issue.body), part: "body" })), (repoName != null || showGithubButton || issue.type !== 'bug') && (h("div", { class: "issue-footer", part: "footer" }, (repoName != null || showGithubButton) && (h("div", { class: "issue-footer-meta", part: "footer-meta" }, repoName != null && (h("span", { class: "repo-name", title: repoTooltip, part: "repo-name" }, 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", part: "github-link-text" }, "View on GitHub"))))), issue.type !== 'bug' && (h("button", { part: `upvote-button ${issue.hasUpvoted ? 'upvoted' : ''}`, class: `upvote-button ${issue.hasUpvoted ? 'upvoted' : ''}`, onClick: (e) => this.handleUpvote(e), title: issue.hasUpvoted ? 'Remove upvote' : 'Upvote this issue' }, h("div", { class: "upvote-action", part: "upvote-action" }, h("slot", { name: "upvote-icon" }, this.renderUpvoteIcon(issue.hasUpvoted)), h("span", { class: "upvote-label", part: "upvote-label" }, "Upvote")), h("div", { class: "reel-container", part: "upvote-reel-container" }, h("span", { class: "upvote-count reel-number", key: issue.upvoteCount, part: "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-media", part: "media" }, h("slot", { name: "media" })), h("div", { class: "issue-content" }, h("div", { class: "issue-main" }, h("div", { class: "issue-header-top" }, h("div", { class: "issue-badges" }, issue.type === 'bug' ? (h("feedlog-badge", { variant: "destructive" }, "Bug")) : (h("feedlog-badge", { variant: "enhancement" }, "Enhancement")), statusBadgeLabel && (h("feedlog-badge", { variant: "secondary" }, statusBadgeLabel))), h("div", { class: "issue-meta-right" }, issue.pinnedAt && (h("div", { class: "pinned-indicator", title: "Pinned issue" }, this.renderPinIcon())), h("span", { class: "issue-timestamp", title: timestampTitle }, timestampLabel, " ", this.formatDate(timestampDate)))), h("h3", { class: "issue-title" }, displayTitle), issue.body != null && issue.body !== '' && (h("div", { class: "issue-body", innerHTML: parseMarkdown(issue.body) })), (repoName != null || showGithubButton || issue.type !== 'bug') && (h("div", { class: "issue-footer" }, (repoName != null || showGithubButton) && (h("div", { class: "issue-footer-meta" }, 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("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"; }