@feedlog-ai/webcomponents 0.0.39 → 0.0.41

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

@@ -1,21 +1,55 @@
 :host {
   display: inline-block;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  
+  /* Light theme defaults */
+  --feedlog-background: #ffffff;
+  --feedlog-foreground: oklch(0.145 0 0);
+  --feedlog-primary: #030213;
+  --feedlog-primary-foreground: oklch(1 0 0);
+  --feedlog-secondary: oklch(0.95 0.0058 264.53);
+  --feedlog-secondary-foreground: #030213;
+  --feedlog-muted: #ececf0;
+  --feedlog-accent: #e9ebef;
+  --feedlog-accent-foreground: #030213;
+  --feedlog-border: rgba(0, 0, 0, 0.1);
+  --feedlog-input: transparent;
+  --feedlog-ring: oklch(0.708 0 0);
+  --feedlog-destructive: #d4183d;
+  --feedlog-radius: 0.625rem;
+}
+
+:host(.dark) {
+  /* Dark theme values */
+  --feedlog-background: oklch(0.145 0 0);
+  --feedlog-foreground: oklch(0.985 0 0);
+  --feedlog-primary: oklch(0.985 0 0);
+  --feedlog-primary-foreground: oklch(0.205 0 0);
+  --feedlog-secondary: oklch(0.269 0 0);
+  --feedlog-secondary-foreground: oklch(0.985 0 0);
+  --feedlog-muted: oklch(0.269 0 0);
+  --feedlog-accent: oklch(0.269 0 0);
+  --feedlog-accent-foreground: oklch(0.985 0 0);
+  --feedlog-border: oklch(0.269 0 0);
+  --feedlog-input: oklch(0.269 0 0);
+  --feedlog-ring: oklch(0.439 0 0);
+  --feedlog-destructive: oklch(0.396 0.141 25.723);
 }
 
 button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--feedlog-space-2);
+  gap: 0.5rem;
   white-space: nowrap;
-  font-size: var(--feedlog-text-sm);
-  font-weight: var(--feedlog-font-medium);
-  border-radius: var(--feedlog-radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: calc(var(--feedlog-radius) - 2px);
   border: 1px solid transparent;
   cursor: pointer;
   transition: all 0.15s ease;
   outline: none;
-  font-family: var(--feedlog-font-family);
+  font-family: inherit;
 }
 
 button:disabled {
@@ -25,25 +59,26 @@ button:disabled {
 }
 
 button:focus-visible {
-  outline: 2px solid var(--feedlog-ring);
-  outline-offset: 2px;
+  border-color: var(--feedlog-ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--feedlog-ring) 50%, transparent);
 }
 
 /* Default variant */
 .button-default {
   background-color: var(--feedlog-primary);
   color: var(--feedlog-primary-foreground);
+  border-color: transparent;
 }
 
 .button-default:hover:not(:disabled) {
-  opacity: 0.9;
+  background-color: color-mix(in oklab, var(--feedlog-primary) 90%, transparent);
 }
 
 /* Outline variant */
 .button-outline {
   background-color: var(--feedlog-background);
   color: var(--feedlog-foreground);
-  border-color: var(--feedlog-input);
+  border-color: var(--feedlog-border);
 }
 
 .button-outline:hover:not(:disabled) {
@@ -51,10 +86,20 @@ button:focus-visible {
   color: var(--feedlog-accent-foreground);
 }
 
+:host(.dark) .button-outline {
+  background-color: transparent;
+  border-color: var(--feedlog-input);
+}
+
+:host(.dark) .button-outline:hover:not(:disabled) {
+  background-color: color-mix(in oklab, var(--feedlog-accent) 50%, transparent);
+}
+
 /* Ghost variant */
 .button-ghost {
   background-color: transparent;
   color: var(--feedlog-foreground);
+  border-color: transparent;
 }
 
 .button-ghost:hover:not(:disabled) {
@@ -65,18 +110,23 @@ button:focus-visible {
 /* Destructive variant */
 .button-destructive {
   background-color: var(--feedlog-destructive);
-  color: var(--feedlog-destructive-foreground);
+  color: #ffffff;
+  border-color: transparent;
 }
 
 .button-destructive:hover:not(:disabled) {
-  opacity: 0.9;
+  background-color: color-mix(in oklab, var(--feedlog-destructive) 90%, transparent);
+}
+
+:host(.dark) .button-destructive {
+  background-color: color-mix(in oklab, var(--feedlog-destructive) 60%, transparent);
 }
 
 /* Size variants */
 .button-size-sm {
   height: 2rem;
   padding: 0 0.75rem;
-  font-size: var(--feedlog-text-xs);
+  font-size: 0.75rem;
 }
 
 /* Icon-only small buttons */
@@ -86,14 +136,14 @@ button:focus-visible {
 }
 
 .button-size-default {
-  height: 2.5rem;
+  height: 2.25rem;
   padding: 0.5rem 1rem;
 }
 
 .button-size-lg {
-  height: 2.75rem;
-  padding: 0.5rem 1.5rem;
-  font-size: var(--feedlog-text-base);
+  height: 2.5rem;
+  padding: 0.625rem 1.5rem;
+  font-size: 1rem;
 }
 
 /* SVG icons styling */

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

@@ -30,7 +30,7 @@ export class FeedlogButton {
     }
     render() {
         const sizeClass = this.size === 'default' ? 'button-size-default' : `button-size-${this.size}`;
-        return (h("button", { key: 'f8f507c061284f630e36111ee671b29b6d3b20dd', type: this.type, class: `button button-${this.variant} ${sizeClass}`, disabled: this.disabled, onClick: this.handleClick, part: "base" }, h("slot", { key: '48403bd46271b21a4eb54c94c9193dadcd32fdcf' })));
+        return (h("button", { key: '6cdd8347def51592707b1fb9aab0dc565ca0f76f', type: this.type, class: `button button-${this.variant} ${sizeClass}`, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '3f3845195fa4b8a551473ecf1d5702321a31763e' })));
     }
     static get is() { return "feedlog-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,23 @@
 :host {
   display: block;
-  font-family: var(--feedlog-font-family);
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  
+  /* Light theme defaults */
+  --feedlog-card: #ffffff;
+  --feedlog-card-foreground: oklch(0.145 0 0);
+  --feedlog-border: rgba(0, 0, 0, 0.1);
+  --feedlog-radius: 0.625rem;
+  --feedlog-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --feedlog-card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+:host(.dark) {
+  /* Dark theme values */
+  --feedlog-card: oklch(0.145 0 0);
+  --feedlog-card-foreground: oklch(0.985 0 0);
+  --feedlog-border: oklch(0.269 0 0);
+  --feedlog-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --feedlog-card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
 }
 
 .feedlog-card {
@@ -8,38 +25,23 @@
   color: var(--feedlog-card-foreground);
   border: 1px solid var(--feedlog-border);
   border-radius: var(--feedlog-radius);
-  box-shadow: var(--feedlog-shadow-sm);
+  box-shadow: var(--feedlog-card-shadow);
   transition: box-shadow 0.15s ease;
   position: relative;
-  display: flex;
-  flex-direction: column;
 }
 
 .feedlog-card:hover {
-  box-shadow: var(--feedlog-shadow);
-}
-
-.feedlog-card-header {
-  padding: var(--feedlog-space-6);
-  display: flex;
-  flex-direction: column;
-  gap: var(--feedlog-space-1);
+  box-shadow: var(--feedlog-card-hover-shadow);
 }
 
-.feedlog-card-content {
-  padding: var(--feedlog-space-6);
-  padding-top: 0;
+::slotted([slot="header"]) {
+  display: block;
 }
 
-.feedlog-card-footer {
-  padding: var(--feedlog-space-6);
-  padding-top: 0;
-  display: flex;
-  align-items: center;
+::slotted([slot="content"]) {
+  display: block;
 }
 
-::slotted([slot="header"]),
-::slotted([slot="content"]),
 ::slotted([slot="footer"]) {
   display: block;
 }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class FeedlogCard {
     render() {
-        return (h("div", { key: 'c95d00e338fcf8d985407cda878f50d173c86c71', class: "feedlog-card", part: "base" }, h("div", { key: '5001f2e08495d54abb59ddcada568c9ff4c6fb87', class: "feedlog-card-header", part: "header" }, h("slot", { key: 'b6c6f18a458249aedfb4a95679d4592cfcac4187', name: "header" })), h("div", { key: '99faa1bd9af52fb23cb304e0a87d35b8e14a6358', class: "feedlog-card-content", part: "content" }, h("slot", { key: '44370b05b0c2335d6c7271f2807189a7a208be71', name: "content" })), h("div", { key: 'e3876d4f589f9ecf917b5a9b5919363c19d08c93', class: "feedlog-card-footer", part: "footer" }, h("slot", { key: 'be69074d341c8e88f9227d2f035f22838469b035', name: "footer" }))));
+        return (h("div", { key: '293a80e66adedfc1af29daf72390a4f464321b96', class: "feedlog-card" }, h("slot", { key: 'b7e5a827f89035e791d9c756db0f66198e6c5a38', name: "header" }), h("slot", { key: 'da89fee0a01068c8438564848f218faa9c5d849e', name: "content" }), h("slot", { key: '30b05e80e4189c0f73810a48f64e072dfac83267', name: "footer" })));
     }
     static get is() { return "feedlog-card"; }
     static get encapsulation() { return "shadow"; }