reke-ui 0.1.1 → 0.2.0

package/dist/__type-checks__/no-lit-in-public-types.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=no-lit-in-public-types.d.ts.map

package/dist/__type-checks__/no-lit-in-public-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-lit-in-public-types.d.ts","sourceRoot":"","sources":["../../src/__type-checks__/no-lit-in-public-types.ts"],"names":[],"mappings":""}

package/dist/_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+function e(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+export { e as __decorate };

package/dist/components/reke-alert/reke-alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-alert.d.ts","sourceRoot":"","sources":["../../../src/components/reke-alert/reke-alert.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpE;;;;;;;;;;;;;;;GAeG;AACH,qBACa,SAAU,SAAQ,WAAW;IACxC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,YAAY,CAAU;IAG/B,WAAW,UAAS;IAEpB,OAAO,CAAC,WAAW;IAKV,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"reke-alert.d.ts","sourceRoot":"","sources":["../../../src/components/reke-alert/reke-alert.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpE;;;;;;;;;;;;;;;GAeG;AACH,qBACa,SAAU,SAAQ,WAAW;IACxC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,YAAY,CAAU;IAG/B,WAAW,UAAS;IAEpB,OAAO,CAAC,WAAW;IAKV,MAAM;CA2BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/reke-alert/reke-alert.js

@@ -0,0 +1,45 @@
+import { RekeElement as e } from "../../shared/base-element.js";
+import { styles as t } from "./reke-alert.styles.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/components/reke-alert/reke-alert.ts
+var c = class extends e {
+	constructor(...e) {
+		super(...e), this.variant = "info", this.dismissible = !1;
+	}
+	static {
+		this.styles = t;
+	}
+	handleClose() {
+		this.emit("reke-close"), this.remove();
+	}
+	render() {
+		return r`
+      <div part="alert" class=${s({
+			alert: !0,
+			[`alert--${this.variant}`]: !0
+		})} role="alert">
+        <span class="alert__content">
+          <slot></slot>
+        </span>
+        ${this.dismissible ? r`
+              <button
+                class="alert__close"
+                @click=${this.handleClose}
+                aria-label="Close"
+              >
+                &times;
+              </button>
+            ` : i}
+      </div>
+    `;
+	}
+};
+n([o({ reflect: !0 })], c.prototype, "variant", void 0), n([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "dismissible", void 0), c = n([a("reke-alert")], c);
+//#endregion
+export { c as RekeAlert };

package/dist/components/reke-alert/reke-alert.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-alert.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-alert/reke-alert.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAkFlB,CAAC"}
+{"version":3,"file":"reke-alert.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-alert/reke-alert.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAoGlB,CAAC"}

package/dist/components/reke-alert/reke-alert.styles.js

@@ -0,0 +1,103 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-alert/reke-alert.styles.ts
+var n = [e, t`
+    :host {
+      display: block;
+    }
+
+    .alert {
+      display: flex;
+      align-items: center;
+      gap: var(--reke-space-sm, 12px);
+      padding: 12px var(--reke-space-md, 16px);
+      border-radius: var(--reke-radius, 4px);
+      border: none;
+      border-left: 3px solid;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      line-height: 1.5;
+      box-sizing: border-box;
+    }
+
+    /* === Variants === */
+
+    .alert--success {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 10%, transparent);
+      border-color: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .alert--error {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 10%, transparent);
+      border-color: var(--reke-color-danger, #EF4444);
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    .alert--warning {
+      background-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 10%, transparent);
+      border-color: var(--reke-color-warning, #F59E0B);
+      color: var(--reke-color-warning, #F59E0B);
+    }
+
+    .alert--info {
+      background-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 10%, transparent);
+      border-color: var(--reke-color-secondary, #3B82F6);
+      color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    /* === Content === */
+
+    .alert__content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* === Dismissible === */
+
+    .alert__close {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      background: transparent;
+      border: none;
+      color: currentColor;
+      opacity: 0.5;
+      cursor: pointer;
+      padding: 0;
+      font-size: 16px;
+      line-height: 1;
+      transition: opacity 0.15s ease;
+    }
+
+    .alert__close:hover {
+      opacity: 1;
+    }
+
+    .alert__close:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    /* === Enter animation === */
+
+    :host {
+      animation: alert-in var(--reke-transition-normal, 0.2s ease) both;
+    }
+
+    @keyframes alert-in {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `];
+//#endregion
+export { n as styles };

package/dist/components/reke-badge/reke-badge.d.ts

@@ -1,6 +1,7 @@
 import { RekeElement } from '../../shared/base-element.js';
-export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'danger' | 'warning' | 'success';
-export type BadgeSize = 'sm' | 'md';
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'outline';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeShape = 'pill' | 'square';
 /**
  * @tag reke-badge
  * @summary A badge component for displaying labels, statuses, and counts.
@@ -19,6 +20,7 @@ export declare class RekeBadge extends RekeElement {
     static styles: import("lit").CSSResult[];
     variant: BadgeVariant;
     size: BadgeSize;
+    shape: BadgeShape;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/reke-badge/reke-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-badge.d.ts","sourceRoot":"","sources":["../../../src/components/reke-badge/reke-badge.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,WAAW;IACxC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,YAAY,CAAa;IAGlC,IAAI,EAAE,SAAS,CAAQ;IAEd,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"reke-badge.d.ts","sourceRoot":"","sources":["../../../src/components/reke-badge/reke-badge.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,WAAW;IACxC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,YAAY,CAAa;IAGlC,IAAI,EAAE,SAAS,CAAQ;IAGvB,KAAK,EAAE,UAAU,CAAU;IAElB,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/reke-badge/reke-badge.js

@@ -0,0 +1,30 @@
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { styles as n } from "./reke-badge.styles.js";
+import { html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import { classMap as o } from "lit/directives/class-map.js";
+//#region src/components/reke-badge/reke-badge.ts
+var s = class extends e {
+	constructor(...e) {
+		super(...e), this.variant = "default", this.size = "md", this.shape = "pill";
+	}
+	static {
+		this.styles = n;
+	}
+	render() {
+		return r`
+      <span part="badge" class=${o({
+			badge: !0,
+			[`badge--${this.variant}`]: !0,
+			[`badge--${this.size}`]: !0,
+			[`badge--${this.shape}`]: !0
+		})}>
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+t([a({ reflect: !0 })], s.prototype, "variant", void 0), t([a({ reflect: !0 })], s.prototype, "size", void 0), t([a({ reflect: !0 })], s.prototype, "shape", void 0), s = t([i("reke-badge")], s);
+//#endregion
+export { s as RekeBadge };

package/dist/components/reke-badge/reke-badge.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-badge/reke-badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAqElB,CAAC"}
+{"version":3,"file":"reke-badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-badge/reke-badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAyFlB,CAAC"}

package/dist/components/reke-badge/reke-badge.styles.js

@@ -0,0 +1,92 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-badge/reke-badge.styles.ts
+var n = [e, t`
+    :host {
+      display: inline-block;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-weight: var(--reke-font-weight-medium, 500);
+      border: 1px solid transparent;
+      line-height: 1;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+
+    /* === Shape === */
+
+    .badge--pill {
+      border-radius: 9999px;
+    }
+
+    .badge--square {
+      border-radius: var(--reke-radius, 4px);
+    }
+
+    /* === Sizes === */
+
+    .badge--sm {
+      padding: 2px 8px;
+      font-size: 11px;
+    }
+
+    .badge--md {
+      padding: 4px 10px;
+      font-size: 12px;
+    }
+
+    .badge--lg {
+      padding: 5px 14px;
+      font-size: 13px;
+    }
+
+    /* === Variants === */
+
+    .badge--default {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    .badge--primary {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 15%, transparent);
+      color: var(--reke-color-primary, #22C55E);
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 30%, transparent);
+    }
+
+    .badge--secondary {
+      background-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 15%, transparent);
+      color: var(--reke-color-secondary, #3B82F6);
+      border-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 30%, transparent);
+    }
+
+    .badge--danger {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 15%, transparent);
+      color: var(--reke-color-danger, #EF4444);
+      border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 30%, transparent);
+    }
+
+    .badge--warning {
+      background-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 15%, transparent);
+      color: var(--reke-color-warning, #F59E0B);
+      border-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 30%, transparent);
+    }
+
+    .badge--success {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 15%, transparent);
+      color: var(--reke-color-primary, #22C55E);
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 30%, transparent);
+    }
+
+    .badge--outline {
+      background-color: transparent;
+      color: var(--reke-color-text-ghost, #737373);
+      border-color: var(--reke-color-border, #252525);
+    }
+  `];
+//#endregion
+export { n as styles };

package/dist/components/reke-button/reke-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-button.d.ts","sourceRoot":"","sources":["../../../src/components/reke-button/reke-button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,OAAO,GACP,QAAQ,GACR,gBAAgB,GAChB,WAAW,CAAC;AAEhB,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,UAAW,SAAQ,WAAW;IACzC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAQ;IAGxB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAEhB,OAAO,CAAC,WAAW;IASV,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"reke-button.d.ts","sourceRoot":"","sources":["../../../src/components/reke-button/reke-button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,OAAO,GACP,QAAQ,GACR,gBAAgB,GAChB,WAAW,CAAC;AAEhB,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,UAAW,SAAQ,WAAW;IACzC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAQ;IAGxB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAEhB,OAAO,CAAC,WAAW;IASV,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/reke-button/reke-button.js

@@ -0,0 +1,53 @@
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { styles as n } from "./reke-button.styles.js";
+import { html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/components/reke-button/reke-button.ts
+var c = class extends e {
+	constructor(...e) {
+		super(...e), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1;
+	}
+	static {
+		this.styles = n;
+	}
+	handleClick(e) {
+		if (this.disabled || this.loading) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		this.emit("reke-click");
+	}
+	render() {
+		return r`
+      <button
+        part="button"
+        class=${s({
+			button: !0,
+			[`button--${this.variant}`]: !0,
+			[`button--${this.size}`]: !0,
+			"button--loading": this.loading
+		})}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled || this.loading}
+        aria-busy=${this.loading}
+        @click=${this.handleClick}
+      >
+        <span class="spinner" aria-hidden="true"></span>
+        ${this.variant === "icon-only" ? i : r`<slot name="prefix"></slot>`}
+        <slot></slot>
+        ${this.variant === "icon-only" ? i : r`<slot name="suffix"></slot>`}
+      </button>
+    `;
+	}
+};
+t([o({ reflect: !0 })], c.prototype, "variant", void 0), t([o({ reflect: !0 })], c.prototype, "size", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "loading", void 0), c = t([a("reke-button")], c);
+//#endregion
+export { c as RekeButton };

package/dist/components/reke-button/reke-button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-button/reke-button.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAyLlB,CAAC"}
+{"version":3,"file":"reke-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-button/reke-button.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BA+NlB,CAAC"}

package/dist/components/reke-button/reke-button.styles.js

@@ -0,0 +1,226 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-button/reke-button.styles.ts
+var n = [e, t`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--reke-space-xs, 8px);
+      border: 1px solid transparent;
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-weight: var(--reke-font-weight-medium, 500);
+      cursor: pointer;
+      transition:
+        background-color var(--reke-transition-fast, 0.12s ease),
+        border-color var(--reke-transition-fast, 0.12s ease),
+        color var(--reke-transition-fast, 0.12s ease),
+        box-shadow var(--reke-transition-normal, 0.2s ease),
+        transform var(--reke-transition-normal, 0.2s ease);
+      text-decoration: none;
+      line-height: 1;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+
+    .button:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    /* === Sizes === */
+
+    .button--xs {
+      padding: var(--reke-space-2xs, 6px) var(--reke-space-xs, 8px);
+      font-size: var(--reke-font-size-2xs, 11px);
+    }
+
+    .button--sm {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-md, 16px);
+      font-size: var(--reke-font-size-xs, 12px);
+    }
+
+    .button--md {
+      padding: var(--reke-space-sm, 12px) var(--reke-space-xl, 24px);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+
+    .button--lg {
+      padding: var(--reke-space-md, 16px) var(--reke-space-2xl, 28px);
+      font-size: var(--reke-font-size-md, 14px);
+    }
+
+    /* === Variants === */
+
+    .button--primary {
+      background-color: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-on-primary, #0A0A0B);
+      border-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .button--primary:hover:not(:disabled) {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 88%, black);
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 88%, black);
+      box-shadow: var(--reke-shadow-glow-primary, 0 0 20px rgba(34, 197, 94, 0.35));
+      transform: translateY(-1px);
+    }
+
+    .button--primary:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+
+    .button--secondary {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    .button--secondary:hover:not(:disabled) {
+      background-color: var(--reke-color-surface-hover, #202020);
+      border-color: var(--reke-color-border-hover, #3A3A3A);
+      color: var(--reke-color-text, #E5E5E5);
+      transform: translateY(-1px);
+      box-shadow: var(--reke-shadow-lift-sm, 0 4px 16px rgba(0, 0, 0, 0.35));
+    }
+
+    .button--secondary:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+
+    .button--ghost {
+      background-color: transparent;
+      color: var(--reke-color-text-ghost, #737373);
+      border-color: transparent;
+    }
+
+    .button--ghost:hover:not(:disabled) {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border-subtle, #1F1F1F);
+    }
+
+    .button--danger {
+      background-color: var(--reke-color-danger, #EF4444);
+      color: #FFFFFF;
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .button--danger:hover:not(:disabled) {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 88%, black);
+      border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 88%, black);
+      box-shadow: var(--reke-shadow-glow-danger, 0 0 20px rgba(239, 68, 68, 0.35));
+      transform: translateY(-1px);
+    }
+
+    .button--danger:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+
+    .button--danger-outline {
+      background-color: transparent;
+      color: var(--reke-color-danger, #EF4444);
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .button--danger-outline:hover:not(:disabled) {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 10%, transparent);
+      box-shadow: var(--reke-shadow-glow-danger, 0 0 20px rgba(239, 68, 68, 0.35));
+      transform: translateY(-1px);
+    }
+
+    .button--danger-outline:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+
+    .button--icon-only {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    .button--icon-only:hover:not(:disabled) {
+      background-color: var(--reke-color-surface-hover, #202020);
+      border-color: var(--reke-color-border-hover, #3A3A3A);
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .button--icon-only.button--xs {
+      padding: var(--reke-space-2xs, 6px);
+    }
+
+    .button--icon-only.button--sm {
+      padding: var(--reke-space-xs, 8px);
+    }
+
+    .button--icon-only.button--md {
+      padding: var(--reke-space-sm, 12px);
+    }
+
+    .button--icon-only.button--lg {
+      padding: var(--reke-space-md, 16px);
+    }
+
+    /* === Loading === */
+
+    .button--loading {
+      position: relative;
+      color: transparent !important;
+      pointer-events: none;
+    }
+
+    .spinner {
+      display: none;
+    }
+
+    .button--loading .spinner {
+      display: block;
+      position: absolute;
+      width: 1em;
+      height: 1em;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+      color: inherit;
+    }
+
+    .button--loading.button--primary .spinner {
+      color: var(--reke-color-on-primary, #0A0A0B);
+    }
+
+    .button--loading.button--secondary .spinner,
+    .button--loading.button--ghost .spinner,
+    .button--loading.button--icon-only .spinner {
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .button--loading.button--danger .spinner {
+      color: #FFFFFF;
+    }
+
+    .button--loading.button--danger-outline .spinner {
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `];
+//#endregion
+export { n as styles };

package/dist/components/reke-card/reke-card.d.ts

@@ -1,6 +1,7 @@
 import { RekeElement } from '../../shared/base-element.js';
 export type CardVariant = 'default' | 'elevated' | 'outlined';
 export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+export type CardAccent = 'none' | 'primary' | 'secondary' | 'danger' | 'warning';
 /**
  * @tag reke-card
  * @summary A card container component with multiple variants and padding options.
@@ -13,11 +14,17 @@ export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
  * @cssprop [--reke-color-border=#252525] - Card border color.
  * @cssprop [--reke-shadow-md=0 4px 6px rgba(0,0,0,0.3)] - Elevated variant shadow.
  * @cssprop [--reke-radius=4px] - Card border radius.
+ * @cssprop [--reke-shadow-lift] - Shadow applied on hover when interactive.
+ * @cssprop [--reke-shadow-glow-primary] - Glow shadow for accent=primary on hover.
  */
 export declare class RekeCard extends RekeElement {
     static styles: import("lit").CSSResult[];
     variant: CardVariant;
     padding: CardPadding;
+    /** Enables hover lift + border glow effect. */
+    interactive: boolean;
+    /** Accent color shown on hover border (requires interactive=true). */
+    accent: CardAccent;
     private _hasHeader;
     private _hasFooter;
     private _onSlotChange;

package/dist/components/reke-card/reke-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-card.d.ts","sourceRoot":"","sources":["../../../src/components/reke-card/reke-card.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,WAAW;IACvC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,WAAW,CAAa;IAGjC,OAAO,EAAE,WAAW,CAAQ;IAEnB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,aAAa;IAOZ,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"reke-card.d.ts","sourceRoot":"","sources":["../../../src/components/reke-card/reke-card.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjF;;;;;;;;;;;;;;GAcG;AACH,qBACa,QAAS,SAAQ,WAAW;IACvC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,WAAW,CAAa;IAGjC,OAAO,EAAE,WAAW,CAAQ;IAE5B,+CAA+C;IAE/C,WAAW,UAAS;IAEpB,sEAAsE;IAEtE,MAAM,EAAE,UAAU,CAAU;IAEnB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,aAAa;IAOZ,MAAM;CAmChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KAEvB;CACF"}