@feedlog-ai/webcomponents 0.0.20 → 0.0.21

package/README.md

@@ -281,13 +281,28 @@ interface ErrorEventDetail {
 
 ## Styling
 
-Components use Shadow DOM for encapsulation. You can style them using CSS custom properties:
+Components use Shadow DOM for encapsulation. You can style them using CSS custom properties. See the [main README](../../README.md#-style-customization) for full copy-paste examples.
 
 ```css
-feedlog-github-issues-client {
-  --feedlog-primary-color: #007acc;
-  --feedlog-border-radius: 8px;
-  --feedlog-font-family: 'Inter', sans-serif;
+feedlog-github-issues-client,
+feedlog-github-issues {
+  /* Card */
+  --feedlog-card-padding: 1.25rem;
+  --feedlog-card-accent-width: 3px;
+  --feedlog-radius: 0.625rem;
+  --feedlog-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+  --feedlog-shadow-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
+  /* Typography */
+  --feedlog-title-font-size: 0.9375rem;
+  --feedlog-title-font-weight: 600;
+  --feedlog-body-font-size: 0.8125rem;
+  --feedlog-body-line-height: 1.5;
+  --feedlog-timestamp-font-size: 0.6875rem;
+  /* Colors */
+  --feedlog-accent-color: #2563eb;
+  --feedlog-muted: #f1f5f9;
+  --feedlog-muted-foreground: #64748b;
+  --feedlog-border: rgba(0, 0, 0, 0.08);
 }
 ```
 

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-5lluu_3h.js');
+var index = require('./index-DnsqTPII.js');
 
-const feedlogBadgeCss = () => `:host{display:inline-block;--feedlog-badge-font-size:0.75rem;--feedlog-badge-font-weight:500;--feedlog-badge-padding-x:0.5rem;--feedlog-badge-padding-y:0.125rem;--feedlog-badge-border-radius:calc(0.625rem - 2px);--feedlog-blue-500:oklch(0.623 0.214 259.815);--feedlog-blue-600:oklch(0.546 0.245 262.881);--feedlog-blue-700:oklch(0.488 0.243 264.376);--feedlog-destructive:#d4183d;--feedlog-destructive-hover:#b91c1c}:host(.dark){--feedlog-blue-500:oklch(0.623 0.214 259.815);--feedlog-blue-600:oklch(0.546 0.245 262.881);--feedlog-destructive:oklch(0.396 0.141 25.723);--feedlog-destructive-hover:oklch(0.45 0.16 25.723)}.badge{display:inline-flex;align-items:center;justify-content:center;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.15s ease;font-family:inherit}.badge-default{background-color:var(--feedlog-blue-600);color:#ffffff}.badge-default:hover{background-color:var(--feedlog-blue-700)}:host(.dark) .badge-default{background-color:var(--feedlog-blue-500)}:host(.dark) .badge-default:hover{background-color:var(--feedlog-blue-600)}.badge-enhancement{background-color:var(--feedlog-blue-600);color:#ffffff}.badge-enhancement:hover{background-color:var(--feedlog-blue-700)}:host(.dark) .badge-enhancement{background-color:var(--feedlog-blue-500)}:host(.dark) .badge-enhancement:hover{background-color:var(--feedlog-blue-600)}.badge-destructive{background-color:var(--feedlog-destructive);color:#ffffff}.badge-destructive:hover{background-color:var(--feedlog-destructive-hover)}`;
+const feedlogBadgeCss = () => `:host{display:inline-block;--feedlog-badge-font-size:0.75rem;--feedlog-badge-font-weight:500;--feedlog-badge-padding-x:0.5rem;--feedlog-badge-padding-y:0.125rem;--feedlog-badge-border-radius:calc(0.625rem - 2px);--feedlog-blue-500:oklch(0.623 0.214 259.815);--feedlog-blue-600:oklch(0.546 0.245 262.881);--feedlog-blue-700:oklch(0.488 0.243 264.376);--feedlog-destructive:#d4183d;--feedlog-destructive-hover:#b91c1c}:host(.dark){--feedlog-blue-500:oklch(0.623 0.214 259.815);--feedlog-blue-600:oklch(0.546 0.245 262.881);--feedlog-destructive:oklch(0.396 0.141 25.723);--feedlog-destructive-hover:oklch(0.45 0.16 25.723)}.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.15s ease;font-family:inherit}.badge-default{background-color:var(--feedlog-blue-600);color:#ffffff}.badge-default:hover{background-color:var(--feedlog-blue-700)}:host(.dark) .badge-default{background-color:var(--feedlog-blue-500)}:host(.dark) .badge-default:hover{background-color:var(--feedlog-blue-600)}.badge-enhancement{background-color:var(--feedlog-blue-600);color:#ffffff}.badge-enhancement:hover{background-color:var(--feedlog-blue-700)}:host(.dark) .badge-enhancement{background-color:var(--feedlog-blue-500)}:host(.dark) .badge-enhancement:hover{background-color:var(--feedlog-blue-600)}.badge-destructive{background-color:var(--feedlog-destructive);color:#ffffff}.badge-destructive:hover{background-color:var(--feedlog-destructive-hover)}.badge-secondary{background-color:var(--feedlog-muted, #f1f5f9);color:var(--feedlog-muted-foreground, #64748b)}:host(.dark) .badge-secondary{background-color:var(--feedlog-muted, oklch(0.32 0.01 260));color:var(--feedlog-muted-foreground, oklch(0.72 0.02 260))}`;
 
 const FeedlogBadge = class {
     constructor(hostRef) {
@@ -13,7 +13,7 @@ const FeedlogBadge = class {
         this.variant = 'default';
     }
     render() {
-        return (index.h("span", { key: '482a74feb8d254a75383c30c7b39790edd04a05b', class: `badge badge-${this.variant}` }, index.h("slot", { key: '8d2db3fe0c2bc58e17829db4de7d0233189bb101' })));
+        return (index.h("span", { key: '22e5d49e033459b4e3e409ffa0e76641457ad740', class: `badge badge-${this.variant}` }, index.h("slot", { key: '8f986c5150aa39034f090a258231e45363f9cac9' })));
     }
 };
 FeedlogBadge.style = feedlogBadgeCss();