@feedlog-ai/webcomponents 0.0.35 → 0.0.37

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

@@ -1,78 +1,32 @@
 :host {
   display: block;
-  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;
+  font-family: var(--feedlog-font-family);
 
   /* Customization variables */
-  --feedlog-card-padding: 1.25rem;
-  --feedlog-title-font-size: 1.125rem;
-  --feedlog-title-font-weight: 600;
-  --feedlog-body-font-size: 0.875rem;
+  --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-body-line-height: 1.6;
-  --feedlog-timestamp-font-size: 0.6875rem;
+  --feedlog-timestamp-font-size: var(--feedlog-text-xs);
   --feedlog-timestamp-color: var(--feedlog-muted-foreground);
-  --feedlog-card-radius: 0.75rem;
+  --feedlog-card-radius: 16px;
   --feedlog-icon-color: var(--feedlog-muted-foreground);
   --feedlog-icon-color-muted: var(--feedlog-muted-foreground);
-  --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);
+  --feedlog-pin-color: var(--feedlog-primary);
+  --feedlog-upvote-icon-color: var(--feedlog-primary);
+  --feedlog-upvote-icon-filled-color: var(--feedlog-primary);
 }
 
 :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: linear-gradient(180deg, var(--feedlog-card) 0%, color-mix(in oklab, var(--feedlog-card) 98%, var(--feedlog-muted) 2%) 100%);
+  background-color: var(--feedlog-card);
   border: 1px solid var(--feedlog-border);
   border-radius: var(--feedlog-card-radius, var(--feedlog-radius));
-  box-shadow: var(--feedlog-shadow);
+  box-shadow: var(--feedlog-shadow-sm);
   transition:
     box-shadow 0.2s ease,
     transform 0.2s ease;
@@ -81,14 +35,8 @@
 }
 
 .issue-card:hover {
-}
-
-.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);
+  box-shadow: var(--feedlog-shadow);
+  transform: translateY(-2px);
 }
 
 /* Media area - ready for future images/videos. Hidden until media support is added. */
@@ -117,21 +65,21 @@
   padding: var(--feedlog-card-padding);
   display: flex;
   flex-direction: column;
-  gap: 0.875rem;
+  gap: var(--feedlog-space-3);
 }
 
 .issue-header-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 0.875rem;
+  gap: var(--feedlog-space-4);
+  margin-bottom: var(--feedlog-space-3);
 }
 
 .issue-badges {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--feedlog-space-1);
   flex-wrap: wrap;
   margin-left: -0.25rem;
 }
@@ -139,13 +87,13 @@
 .issue-meta-right {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--feedlog-space-2);
 }
 
 .pinned-indicator {
   display: flex;
   align-items: center;
-  color: var(--feedlog-pin-color, var(--feedlog-accent-color));
+  color: var(--feedlog-pin-color, var(--feedlog-primary));
   opacity: 0.9;
 }
 
@@ -174,9 +122,9 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  margin-top: 0.75rem;
-  padding-top: 1rem;
+  gap: var(--feedlog-space-3);
+  margin-top: var(--feedlog-space-3);
+  padding-top: var(--feedlog-space-4);
   border-top: 1px solid var(--feedlog-border);
   flex-wrap: wrap;
 }
@@ -184,19 +132,24 @@
 .issue-footer-meta {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  font-size: 0.75rem;
+  gap: var(--feedlog-space-2);
+  font-size: var(--feedlog-text-xs);
   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 0.5rem 0;
+  margin: 0 0 var(--feedlog-space-3) 0;
   line-height: 1.3;
-  letter-spacing: -0.015em;
+  letter-spacing: -0.02em;
   word-break: break-word;
 }
 
@@ -204,10 +157,27 @@
   color: var(--feedlog-muted-foreground);
   font-size: var(--feedlog-body-font-size);
   line-height: var(--feedlog-body-line-height);
-  margin: 0 0 0.75rem 0;
+  margin: 0 0 var(--feedlog-space-3) 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;
 }
@@ -225,7 +195,7 @@
 }
 
 .issue-body a {
-  color: var(--feedlog-accent-color);
+  color: var(--feedlog-primary);
   text-decoration: none;
 }
 
@@ -236,15 +206,15 @@
 .issue-body code {
   background-color: var(--feedlog-muted);
   padding: 0.125em 0.375em;
-  border-radius: 0.25rem;
+  border-radius: var(--feedlog-radius-sm);
   font-size: 0.9em;
 }
 
 .issue-body pre {
   margin: 0.5em 0;
-  padding: 0.75rem;
+  padding: var(--feedlog-space-3);
   background-color: var(--feedlog-muted);
-  border-radius: 0.25rem;
+  border-radius: var(--feedlog-radius-sm);
   overflow-x: auto;
   font-size: 0.85em;
 }
@@ -255,7 +225,7 @@
 }
 
 .issue-body strong {
-  font-weight: 600;
+  font-weight: var(--feedlog-font-semibold);
 }
 
 .issue-body ul,
@@ -276,19 +246,19 @@
 }
 
 .repo-name {
-  font-weight: 500;
+  font-weight: var(--feedlog-font-medium);
 }
 
 .github-link {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--feedlog-space-1);
   color: var(--feedlog-muted-foreground);
   text-decoration: none;
-  font-weight: 500;
-  font-size: 0.75rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
+  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);
   transition:
     background-color 0.2s ease,
     color 0.2s ease;
@@ -309,12 +279,12 @@
 }
 
 .github-number {
-  color: var(--feedlog-blue-600);
-  font-weight: 600;
+  color: var(--feedlog-primary);
+  font-weight: var(--feedlog-font-semibold);
 }
 
 :host(.dark) .github-number {
-  color: var(--feedlog-blue-400);
+  color: var(--feedlog-primary);
 }
 
 .upvote-button {
@@ -322,64 +292,56 @@
   flex-direction: row;
   align-items: center;
   border-radius: 9999px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-  border: 1px solid #e2e8f0;
+  background-color: var(--feedlog-muted);
+  border: 1px solid transparent;
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s ease;
   flex-shrink: 0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   overflow: hidden;
-  padding: 0.375rem 0.875rem;
-  gap: 0.5rem;
+  padding: var(--feedlog-space-1) var(--feedlog-space-3);
+  gap: var(--feedlog-space-2);
   font-family: inherit;
   line-height: 1;
 }
 
 .upvote-button:hover {
-  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);
+  background-color: color-mix(in oklab, var(--feedlog-muted) 90%, var(--feedlog-foreground));
 }
 
 .upvote-button:active {
-  transform: translateY(0);
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transform: translateY(1px);
 }
 
 .upvote-button.upvoted {
-  background: linear-gradient(180deg, #eff6ff 0%, #e0e7ff 100%);
-  border-color: #bfdbfe;
+  background-color: var(--feedlog-badge-enhancement-bg, #eef2ff);
+  border-color: color-mix(in oklab, var(--feedlog-badge-enhancement-text, #4338ca) 15%, transparent);
 }
 
 .upvote-button.upvoted:hover {
-  background: linear-gradient(180deg, #dbeafe 0%, #c7d2fe 100%);
-  border-color: #93c5fd;
+  opacity: 0.9;
 }
 
 .upvote-action {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 0.375rem;
-  color: #475569;
-  font-size: 0.875rem;
-  font-weight: 600;
+  gap: var(--feedlog-space-1);
+  color: var(--feedlog-muted-foreground);
+  font-size: var(--feedlog-text-sm);
+  font-weight: var(--feedlog-font-medium);
   transition: color 0.2s ease;
 }
 
 .upvote-button:hover .upvote-action {
-  color: #0f172a;
+  color: var(--feedlog-foreground);
 }
 
 .upvote-button.upvoted .upvote-action {
-  color: #2563eb;
+  color: var(--feedlog-badge-enhancement-text, #4338ca);
 }
 
 .upvote-button.upvoted:hover .upvote-action {
-  color: #1d4ed8;
+  color: var(--feedlog-badge-enhancement-text, #4338ca);
 }
 
 .upvote-icon {
@@ -391,15 +353,15 @@
   flex-shrink: 0;
   display: block;
   vertical-align: middle;
-  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: transform 0.2s ease;
 }
 
 .upvote-button:hover .upvote-icon {
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }
 
 .upvote-button:active .upvote-icon {
-  transform: translateY(0) scale(0.9);
+  transform: translateY(0) scale(0.95);
 }
 
 .upvote-icon.filled {
@@ -416,46 +378,38 @@
   align-items: center;
   height: 1.25rem;
   overflow: hidden;
-  border-left: 1px solid #e2e8f0;
-  padding-left: 0.5rem;
+  border-left: 1px solid var(--feedlog-border);
+  padding-left: var(--feedlog-space-2);
   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;
+  border-color: color-mix(in oklab, var(--feedlog-badge-enhancement-text, #4338ca) 20%, transparent);
 }
 
 .upvote-count {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #475569;
+  font-size: var(--feedlog-text-sm);
+  font-weight: var(--feedlog-font-medium);
+  color: var(--feedlog-muted-foreground);
   transition: color 0.2s ease;
   line-height: 1.25rem;
 }
 
 .upvote-button:hover .upvote-count {
-  color: #0f172a;
+  color: var(--feedlog-foreground);
 }
 
 .upvote-button.upvoted .upvote-count {
-  color: #2563eb;
+  color: var(--feedlog-badge-enhancement-text, #4338ca);
 }
 
 .upvote-button.upvoted:hover .upvote-count {
-  color: #1d4ed8;
+  color: var(--feedlog-badge-enhancement-text, #4338ca);
 }
 
 .reel-number {
   display: inline-block;
-  animation: reelIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+  animation: reelIn 0.3s ease forwards;
 }
 
 @keyframes reelIn {
@@ -471,57 +425,15 @@
 
 /* Dark theme overrides */
 :host(.dark) .upvote-button {
-  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);
+  background-color: var(--feedlog-muted);
+  border-color: transparent;
 }
 
 :host(.dark) .upvote-button:hover {
-  background: var(--feedlog-muted);
-  border-color: var(--feedlog-muted-foreground);
+  background-color: color-mix(in oklab, var(--feedlog-muted) 80%, var(--feedlog-foreground));
 }
 
 :host(.dark) .upvote-button.upvoted {
-  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);
+  background-color: var(--feedlog-badge-enhancement-bg);
+  border-color: color-mix(in oklab, var(--feedlog-badge-enhancement-text) 15%, transparent);
 }

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}` }, 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)))))))))));
+        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)))))))))));
     }
     static get is() { return "feedlog-issue"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 const sampleBugIssue = {
-    id: 'issue-bug-1',
-    githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/42',
+    id: 'iss_bug_charts_mobile',
+    githubIssueLink: null,
     title: 'Charts not rendering on mobile',
     body: 'The chart components are not properly responsive on smaller screens. They overflow the container and break the layout.',
     type: 'bug',
@@ -9,31 +9,31 @@ const sampleBugIssue = {
     pinnedAt: null,
     revision: 1,
     repository: {
-        id: 'repo-1',
-        name: 'My App',
-        description: 'Main application repository',
+        id: 'rep_755dtvwg9d6r',
+        name: 'Infrastructure',
+        description: null,
     },
-    updatedAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(), // 5 hours ago
-    createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // 1 week ago
+    updatedAt: '2026-03-19T12:00:00.000Z',
+    createdAt: '2026-03-19T10:00:00.000Z',
     upvoteCount: 3,
     hasUpvoted: false,
 };
 const sampleEnhancementIssue = {
-    id: 'issue-enhancement-1',
-    githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/24',
-    title: 'Add dark mode support',
-    body: 'It would be great to have a dark mode option for the dashboard. This would reduce eye strain for users working late at night.',
+    id: 'iss_365sfvyqb434',
+    githubIssueLink: null,
     type: 'enhancement',
     status: 'open',
     pinnedAt: null,
-    revision: 1,
+    title: 'Add support for native GitHub Issue Types',
+    body: "## Motivation\nGitHub has introduced a native 'Issue Type' field at the organization level to provide a structured way to categorize work, replacing the inconsistent use of labels or project-specific custom fields.\n\n## What’s Changing\nThe system will now support the native GitHub 'Issue Type' property as the primary source of truth for categorizing issues. Integration will be updated to read the 'issue.type' field from webhooks and API responses.\n\n## Expected Behavior\n1. The system will prioritize the 'issue.type.name' field to determine the issue category.\n2. Existing label-based categorization will be maintained as a fallback mechanism for issues where the native type is not defined.\n3. The application will correctly ignore project-level 'Type' fields to avoid data conflicts.",
+    revision: 2,
     repository: {
-        id: 'repo-1',
-        name: 'feedlog-toolkit',
-        description: 'Monorepo for Feedlog Toolkit',
+        id: 'rep_755dtvwg9d6r',
+        name: 'Infrastructure',
+        description: null,
     },
-    updatedAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), // 2 hours ago
-    createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days ago
+    updatedAt: '2026-03-23T16:42:40.555Z',
+    createdAt: '2026-03-23T16:41:06.302Z',
     upvoteCount: 24,
     hasUpvoted: false,
 };
@@ -56,10 +56,10 @@ const repositoryWithDescription = Object.assign(Object.assign({}, sampleEnhancem
         name: 'Main App',
         description: 'Main application repository - hover over the name to see this.',
     } });
-const issueInProgress = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-in-progress', status: 'in_progress', title: 'Add dark mode support' });
+const issueInProgress = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-in-progress', status: 'in_progress', title: 'Add support for native GitHub Issue Types' });
 const issueClosedBug = Object.assign(Object.assign({}, sampleBugIssue), { id: 'issue-closed-bug', status: 'closed', title: 'Login fails on Safari' });
 const issueClosedEnhancement = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-closed-enhancement', status: 'closed', title: 'Export data to CSV' });
-const issueWithGithubLink = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-with-gh', githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/42', title: 'Add dark mode support' });
+const issueWithGithubLink = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-with-gh', githubIssueLink: 'https://github.com/feedlog/feedlog-toolkit/issues/42', title: 'Add support for native GitHub Issue Types' });
 const issueWithGithubLinkNull = Object.assign(Object.assign({}, sampleEnhancementIssue), { id: 'issue-private-repo', githubIssueLink: null, title: 'Private repo issue', repository: {
         id: 'repo-private',
         name: 'Private Repo',