@jegdev/sema-ui 0.0.8 → 0.0.9-beta.1

package/dist/index.d.ts

@@ -52,6 +52,18 @@ export declare class SemaButton extends LitElement {
     render(): TemplateResult<1>;
 }
 
+export declare class SemaCardProduct extends LitElement {
+    static styles: CSSResult[];
+    image: string;
+    category: string;
+    id: string;
+    title: string;
+    rate: number;
+    count: number;
+    price: number;
+    render(): TemplateResult<1>;
+}
+
 export declare class SemaDropdown extends LitElement {
     static styles: CSSResult[];
     label: string;

package/dist/sema-ui.es.js

@@ -1,7 +1,7 @@
-import { css as g, LitElement as m, html as l } from "lit";
-import { property as a, customElement as _ } from "lit/decorators.js";
-import { unsafeHTML as z } from "lit/directives/unsafe-html.js";
-const C = g`
+import { css as m, LitElement as b, html as l } from "lit";
+import { property as n, customElement as u } from "lit/decorators.js";
+import { unsafeHTML as T } from "lit/directives/unsafe-html.js";
+const j = m`
 	/* ---------------- GENERAL STYLES  ------------------- */
 
 	a {
@@ -96,45 +96,45 @@ const C = g`
 		color: var(--btn-secondary-color);
 	}
 `;
-var T = Object.defineProperty, j = Object.getOwnPropertyDescriptor, p = (i, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? j(e, r) : e, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (t = (o ? n(e, r, t) : n(t)) || t);
-  return o && t && T(e, r, t), t;
+var D = Object.defineProperty, B = Object.getOwnPropertyDescriptor, p = (s, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? B(e, r) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (o ? i(e, r, t) : i(t)) || t);
+  return o && t && D(e, r, t), t;
 };
-let c = class extends m {
+let c = class extends b {
   constructor() {
     super(...arguments), this.mode = "", this.kind = "button", this.custom = "off", this.size = "md", this.fontSize = "md", this.url = "", this.target = "_self", this.altText = "";
   }
   render() {
-    const i = this.custom === "on", e = i ? `--btn-primary-color: ${this.firstColor}; --btn-secondary-color: ${this.secondaryColor};` : "";
+    const s = this.custom === "on", e = s ? `--btn-primary-color: ${this.firstColor}; --btn-secondary-color: ${this.secondaryColor};` : "";
     let r = "120px";
     this.size === "sm" ? r = "80px" : this.size === "md" ? r = "120px" : this.size === "lg" ? r = "160px" : this.size === "full" && (r = "100%");
     const o = `--btn-width: ${r};`;
     let t = "1rem";
     this.fontSize === "sm" ? t = "0.8rem" : this.fontSize === "md" ? t = "1rem" : this.fontSize === "lg" ? t = "1.5rem" : this.fontSize === "xl" && (t = "2rem");
-    const s = `--btn-font-size: ${t}`;
+    const a = `--btn-font-size: ${t}`;
     return this.mode === "outline" ? this.kind === "link" ? l`
 						<a
-							style="${e}${o}${s}"
+							style="${e}${o}${a}"
 							href="${this.url}"
 							alt="${this.altText}"
 							title="${this.altText}"
 							target="${this.target}"
-							class="btn ${i ? "btn-outline-custom" : "btn-outline"}"
+							class="btn ${s ? "btn-outline-custom" : "btn-outline"}"
 							>
 							<slot></slot>
 						</a>
 					` : l`
 						<button
-							style="${e}${o}${s}"
-							class="btn ${i ? "btn-outline-custom" : "btn-outline"}"
+							style="${e}${o}${a}"
+							class="btn ${s ? "btn-outline-custom" : "btn-outline"}"
 							title="${this.altText}"
 						>
 							<slot></slot>
 						</button>
 					` : this.mode === "ghost" ? this.kind === "link" ? l`
 							<a
-								style="${e}${o}${s}"
+								style="${e}${o}${a}"
 								href="${this.url}"
 								alt="${this.altText}"
 								title="${this.altText}"
@@ -145,7 +145,7 @@ let c = class extends m {
 							</a>
 						` : l`
 							<button
-								style="${e}${o}${s}"
+								style="${e}${o}${a}"
 								class="btn ${this.custom === "on" ? "btn-ghost-custom" : "btn-ghost"}"
 								title="${this.altText}"
 							>
@@ -153,7 +153,7 @@ let c = class extends m {
 							</button>
 						` : this.kind === "link" ? l`
 							<a
-								style="${e}${o}${s}"
+								style="${e}${o}${a}"
 								href="${this.url}"
 								alt="${this.altText}"
 								title="${this.altText}"
@@ -164,7 +164,7 @@ let c = class extends m {
 							</a>
 						` : l`
 							<button
-								style="${e}${o}${s}"
+								style="${e}${o}${a}"
 								class="btn ${this.custom === "on" ? "btn-custom" : "btn-primary"}"
 								title="${this.altText}"
 							>
@@ -173,43 +173,43 @@ let c = class extends m {
 						`;
   }
 };
-c.styles = [C];
+c.styles = [j];
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "mode", 2);
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "kind", 2);
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "custom", 2);
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "firstColor", 2);
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "secondaryColor", 2);
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "size", 2);
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "fontSize", 2);
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "url", 2);
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "target", 2);
 p([
-  a({ type: String })
+  n({ type: String })
 ], c.prototype, "altText", 2);
 c = p([
-  _("sema-button")
+  u("sema-button")
 ], c);
-const A = g`
+const q = m`
 	:host {
-		font-family: Arial, Helvetica, sans-serif;
+		font-family: "Inter", system-ui, -apple-system, sans-serif;
 	}
 
 	.__section {
@@ -296,12 +296,12 @@ const A = g`
 		}
 	}
 `;
-var B = Object.defineProperty, D = Object.getOwnPropertyDescriptor, $ = (i, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? D(e, r) : e, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (t = (o ? n(e, r, t) : n(t)) || t);
-  return o && t && B(e, r, t), t;
+var L = Object.defineProperty, A = Object.getOwnPropertyDescriptor, O = (s, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? A(e, r) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (o ? i(e, r, t) : i(t)) || t);
+  return o && t && L(e, r, t), t;
 };
-let f = class extends m {
+let y = class extends b {
   constructor() {
     super(...arguments), this.type = "info", this.title = "", this.message = "";
   }
@@ -314,23 +314,23 @@ let f = class extends m {
 		`;
   }
 };
-f.styles = [A];
-$([
-  a({ type: String })
-], f.prototype, "type", 2);
-$([
-  a({ type: String })
-], f.prototype, "title", 2);
-$([
-  a({ type: String })
-], f.prototype, "message", 2);
-f = $([
-  _("sema-alerts")
-], f);
-const H = g`
+y.styles = [q];
+O([
+  n({ type: String })
+], y.prototype, "type", 2);
+O([
+  n({ type: String })
+], y.prototype, "title", 2);
+O([
+  n({ type: String })
+], y.prototype, "message", 2);
+y = O([
+  u("sema-alerts")
+], y);
+const E = m`
   :host {
     display: block;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "Inter", system-ui, -apple-system, sans-serif;
   }
 
   .accordion {
@@ -401,20 +401,20 @@ const H = g`
 
 	}
 `;
-var L = Object.defineProperty, q = Object.getOwnPropertyDescriptor, v = (i, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? q(e, r) : e, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (t = (o ? n(e, r, t) : n(t)) || t);
-  return o && t && L(e, r, t), t;
+var I = Object.defineProperty, N = Object.getOwnPropertyDescriptor, $ = (s, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? N(e, r) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (o ? i(e, r, t) : i(t)) || t);
+  return o && t && I(e, r, t), t;
 };
-let h = class extends m {
+let g = class extends b {
   constructor() {
     super(...arguments), this.question = "", this.answer = "", this.color = "", this.open = !1;
   }
   render() {
-    const i = this.open === !0;
+    const s = this.open === !0;
     let e = this.color ? this.color : "#dc2626";
-    const o = i ? `
-    --color-btn: ${i ? "rgba(229, 231, 235, 0.2)" : ""};
+    const o = s ? `
+    --color-btn: ${s ? "rgba(229, 231, 235, 0.2)" : ""};
     --isOpenPadding: 1rem;
     --isOpenHeight: 200px;
     --isOpenOpacity: 1;
@@ -424,9 +424,9 @@ let h = class extends m {
     --isOpenHeight: 0; 
     --isOpenOpacity: 0;
     --isOpenRotate: rotate(0);`, t = `
-    --svgcolor: ${e};`, s = o + t;
+    --svgcolor: ${e};`, a = o + t;
     return l`
-    <article class="accordion" style="${s}" >
+    <article class="accordion" style="${a}" >
       <div class="__btn" @click="${this._changeIsOpen}">
         <h3 class="__title">${this.question}</h3>
 
@@ -444,23 +444,23 @@ let h = class extends m {
     this.open === !1 ? this.open = !0 : this.open = !1;
   }
 };
-h.styles = [H];
-v([
-  a({ type: String })
-], h.prototype, "question", 2);
-v([
-  a({ type: String })
-], h.prototype, "answer", 2);
-v([
-  a({ type: String })
-], h.prototype, "color", 2);
-v([
-  a({ type: Boolean })
-], h.prototype, "open", 2);
-h = v([
-  _("sema-accordion")
-], h);
-const E = g`
+g.styles = [E];
+$([
+  n({ type: String })
+], g.prototype, "question", 2);
+$([
+  n({ type: String })
+], g.prototype, "answer", 2);
+$([
+  n({ type: String })
+], g.prototype, "color", 2);
+$([
+  n({ type: Boolean })
+], g.prototype, "open", 2);
+g = $([
+  u("sema-accordion")
+], g);
+const R = m`
 
   .__title {
     color: #000;
@@ -470,7 +470,7 @@ const E = g`
   @media (prefers-color-scheme: dark) {
     :root {
       display: block;
-      font-family: Arial, Helvetica, sans-serif;
+      font-family: "Inter", system-ui, -apple-system, sans-serif;
     }
 
     section {
@@ -490,17 +490,17 @@ const E = g`
     }
   }
 `;
-var S = Object.freeze, P = Object.defineProperty, R = Object.getOwnPropertyDescriptor, w = (i, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? R(e, r) : e, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (t = (o ? n(e, r, t) : n(t)) || t);
-  return o && t && P(e, r, t), t;
-}, N = (i, e) => S(P(i, "raw", { value: S(i.slice()) })), k;
-let b = class extends m {
+var P = Object.freeze, C = Object.defineProperty, H = Object.getOwnPropertyDescriptor, S = (s, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? H(e, r) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (o ? i(e, r, t) : i(t)) || t);
+  return o && t && C(e, r, t), t;
+}, M = (s, e) => P(C(s, "raw", { value: P(s.slice()) })), z;
+let _ = class extends b {
   constructor() {
     super(...arguments), this.title = "", this.color = "", this.faqs = [];
   }
   render() {
-    const i = {
+    const s = {
       "@context": "https://schema.org",
       "@type": "FAQPage",
       mainEntity: this.faqs.map((r) => ({
@@ -511,8 +511,8 @@ let b = class extends m {
           text: r.answer
         }
       }))
-    }, e = JSON.stringify(i).replace(/<\/script>/g, "<\\/script>");
-    return l(k || (k = N([`
+    }, e = JSON.stringify(s).replace(/<\/script>/g, "<\\/script>");
+    return l(z || (z = M([`
       <section class="faqs-section">
         <h2 class="__title">`, `</h2>
         <article>
@@ -530,26 +530,26 @@ let b = class extends m {
                 answer="${r.answer}"
               ></sema-accordion>
             `
-    ), z(e));
+    ), T(e));
   }
 };
-b.styles = [E];
-w([
-  a({ type: String })
-], b.prototype, "title", 2);
-w([
-  a({ type: String })
-], b.prototype, "color", 2);
-w([
-  a({ type: Array })
-], b.prototype, "faqs", 2);
-b = w([
-  _("sema-faqs")
-], b);
-const Y = g`
+_.styles = [R];
+S([
+  n({ type: String })
+], _.prototype, "title", 2);
+S([
+  n({ type: String })
+], _.prototype, "color", 2);
+S([
+  n({ type: Array })
+], _.prototype, "faqs", 2);
+_ = S([
+  u("sema-faqs")
+], _);
+const Y = m`
   :host {
     display: block;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "Inter", system-ui, -apple-system, sans-serif;
   }
 
   ol {
@@ -583,19 +583,19 @@ const Y = g`
     }
   }
 `;
-var F = Object.defineProperty, I = Object.getOwnPropertyDescriptor, O = (i, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? I(e, r) : e, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (t = (o ? n(e, r, t) : n(t)) || t);
+var F = Object.defineProperty, U = Object.getOwnPropertyDescriptor, k = (s, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? U(e, r) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (o ? i(e, r, t) : i(t)) || t);
   return o && t && F(e, r, t), t;
 };
-let y = class extends m {
+let x = class extends b {
   constructor() {
     super(...arguments), this.items = [], this.color = "";
   }
   render() {
-    const i = this.color ? `--color-primary: ${this.color};` : "--color-primary: #dc2626;";
+    const s = this.color ? `--color-primary: ${this.color};` : "--color-primary: #dc2626;";
     return l`
-      <nav aria-label="breadcrumb" style="${i}">
+      <nav aria-label="breadcrumb" style="${s}">
         <ol>
           ${this.items.map((e, r) => l`
             <li class="${r === this.items.length - 1 ? "__active" : "__link"}">
@@ -608,20 +608,20 @@ let y = class extends m {
     `;
   }
 };
-y.styles = [Y];
-O([
-  a({ type: Array })
-], y.prototype, "items", 2);
-O([
-  a({ type: String })
-], y.prototype, "color", 2);
-y = O([
-  _("sema-breadcrumbs")
-], y);
-const M = g`
+x.styles = [Y];
+k([
+  n({ type: Array })
+], x.prototype, "items", 2);
+k([
+  n({ type: String })
+], x.prototype, "color", 2);
+x = k([
+  u("sema-breadcrumbs")
+], x);
+const V = m`
   :host {
     display: block;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "Inter", system-ui, -apple-system, sans-serif;
   }
   .__btn {
     display: flex;
@@ -719,19 +719,19 @@ const M = g`
 
 	}
 `;
-var U = Object.defineProperty, G = Object.getOwnPropertyDescriptor, u = (i, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? G(e, r) : e, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (t = (o ? n(e, r, t) : n(t)) || t);
-  return o && t && U(e, r, t), t;
+var G = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, v = (s, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? Q(e, r) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (o ? i(e, r, t) : i(t)) || t);
+  return o && t && G(e, r, t), t;
 };
-let d = class extends m {
+let h = class extends b {
   constructor() {
     super(...arguments), this.label = "", this.color = "", this.bgColor = "", this.open = !1, this.items = [];
   }
   render() {
-    const i = this.open === !0;
+    const s = this.open === !0;
     let e = this.color ? this.color : "#dc2626", r = this.bgColor ? this.bgColor : "#dc2626";
-    const o = i ? `
+    const o = s ? `
       --isOpenBgColor: ${r};
       --isOpenPadding: 1rem;
       --isOpenHeight: auto;
@@ -740,7 +740,7 @@ let d = class extends m {
       --isOpenPadding: 0; 
       --isOpenHeight: 0; 
       --isOpenOpacity: 0;
-      --isOpenRotate: rotate(0);`, t = `--svgcolor: ${e};`, s = o + t;
+      --isOpenRotate: rotate(0);`, t = `--svgcolor: ${e};`, a = o + t;
     return l`
         <button class="__btn" @click="${this._changeIsOpen}" style="${t}">
           <span class="__label">${this.label}</span>
@@ -750,15 +750,15 @@ let d = class extends m {
           </div>
         </button>
 
-        <div class="__content" style="${s}">
-          ${this.items.map((n) => "category" in n ? l`
+        <div class="__content" style="${a}">
+          ${this.items.map((i) => "category" in i ? l`
                 <div class="__category">
-                  <span class="__category-title">${n.category}</span>
-                  ${n.items.map((x) => l`
-                    <a href="${x.path || "#"}" title="${x.label}" aria-label="${x.label}" class="__link">${x.label}</a>
+                  <span class="__category-title">${i.category}</span>
+                  ${i.items.map((w) => l`
+                    <a href="${w.path || "#"}" title="${w.label}" aria-label="${w.label}" class="__link">${w.label}</a>
                   `)}
                 </div>
-              ` : l`<a href="${n.path || "#"}" title="${n.label}" aria-label="${n.label}" class="__link">${n.label}</a>`)}
+              ` : l`<a href="${i.path || "#"}" title="${i.label}" aria-label="${i.label}" class="__link">${i.label}</a>`)}
         </div>
       </div>
     `;
@@ -767,32 +767,264 @@ let d = class extends m {
     this.open = !this.open;
   }
 };
-d.styles = [M];
-u([
-  a({ type: String })
-], d.prototype, "label", 2);
-u([
-  a({ type: String })
-], d.prototype, "color", 2);
-u([
-  a({ type: String })
-], d.prototype, "bgColor", 2);
-u([
-  a({ type: Boolean })
-], d.prototype, "open", 2);
-u([
-  a({ type: Array })
-], d.prototype, "items", 2);
-d = u([
-  _("sema-dropdown")
+h.styles = [V];
+v([
+  n({ type: String })
+], h.prototype, "label", 2);
+v([
+  n({ type: String })
+], h.prototype, "color", 2);
+v([
+  n({ type: String })
+], h.prototype, "bgColor", 2);
+v([
+  n({ type: Boolean })
+], h.prototype, "open", 2);
+v([
+  n({ type: Array })
+], h.prototype, "items", 2);
+h = v([
+  u("sema-dropdown")
+], h);
+const J = m`
+	.product-card {
+		background-color: white;
+		width: 300px;
+		border-radius: 12px;
+		overflow: hidden; /* Para que la imagen respete los bordes redondeados */
+		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+		transition:
+			transform 0.3s ease,
+			box-shadow 0.3s ease;
+		cursor: pointer;
+	}
+
+	/* Efecto al pasar el mouse por encima */
+	.product-card:hover {
+		transform: translateY(-5px);
+		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+	}
+
+	/* 1. Imagen */
+	.card-image-container {
+		width: 100%;
+		height: 200px;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.card-image-container img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover; /* Mantiene la proporción de la imagen sin estirarla */
+		transition: transform 0.5s ease;
+	}
+
+	.product-card:hover .card-image-container img {
+		transform: scale(1.05); /* Zoom suave en la imagen */
+	}
+
+	/* Contenedor de la información */
+	.card-details {
+		padding: 20px;
+	}
+
+	/* 2. Categoría e ID (Cabecera pequeña) */
+	.card-meta {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 10px;
+		font-size: 0.75rem;
+	}
+
+	.category {
+		background-color: #e0e7ff;
+		color: #4338ca;
+		padding: 4px 8px;
+		border-radius: 4px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	.product-id {
+		color: #888;
+	}
+
+	/* 3. Título del Producto */
+	.product-title {
+		margin: 0 0 10px 0;
+		font-size: 1.2rem;
+		color: #333;
+		line-height: 1.4;
+		font-weight: 600;
+		display: -webkit-box;
+		-webkit-line-clamp: 1;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	/* 4. Valoración (Estrellas y Promedio) */
+	.rating-container {
+		display: flex;
+		align-items: center;
+		margin-bottom: 15px;
+		font-size: 0.9rem;
+	}
+
+	.stars {
+		color: #fbbf24; /* Color dorado */
+		margin-right: 5px;
+		letter-spacing: 1px;
+	}
+
+	.average-rating {
+		font-weight: bold;
+		color: #333;
+		margin-right: 5px;
+	}
+
+	.review-count {
+		color: #6b7280;
+		font-size: 0.8rem;
+	}
+
+	/* Línea separadora */
+	hr {
+		border: 0;
+		border-top: 1px solid #eee;
+		margin: 10px 0;
+	}
+
+	/* 5. Precio */
+	.price-container {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 15px;
+	}
+
+	.price {
+		font-size: 1.5rem;
+		font-weight: 800;
+		color: #1f2937;
+	}
+
+	.currency {
+		font-size: 0.9rem;
+		vertical-align: top;
+	}
+	
+	@media (prefers-color-scheme: dark) {
+		.product-card {
+			background-color: #1f2937;
+			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+		}
+
+		.product-title {
+			color: #f9fafb;
+		}
+
+		.average-rating {
+			color: #f3f4f6;
+		}
+
+		.review-count {
+			color: #9ca3af;
+		}
+
+		.price {
+			color: #f9fafb;
+		}
+
+		.category {
+			background-color: #3730a3;
+			color: #e0e7ff;
+		}
+
+		hr {
+			border-top: 1px solid #374151;
+		}
+	}
+`;
+var Z = Object.defineProperty, K = Object.getOwnPropertyDescriptor, f = (s, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? K(e, r) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (o ? i(e, r, t) : i(t)) || t);
+  return o && t && Z(e, r, t), t;
+};
+let d = class extends b {
+  constructor() {
+    super(...arguments), this.image = "", this.category = "", this.id = "", this.title = "", this.rate = 0, this.count = 0, this.price = 0;
+  }
+  render() {
+    const s = Math.min(5, Math.max(0, Math.round(this.rate))), e = 5 - s;
+    return l`
+			<article class="product-card" id="${this.id}">
+				<div class="card-image-container">
+					<img
+						src="${this.image}"
+						alt="Auriculares Premium"
+					/>
+				</div>
+
+				<div class="card-details">
+					<div class="card-meta">
+						<span class="category">${this.category}</span>
+						<span class="product-id">${this.id ? `ID: ${this.id}` : ""}</span>
+					</div>
+
+					<h3 class="product-title">${this.title}</h3>
+
+					<div class="rating-container">
+						<span class="stars">${"★".repeat(s)}${"☆".repeat(e)}</span>
+						<span class="average-rating">${this.rate}</span>
+						<span class="review-count">(${this.count} valoraciones)</span>
+					</div>
+
+					<hr />
+
+					<div class="price-container">
+						<span class="price"><span class="currency">$</span>${this.price}</span>
+					</div>
+				</div>
+			</article>
+		`;
+  }
+};
+d.styles = [J];
+f([
+  n({ type: String })
+], d.prototype, "image", 2);
+f([
+  n({ type: String })
+], d.prototype, "category", 2);
+f([
+  n({ type: String })
+], d.prototype, "id", 2);
+f([
+  n({ type: String })
+], d.prototype, "title", 2);
+f([
+  n({ type: Number })
+], d.prototype, "rate", 2);
+f([
+  n({ type: Number })
+], d.prototype, "count", 2);
+f([
+  n({ type: Number })
+], d.prototype, "price", 2);
+d = f([
+  u("sema-card-product")
 ], d);
-const K = "0.0.1";
+const et = "0.0.1";
 export {
-  h as SemaAccordion,
-  f as SemaAlerts,
-  y as SemaBreadcrumbs,
+  g as SemaAccordion,
+  y as SemaAlerts,
+  x as SemaBreadcrumbs,
   c as SemaButton,
-  d as SemaDropdown,
-  b as SemaFaqs,
-  K as version
+  d as SemaCardProduct,
+  h as SemaDropdown,
+  _ as SemaFaqs,
+  et as version
 };

package/dist/sema-ui.umd.js

@@ -1,4 +1,4 @@
-(function(t,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("lit"),require("lit/decorators.js"),require("lit/directives/unsafe-html.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js","lit/directives/unsafe-html.js"],s):(t=typeof globalThis<"u"?globalThis:t||self,s(t.SemaUI={},t.lit,t.decorators_js,t.unsafeHtml_js))})(this,(function(t,s,l,S){"use strict";const $=s.css`
+(function(t,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("lit"),require("lit/decorators.js"),require("lit/directives/unsafe-html.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js","lit/directives/unsafe-html.js"],l):(t=typeof globalThis<"u"?globalThis:t||self,l(t.SemaUI={},t.lit,t.decorators_js,t.unsafeHtml_js))})(this,(function(t,l,n,w){"use strict";const $=l.css`
 	/* ---------------- GENERAL STYLES  ------------------- */
 
 	a {
@@ -92,9 +92,9 @@
 	.btn-ghost-custom:hover {
 		color: var(--btn-secondary-color);
 	}
-`;var w=Object.defineProperty,O=Object.getOwnPropertyDescriptor,p=(c,o,n,r)=>{for(var e=r>1?void 0:r?O(o,n):o,a=c.length-1,i;a>=0;a--)(i=c[a])&&(e=(r?i(o,n,e):i(e))||e);return r&&e&&w(o,n,e),e};t.SemaButton=class extends s.LitElement{constructor(){super(...arguments),this.mode="",this.kind="button",this.custom="off",this.size="md",this.fontSize="md",this.url="",this.target="_self",this.altText=""}render(){const o=this.custom==="on",n=o?`--btn-primary-color: ${this.firstColor}; --btn-secondary-color: ${this.secondaryColor};`:"";let r="120px";this.size==="sm"?r="80px":this.size==="md"?r="120px":this.size==="lg"?r="160px":this.size==="full"&&(r="100%");const e=`--btn-width: ${r};`;let a="1rem";this.fontSize==="sm"?a="0.8rem":this.fontSize==="md"?a="1rem":this.fontSize==="lg"?a="1.5rem":this.fontSize==="xl"&&(a="2rem");const i=`--btn-font-size: ${a}`;return this.mode==="outline"?this.kind==="link"?s.html`
+`;var x=Object.defineProperty,O=Object.getOwnPropertyDescriptor,p=(c,o,a,r)=>{for(var e=r>1?void 0:r?O(o,a):o,s=c.length-1,i;s>=0;s--)(i=c[s])&&(e=(r?i(o,a,e):i(e))||e);return r&&e&&x(o,a,e),e};t.SemaButton=class extends l.LitElement{constructor(){super(...arguments),this.mode="",this.kind="button",this.custom="off",this.size="md",this.fontSize="md",this.url="",this.target="_self",this.altText=""}render(){const o=this.custom==="on",a=o?`--btn-primary-color: ${this.firstColor}; --btn-secondary-color: ${this.secondaryColor};`:"";let r="120px";this.size==="sm"?r="80px":this.size==="md"?r="120px":this.size==="lg"?r="160px":this.size==="full"&&(r="100%");const e=`--btn-width: ${r};`;let s="1rem";this.fontSize==="sm"?s="0.8rem":this.fontSize==="md"?s="1rem":this.fontSize==="lg"?s="1.5rem":this.fontSize==="xl"&&(s="2rem");const i=`--btn-font-size: ${s}`;return this.mode==="outline"?this.kind==="link"?l.html`
 						<a
-							style="${n}${e}${i}"
+							style="${a}${e}${i}"
 							href="${this.url}"
 							alt="${this.altText}"
 							title="${this.altText}"
@@ -103,17 +103,17 @@
 							>
 							<slot></slot>
 						</a>
-					`:s.html`
+					`:l.html`
 						<button
-							style="${n}${e}${i}"
+							style="${a}${e}${i}"
 							class="btn ${o?"btn-outline-custom":"btn-outline"}"
 							title="${this.altText}"
 						>
 							<slot></slot>
 						</button>
-					`:this.mode==="ghost"?this.kind==="link"?s.html`
+					`:this.mode==="ghost"?this.kind==="link"?l.html`
 							<a
-								style="${n}${e}${i}"
+								style="${a}${e}${i}"
 								href="${this.url}"
 								alt="${this.altText}"
 								title="${this.altText}"
@@ -122,17 +122,17 @@
 								>
 								<slot></slot>
 							</a>
-						`:s.html`
+						`:l.html`
 							<button
-								style="${n}${e}${i}"
+								style="${a}${e}${i}"
 								class="btn ${this.custom==="on"?"btn-ghost-custom":"btn-ghost"}"
 								title="${this.altText}"
 							>
 								<slot></slot>
 							</button>
-						`:this.kind==="link"?s.html`
+						`:this.kind==="link"?l.html`
 							<a
-								style="${n}${e}${i}"
+								style="${a}${e}${i}"
 								href="${this.url}"
 								alt="${this.altText}"
 								title="${this.altText}"
@@ -141,17 +141,17 @@
 								>
 								<slot></slot>
 							</a>
-						`:s.html`
+						`:l.html`
 							<button
-								style="${n}${e}${i}"
+								style="${a}${e}${i}"
 								class="btn ${this.custom==="on"?"btn-custom":"btn-primary"}"
 								title="${this.altText}"
 							>
 								<slot></slot>
 							</button>
-						`}},t.SemaButton.styles=[$],p([l.property({type:String})],t.SemaButton.prototype,"mode",2),p([l.property({type:String})],t.SemaButton.prototype,"kind",2),p([l.property({type:String})],t.SemaButton.prototype,"custom",2),p([l.property({type:String})],t.SemaButton.prototype,"firstColor",2),p([l.property({type:String})],t.SemaButton.prototype,"secondaryColor",2),p([l.property({type:String})],t.SemaButton.prototype,"size",2),p([l.property({type:String})],t.SemaButton.prototype,"fontSize",2),p([l.property({type:String})],t.SemaButton.prototype,"url",2),p([l.property({type:String})],t.SemaButton.prototype,"target",2),p([l.property({type:String})],t.SemaButton.prototype,"altText",2),t.SemaButton=p([l.customElement("sema-button")],t.SemaButton);const x=s.css`
+						`}},t.SemaButton.styles=[$],p([n.property({type:String})],t.SemaButton.prototype,"mode",2),p([n.property({type:String})],t.SemaButton.prototype,"kind",2),p([n.property({type:String})],t.SemaButton.prototype,"custom",2),p([n.property({type:String})],t.SemaButton.prototype,"firstColor",2),p([n.property({type:String})],t.SemaButton.prototype,"secondaryColor",2),p([n.property({type:String})],t.SemaButton.prototype,"size",2),p([n.property({type:String})],t.SemaButton.prototype,"fontSize",2),p([n.property({type:String})],t.SemaButton.prototype,"url",2),p([n.property({type:String})],t.SemaButton.prototype,"target",2),p([n.property({type:String})],t.SemaButton.prototype,"altText",2),t.SemaButton=p([n.customElement("sema-button")],t.SemaButton);const P=l.css`
 	:host {
-		font-family: Arial, Helvetica, sans-serif;
+		font-family: "Inter", system-ui, -apple-system, sans-serif;
 	}
 
 	.__section {
@@ -237,15 +237,15 @@
 			}
 		}
 	}
-`;var k=Object.defineProperty,B=Object.getOwnPropertyDescriptor,f=(c,o,n,r)=>{for(var e=r>1?void 0:r?B(o,n):o,a=c.length-1,i;a>=0;a--)(i=c[a])&&(e=(r?i(o,n,e):i(e))||e);return r&&e&&k(o,n,e),e};t.SemaAlerts=class extends s.LitElement{constructor(){super(...arguments),this.type="info",this.title="",this.message=""}render(){return s.html`
+`;var C=Object.defineProperty,k=Object.getOwnPropertyDescriptor,u=(c,o,a,r)=>{for(var e=r>1?void 0:r?k(o,a):o,s=c.length-1,i;s>=0;s--)(i=c[s])&&(e=(r?i(o,a,e):i(e))||e);return r&&e&&C(o,a,e),e};t.SemaAlerts=class extends l.LitElement{constructor(){super(...arguments),this.type="info",this.title="",this.message=""}render(){return l.html`
 			<section class="__section __${this.type}">
 				<h3 class="__title">${this.title}</h3>
 				<p class="__paragraph">${this.message}</p>
 			</section>
-		`}},t.SemaAlerts.styles=[x],f([l.property({type:String})],t.SemaAlerts.prototype,"type",2),f([l.property({type:String})],t.SemaAlerts.prototype,"title",2),f([l.property({type:String})],t.SemaAlerts.prototype,"message",2),t.SemaAlerts=f([l.customElement("sema-alerts")],t.SemaAlerts);const P=s.css`
+		`}},t.SemaAlerts.styles=[P],u([n.property({type:String})],t.SemaAlerts.prototype,"type",2),u([n.property({type:String})],t.SemaAlerts.prototype,"title",2),u([n.property({type:String})],t.SemaAlerts.prototype,"message",2),t.SemaAlerts=u([n.customElement("sema-alerts")],t.SemaAlerts);const B=l.css`
   :host {
     display: block;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "Inter", system-ui, -apple-system, sans-serif;
   }
 
   .accordion {
@@ -315,7 +315,7 @@
     }
 
 	}
-`;var A=Object.defineProperty,z=Object.getOwnPropertyDescriptor,d=(c,o,n,r)=>{for(var e=r>1?void 0:r?z(o,n):o,a=c.length-1,i;a>=0;a--)(i=c[a])&&(e=(r?i(o,n,e):i(e))||e);return r&&e&&A(o,n,e),e};t.SemaAccordion=class extends s.LitElement{constructor(){super(...arguments),this.question="",this.answer="",this.color="",this.open=!1}render(){const o=this.open===!0;let n=this.color?this.color:"#dc2626";const e=o?`
+`;var z=Object.defineProperty,A=Object.getOwnPropertyDescriptor,f=(c,o,a,r)=>{for(var e=r>1?void 0:r?A(o,a):o,s=c.length-1,i;s>=0;s--)(i=c[s])&&(e=(r?i(o,a,e):i(e))||e);return r&&e&&z(o,a,e),e};t.SemaAccordion=class extends l.LitElement{constructor(){super(...arguments),this.question="",this.answer="",this.color="",this.open=!1}render(){const o=this.open===!0;let a=this.color?this.color:"#dc2626";const e=o?`
     --color-btn: ${o?"rgba(229, 231, 235, 0.2)":""};
     --isOpenPadding: 1rem;
     --isOpenHeight: 200px;
@@ -325,8 +325,8 @@
     --isOpenPadding: 0; 
     --isOpenHeight: 0; 
     --isOpenOpacity: 0;
-    --isOpenRotate: rotate(0);`,a=`
-    --svgcolor: ${n};`,i=e+a;return s.html`
+    --isOpenRotate: rotate(0);`,s=`
+    --svgcolor: ${a};`,i=e+s;return l.html`
     <article class="accordion" style="${i}" >
       <div class="__btn" @click="${this._changeIsOpen}">
         <h3 class="__title">${this.question}</h3>
@@ -339,7 +339,7 @@
         <p class="__text">${this.answer}</p>
       </div>
     </article>
-    `}_changeIsOpen(){this.open===!1?this.open=!0:this.open=!1}},t.SemaAccordion.styles=[P],d([l.property({type:String})],t.SemaAccordion.prototype,"question",2),d([l.property({type:String})],t.SemaAccordion.prototype,"answer",2),d([l.property({type:String})],t.SemaAccordion.prototype,"color",2),d([l.property({type:Boolean})],t.SemaAccordion.prototype,"open",2),t.SemaAccordion=d([l.customElement("sema-accordion")],t.SemaAccordion);const C=s.css`
+    `}_changeIsOpen(){this.open===!1?this.open=!0:this.open=!1}},t.SemaAccordion.styles=[B],f([n.property({type:String})],t.SemaAccordion.prototype,"question",2),f([n.property({type:String})],t.SemaAccordion.prototype,"answer",2),f([n.property({type:String})],t.SemaAccordion.prototype,"color",2),f([n.property({type:Boolean})],t.SemaAccordion.prototype,"open",2),t.SemaAccordion=f([n.customElement("sema-accordion")],t.SemaAccordion);const D=l.css`
 
   .__title {
     color: #000;
@@ -349,7 +349,7 @@
   @media (prefers-color-scheme: dark) {
     :root {
       display: block;
-      font-family: Arial, Helvetica, sans-serif;
+      font-family: "Inter", system-ui, -apple-system, sans-serif;
     }
 
     section {
@@ -368,7 +368,7 @@
       color: #fff;
     }
   }
-`;var y=Object.freeze,_=Object.defineProperty,T=Object.getOwnPropertyDescriptor,b=(c,o,n,r)=>{for(var e=r>1?void 0:r?T(o,n):o,a=c.length-1,i;a>=0;a--)(i=c[a])&&(e=(r?i(o,n,e):i(e))||e);return r&&e&&_(o,n,e),e},D=(c,o)=>y(_(c,"raw",{value:y(c.slice())})),v;t.SemaFaqs=class extends s.LitElement{constructor(){super(...arguments),this.title="",this.color="",this.faqs=[]}render(){const o={"@context":"https://schema.org","@type":"FAQPage",mainEntity:this.faqs.map(r=>({"@type":"Question",name:r.question,acceptedAnswer:{"@type":"Answer",text:r.answer}}))},n=JSON.stringify(o).replace(/<\/script>/g,"<\\/script>");return s.html(v||(v=D([`
+`;var v=Object.freeze,_=Object.defineProperty,T=Object.getOwnPropertyDescriptor,g=(c,o,a,r)=>{for(var e=r>1?void 0:r?T(o,a):o,s=c.length-1,i;s>=0;s--)(i=c[s])&&(e=(r?i(o,a,e):i(e))||e);return r&&e&&_(o,a,e),e},q=(c,o)=>v(_(c,"raw",{value:v(c.slice())})),S;t.SemaFaqs=class extends l.LitElement{constructor(){super(...arguments),this.title="",this.color="",this.faqs=[]}render(){const o={"@context":"https://schema.org","@type":"FAQPage",mainEntity:this.faqs.map(r=>({"@type":"Question",name:r.question,acceptedAnswer:{"@type":"Answer",text:r.answer}}))},a=JSON.stringify(o).replace(/<\/script>/g,"<\\/script>");return l.html(S||(S=q([`
       <section class="faqs-section">
         <h2 class="__title">`,`</h2>
         <article>
@@ -378,16 +378,16 @@
       <script type="application/ld+json">
         `,`
       <\/script>
-    `])),this.title,this.faqs.map(r=>s.html`
+    `])),this.title,this.faqs.map(r=>l.html`
               <sema-accordion
                 color="${this.color}"
                 question="${r.question}"
                 answer="${r.answer}"
               ></sema-accordion>
-            `),S.unsafeHTML(n))}},t.SemaFaqs.styles=[C],b([l.property({type:String})],t.SemaFaqs.prototype,"title",2),b([l.property({type:String})],t.SemaFaqs.prototype,"color",2),b([l.property({type:Array})],t.SemaFaqs.prototype,"faqs",2),t.SemaFaqs=b([l.customElement("sema-faqs")],t.SemaFaqs);const q=s.css`
+            `),w.unsafeHTML(a))}},t.SemaFaqs.styles=[D],g([n.property({type:String})],t.SemaFaqs.prototype,"title",2),g([n.property({type:String})],t.SemaFaqs.prototype,"color",2),g([n.property({type:Array})],t.SemaFaqs.prototype,"faqs",2),t.SemaFaqs=g([n.customElement("sema-faqs")],t.SemaFaqs);const E=l.css`
   :host {
     display: block;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "Inter", system-ui, -apple-system, sans-serif;
   }
 
   ol {
@@ -420,21 +420,21 @@
       color: #fff;
     }
   }
-`;var E=Object.defineProperty,L=Object.getOwnPropertyDescriptor,g=(c,o,n,r)=>{for(var e=r>1?void 0:r?L(o,n):o,a=c.length-1,i;a>=0;a--)(i=c[a])&&(e=(r?i(o,n,e):i(e))||e);return r&&e&&E(o,n,e),e};t.SemaBreadcrumbs=class extends s.LitElement{constructor(){super(...arguments),this.items=[],this.color=""}render(){const o=this.color?`--color-primary: ${this.color};`:"--color-primary: #dc2626;";return s.html`
+`;var L=Object.defineProperty,I=Object.getOwnPropertyDescriptor,y=(c,o,a,r)=>{for(var e=r>1?void 0:r?I(o,a):o,s=c.length-1,i;s>=0;s--)(i=c[s])&&(e=(r?i(o,a,e):i(e))||e);return r&&e&&L(o,a,e),e};t.SemaBreadcrumbs=class extends l.LitElement{constructor(){super(...arguments),this.items=[],this.color=""}render(){const o=this.color?`--color-primary: ${this.color};`:"--color-primary: #dc2626;";return l.html`
       <nav aria-label="breadcrumb" style="${o}">
         <ol>
-          ${this.items.map((n,r)=>s.html`
+          ${this.items.map((a,r)=>l.html`
             <li class="${r===this.items.length-1?"__active":"__link"}">
-              ${n.path&&r!==this.items.length-1?s.html`<a href="${n.path}">${n.label}</a>`:n.label}
+              ${a.path&&r!==this.items.length-1?l.html`<a href="${a.path}">${a.label}</a>`:a.label}
             </li>
-            ${r<this.items.length-1?s.html`<li class="__slash">/</li>`:""}
+            ${r<this.items.length-1?l.html`<li class="__slash">/</li>`:""}
           `)}
         </ol>
       </nav>
-    `}},t.SemaBreadcrumbs.styles=[q],g([l.property({type:Array})],t.SemaBreadcrumbs.prototype,"items",2),g([l.property({type:String})],t.SemaBreadcrumbs.prototype,"color",2),t.SemaBreadcrumbs=g([l.customElement("sema-breadcrumbs")],t.SemaBreadcrumbs);const H=s.css`
+    `}},t.SemaBreadcrumbs.styles=[E],y([n.property({type:Array})],t.SemaBreadcrumbs.prototype,"items",2),y([n.property({type:String})],t.SemaBreadcrumbs.prototype,"color",2),t.SemaBreadcrumbs=y([n.customElement("sema-breadcrumbs")],t.SemaBreadcrumbs);const F=l.css`
   :host {
     display: block;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "Inter", system-ui, -apple-system, sans-serif;
   }
   .__btn {
     display: flex;
@@ -531,7 +531,7 @@
     }
 
 	}
-`;var F=Object.defineProperty,R=Object.getOwnPropertyDescriptor,h=(c,o,n,r)=>{for(var e=r>1?void 0:r?R(o,n):o,a=c.length-1,i;a>=0;a--)(i=c[a])&&(e=(r?i(o,n,e):i(e))||e);return r&&e&&F(o,n,e),e};t.SemaDropdown=class extends s.LitElement{constructor(){super(...arguments),this.label="",this.color="",this.bgColor="",this.open=!1,this.items=[]}render(){const o=this.open===!0;let n=this.color?this.color:"#dc2626",r=this.bgColor?this.bgColor:"#dc2626";const e=o?`
+`;var H=Object.defineProperty,M=Object.getOwnPropertyDescriptor,h=(c,o,a,r)=>{for(var e=r>1?void 0:r?M(o,a):o,s=c.length-1,i;s>=0;s--)(i=c[s])&&(e=(r?i(o,a,e):i(e))||e);return r&&e&&H(o,a,e),e};t.SemaDropdown=class extends l.LitElement{constructor(){super(...arguments),this.label="",this.color="",this.bgColor="",this.open=!1,this.items=[]}render(){const o=this.open===!0;let a=this.color?this.color:"#dc2626",r=this.bgColor?this.bgColor:"#dc2626";const e=o?`
       --isOpenBgColor: ${r};
       --isOpenPadding: 1rem;
       --isOpenHeight: auto;
@@ -540,8 +540,8 @@
       --isOpenPadding: 0; 
       --isOpenHeight: 0; 
       --isOpenOpacity: 0;
-      --isOpenRotate: rotate(0);`,a=`--svgcolor: ${n};`,i=e+a;return s.html`
-        <button class="__btn" @click="${this._changeIsOpen}" style="${a}">
+      --isOpenRotate: rotate(0);`,s=`--svgcolor: ${a};`,i=e+s;return l.html`
+        <button class="__btn" @click="${this._changeIsOpen}" style="${s}">
           <span class="__label">${this.label}</span>
 
           <div class="__icon">
@@ -550,14 +550,205 @@
         </button>
 
         <div class="__content" style="${i}">
-          ${this.items.map(m=>"category"in m?s.html`
+          ${this.items.map(d=>"category"in d?l.html`
                 <div class="__category">
-                  <span class="__category-title">${m.category}</span>
-                  ${m.items.map(u=>s.html`
-                    <a href="${u.path||"#"}" title="${u.label}" aria-label="${u.label}" class="__link">${u.label}</a>
+                  <span class="__category-title">${d.category}</span>
+                  ${d.items.map(b=>l.html`
+                    <a href="${b.path||"#"}" title="${b.label}" aria-label="${b.label}" class="__link">${b.label}</a>
                   `)}
                 </div>
-              `:s.html`<a href="${m.path||"#"}" title="${m.label}" aria-label="${m.label}" class="__link">${m.label}</a>`)}
+              `:l.html`<a href="${d.path||"#"}" title="${d.label}" aria-label="${d.label}" class="__link">${d.label}</a>`)}
         </div>
       </div>
-    `}_changeIsOpen(){this.open=!this.open}},t.SemaDropdown.styles=[H],h([l.property({type:String})],t.SemaDropdown.prototype,"label",2),h([l.property({type:String})],t.SemaDropdown.prototype,"color",2),h([l.property({type:String})],t.SemaDropdown.prototype,"bgColor",2),h([l.property({type:Boolean})],t.SemaDropdown.prototype,"open",2),h([l.property({type:Array})],t.SemaDropdown.prototype,"items",2),t.SemaDropdown=h([l.customElement("sema-dropdown")],t.SemaDropdown);const N="0.0.1";t.version=N,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
+    `}_changeIsOpen(){this.open=!this.open}},t.SemaDropdown.styles=[F],h([n.property({type:String})],t.SemaDropdown.prototype,"label",2),h([n.property({type:String})],t.SemaDropdown.prototype,"color",2),h([n.property({type:String})],t.SemaDropdown.prototype,"bgColor",2),h([n.property({type:Boolean})],t.SemaDropdown.prototype,"open",2),h([n.property({type:Array})],t.SemaDropdown.prototype,"items",2),t.SemaDropdown=h([n.customElement("sema-dropdown")],t.SemaDropdown);const N=l.css`
+	.product-card {
+		background-color: white;
+		width: 300px;
+		border-radius: 12px;
+		overflow: hidden; /* Para que la imagen respete los bordes redondeados */
+		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+		transition:
+			transform 0.3s ease,
+			box-shadow 0.3s ease;
+		cursor: pointer;
+	}
+
+	/* Efecto al pasar el mouse por encima */
+	.product-card:hover {
+		transform: translateY(-5px);
+		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+	}
+
+	/* 1. Imagen */
+	.card-image-container {
+		width: 100%;
+		height: 200px;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.card-image-container img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover; /* Mantiene la proporción de la imagen sin estirarla */
+		transition: transform 0.5s ease;
+	}
+
+	.product-card:hover .card-image-container img {
+		transform: scale(1.05); /* Zoom suave en la imagen */
+	}
+
+	/* Contenedor de la información */
+	.card-details {
+		padding: 20px;
+	}
+
+	/* 2. Categoría e ID (Cabecera pequeña) */
+	.card-meta {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 10px;
+		font-size: 0.75rem;
+	}
+
+	.category {
+		background-color: #e0e7ff;
+		color: #4338ca;
+		padding: 4px 8px;
+		border-radius: 4px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	.product-id {
+		color: #888;
+	}
+
+	/* 3. Título del Producto */
+	.product-title {
+		margin: 0 0 10px 0;
+		font-size: 1.2rem;
+		color: #333;
+		line-height: 1.4;
+		font-weight: 600;
+		display: -webkit-box;
+		-webkit-line-clamp: 1;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	/* 4. Valoración (Estrellas y Promedio) */
+	.rating-container {
+		display: flex;
+		align-items: center;
+		margin-bottom: 15px;
+		font-size: 0.9rem;
+	}
+
+	.stars {
+		color: #fbbf24; /* Color dorado */
+		margin-right: 5px;
+		letter-spacing: 1px;
+	}
+
+	.average-rating {
+		font-weight: bold;
+		color: #333;
+		margin-right: 5px;
+	}
+
+	.review-count {
+		color: #6b7280;
+		font-size: 0.8rem;
+	}
+
+	/* Línea separadora */
+	hr {
+		border: 0;
+		border-top: 1px solid #eee;
+		margin: 10px 0;
+	}
+
+	/* 5. Precio */
+	.price-container {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 15px;
+	}
+
+	.price {
+		font-size: 1.5rem;
+		font-weight: 800;
+		color: #1f2937;
+	}
+
+	.currency {
+		font-size: 0.9rem;
+		vertical-align: top;
+	}
+	
+	@media (prefers-color-scheme: dark) {
+		.product-card {
+			background-color: #1f2937;
+			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+		}
+
+		.product-title {
+			color: #f9fafb;
+		}
+
+		.average-rating {
+			color: #f3f4f6;
+		}
+
+		.review-count {
+			color: #9ca3af;
+		}
+
+		.price {
+			color: #f9fafb;
+		}
+
+		.category {
+			background-color: #3730a3;
+			color: #e0e7ff;
+		}
+
+		hr {
+			border-top: 1px solid #374151;
+		}
+	}
+`;var R=Object.defineProperty,Y=Object.getOwnPropertyDescriptor,m=(c,o,a,r)=>{for(var e=r>1?void 0:r?Y(o,a):o,s=c.length-1,i;s>=0;s--)(i=c[s])&&(e=(r?i(o,a,e):i(e))||e);return r&&e&&R(o,a,e),e};t.SemaCardProduct=class extends l.LitElement{constructor(){super(...arguments),this.image="",this.category="",this.id="",this.title="",this.rate=0,this.count=0,this.price=0}render(){const o=Math.min(5,Math.max(0,Math.round(this.rate))),a=5-o;return l.html`
+			<article class="product-card" id="${this.id}">
+				<div class="card-image-container">
+					<img
+						src="${this.image}"
+						alt="Auriculares Premium"
+					/>
+				</div>
+
+				<div class="card-details">
+					<div class="card-meta">
+						<span class="category">${this.category}</span>
+						<span class="product-id">${this.id?`ID: ${this.id}`:""}</span>
+					</div>
+
+					<h3 class="product-title">${this.title}</h3>
+
+					<div class="rating-container">
+						<span class="stars">${"★".repeat(o)}${"☆".repeat(a)}</span>
+						<span class="average-rating">${this.rate}</span>
+						<span class="review-count">(${this.count} valoraciones)</span>
+					</div>
+
+					<hr />
+
+					<div class="price-container">
+						<span class="price"><span class="currency">$</span>${this.price}</span>
+					</div>
+				</div>
+			</article>
+		`}},t.SemaCardProduct.styles=[N],m([n.property({type:String})],t.SemaCardProduct.prototype,"image",2),m([n.property({type:String})],t.SemaCardProduct.prototype,"category",2),m([n.property({type:String})],t.SemaCardProduct.prototype,"id",2),m([n.property({type:String})],t.SemaCardProduct.prototype,"title",2),m([n.property({type:Number})],t.SemaCardProduct.prototype,"rate",2),m([n.property({type:Number})],t.SemaCardProduct.prototype,"count",2),m([n.property({type:Number})],t.SemaCardProduct.prototype,"price",2),t.SemaCardProduct=m([n.customElement("sema-card-product")],t.SemaCardProduct);const U="0.0.1";t.version=U,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jegdev/sema-ui",
   "private": false,
-  "version": "0.0.8",
+  "version": "0.0.9-beta.1",
   "description": "Una colección de componentes Lit minimalistas estilo Swiss Design",
   "keywords": [
     "Next",