@feedlog-ai/webcomponents 0.0.35 → 0.0.37

package/README.md

@@ -11,7 +11,7 @@ Stencil-based web components for GitHub issue management. These are framework-ag
 - **Tree-shakeable**: Multiple output formats for optimal bundle sizes
 - **TypeScript Support**: Full type safety with generated TypeScript definitions
 - **Theme Support**: Built-in light/dark theme switching
-- **Event System**: Custom events for upvoting, theme changes, and errors
+- **Event System**: Custom events for upvoting and errors
 
 ## Installation
 
@@ -21,7 +21,7 @@ npm install @feedlog-ai/webcomponents
 
 ## Components
 
-### FeedlogGithubIssuesClient
+### FeedlogIssuesClient
 
 The main component for displaying GitHub issues with built-in SDK integration.
 
@@ -33,12 +33,10 @@ The main component for displaying GitHub issues with built-in SDK integration.
 - `endpoint` (optional): Custom API endpoint
 - `maxWidth` (optional): Container max width (default: `'42rem'`)
 - `theme` (optional): Theme variant - `'light'` or `'dark'` (default: `'light'`)
-- `showThemeToggle` (optional): Show theme toggle button (default: `true`)
 
 **Events:**
 
 - `feedlogUpvote`: Emitted when an issue is upvoted
-- `feedlogThemeChange`: Emitted when theme changes
 - `feedlogError`: Emitted on errors
 
 ## Playground (Development & Testing)
@@ -143,21 +141,23 @@ The playground lets you configure:
 </html>
 ```
 
-### React (with generated bindings)
+### React
+
+For React apps, use the dedicated `@feedlog-ai/react` package for better integration:
 
 ```tsx
 import React from 'react';
-import { FeedlogIssuesClient } from '@feedlog-ai/webcomponents/dist/components';
+import { FeedlogIssuesClient } from '@feedlog-ai/react';
 
 function App() {
   return (
     <div>
-      <feedlog-issues-client
-        api-key="your-api-key"
+      <FeedlogIssuesClient
+        apiKey="your-api-key"
         type="bug"
         limit={10}
         theme="light"
-        max-width="42rem"
+        maxWidth="42rem"
         onFeedlogUpvote={event => {
           console.log('Issue upvoted:', event.detail);
         }}
@@ -260,14 +260,6 @@ interface UpvoteEventDetail {
 }
 ```
 
-### feedlogThemeChange
-
-Emitted when the theme is changed via the theme toggle.
-
-```typescript
-type ThemeEventDetail = 'light' | 'dark';
-```
-
 ### feedlogError
 
 Emitted when an error occurs during API calls or other operations.

package/dist/cjs/feedlog-badge.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CXKBwRlh.js');
+var index = require('./index-prPyjPBk.js');
 
-const feedlogBadgeCss = () => `:host{display:inline-block;--feedlog-badge-font-size:0.75rem;--feedlog-badge-font-weight:500;--feedlog-badge-padding-x:0.625rem;--feedlog-badge-padding-y:0.125rem;--feedlog-badge-border-radius:9999px;--feedlog-blue-bg:#eff6ff;--feedlog-blue-text:#1e40af;--feedlog-blue-bg-hover:#dbeafe;--feedlog-red-bg:#fef2f2;--feedlog-red-text:#991b1b;--feedlog-red-bg-hover:#fee2e2;--feedlog-muted-bg:#f1f5f9;--feedlog-muted-text:#475569;--feedlog-muted-bg-hover:#e2e8f0}:host(.dark){--feedlog-blue-bg:rgba(37, 99, 235, 0.15);--feedlog-blue-text:#93c5fd;--feedlog-blue-bg-hover:rgba(37, 99, 235, 0.25);--feedlog-red-bg:rgba(220, 38, 38, 0.15);--feedlog-red-text:#fca5a5;--feedlog-red-bg-hover:rgba(220, 38, 38, 0.25);--feedlog-muted-bg:oklch(0.32 0.01 260);--feedlog-muted-text:oklch(0.8 0.02 260);--feedlog-muted-bg-hover:oklch(0.38 0.01 260)}.badge{display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;font-size:var(--feedlog-badge-font-size);font-weight:var(--feedlog-badge-font-weight);padding:var(--feedlog-badge-padding-y) var(--feedlog-badge-padding-x);border-radius:var(--feedlog-badge-border-radius);white-space:nowrap;transition:background-color 0.2s ease, color 0.2s ease;font-family:inherit;border:1px solid transparent}.badge-default{background-color:var(--feedlog-blue-bg);color:var(--feedlog-blue-text)}.badge-default:hover{background-color:var(--feedlog-blue-bg-hover)}.badge-enhancement{background-color:var(--feedlog-blue-bg);color:var(--feedlog-blue-text)}.badge-enhancement:hover{background-color:var(--feedlog-blue-bg-hover)}.badge-destructive{background-color:var(--feedlog-red-bg);color:var(--feedlog-red-text)}.badge-destructive:hover{background-color:var(--feedlog-red-bg-hover)}.badge-secondary{background-color:var(--feedlog-muted-bg);color:var(--feedlog-muted-text)}.badge-secondary:hover{background-color:var(--feedlog-muted-bg-hover)}`;
+const feedlogBadgeCss = () => `:host{display:inline-block;--feedlog-badge-font-size:var(--feedlog-text-xs);--feedlog-badge-font-weight:var(--feedlog-font-medium);--feedlog-badge-padding-x:var(--feedlog-space-3);--feedlog-badge-padding-y:0.25rem;--feedlog-badge-border-radius:9999px;--feedlog-blue-bg:var(--feedlog-badge-enhancement-bg, #eef2ff);--feedlog-blue-text:var(--feedlog-badge-enhancement-text, #4338ca);--feedlog-blue-border:color-mix(in oklab, var(--feedlog-blue-text) 15%, transparent);--feedlog-red-bg:var(--feedlog-badge-destructive-bg, #fef2f2);--feedlog-red-text:var(--feedlog-badge-destructive-text, #b91c1c);--feedlog-red-border:color-mix(in oklab, var(--feedlog-red-text) 15%, transparent);--feedlog-muted-bg:var(--feedlog-badge-secondary-bg, #f1f5f9);--feedlog-muted-text:var(--feedlog-badge-secondary-text, #475569);--feedlog-muted-border:color-mix(in oklab, var(--feedlog-muted-text) 15%, transparent)}:host(.dark){}.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--feedlog-space-1);font-size:var(--feedlog-badge-font-size);font-weight:var(--feedlog-badge-font-weight);padding:var(--feedlog-badge-padding-y) var(--feedlog-badge-padding-x);border-radius:var(--feedlog-badge-border-radius);white-space:nowrap;transition:background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;font-family:var(--feedlog-font-family);border:1px solid transparent}.badge-default{background-color:var(--feedlog-blue-bg);color:var(--feedlog-blue-text);border:1px solid var(--feedlog-blue-border)}.badge-default:hover{opacity:0.9}.badge-enhancement{background-color:var(--feedlog-blue-bg);color:var(--feedlog-blue-text);border:1px solid var(--feedlog-blue-border)}.badge-enhancement:hover{opacity:0.9}.badge-destructive{background-color:var(--feedlog-red-bg);color:var(--feedlog-red-text);border:1px solid var(--feedlog-red-border)}.badge-destructive:hover{opacity:0.9}.badge-secondary{background-color:var(--feedlog-muted-bg);color:var(--feedlog-muted-text);border:1px solid var(--feedlog-muted-border)}.badge-secondary:hover{opacity:0.9}`;
 
 const FeedlogBadge = class {
     constructor(hostRef) {
@@ -13,7 +13,7 @@ const FeedlogBadge = class {
         this.variant = 'default';
     }
     render() {
-        return (index.h("span", { key: '22e5d49e033459b4e3e409ffa0e76641457ad740', class: `badge badge-${this.variant}` }, index.h("slot", { key: '8f986c5150aa39034f090a258231e45363f9cac9' })));
+        return (index.h("span", { key: '6ea83e77cecfa5589ba64b86d96053668407be8f', class: `badge badge-${this.variant}`, part: "base" }, index.h("slot", { key: '292fba2dd5ca3ec6455c9114f883e21c74846695' })));
     }
 };
 FeedlogBadge.style = feedlogBadgeCss();