@inglorious/ui 0.1.0

package/src/themes/bootstrap.css

@@ -0,0 +1,118 @@
+.iw-theme-bootstrap {
+  /* ========================================
+     BOOTSTRAP THEME - Bootstrap Inspired
+     ======================================== */
+
+  /* Semantic Colors */
+  --iw-color-bg: var(--iw-color-white);
+  --iw-color-bg-secondary: var(--iw-color-gray-100);
+  --iw-color-bg-tertiary: var(--iw-color-gray-200);
+  --iw-color-surface: var(--iw-color-white);
+  --iw-color-surface-hover: var(--iw-color-gray-100);
+  --iw-color-surface-active: var(--iw-color-gray-200);
+
+  --iw-color-text: #212529;
+  --iw-color-text-secondary: #495057;
+  --iw-color-text-muted: #6c757d;
+
+  --iw-color-border: #dee2e6;
+  --iw-color-border-focus: #86b7fe;
+
+  --iw-color-primary: #0d6efd;
+  --iw-color-primary-hover: #0b5ed7;
+  --iw-color-primary-active: #0a58ca;
+  --iw-color-primary-text: var(--iw-color-white);
+
+  --iw-color-accent: #6f42c1;
+  --iw-color-accent-hover: #5a32a3;
+  --iw-color-accent-active: #4328a4;
+
+  /* ========================================
+     COMPONENT TOKENS
+     ======================================== */
+
+  /* Button */
+  --iw-button-bg: var(--iw-color-primary);
+  --iw-button-bg-hover: var(--iw-color-primary-hover);
+  --iw-button-bg-active: var(--iw-color-primary-active);
+  --iw-button-text: var(--iw-color-primary-text);
+  --iw-button-border: var(--iw-color-primary);
+  --iw-button-radius: var(--iw-radius-md);
+  --iw-button-shadow: none;
+  --iw-button-shadow-hover: none;
+  --iw-button-shadow-active: none;
+
+  --iw-button-outline-bg: transparent;
+  --iw-button-outline-bg-hover: var(--iw-color-primary);
+  --iw-button-outline-text: var(--iw-color-primary);
+  --iw-button-outline-text-hover: var(--iw-color-white);
+  --iw-button-outline-border: var(--iw-color-primary);
+
+  --iw-button-ghost-bg: transparent;
+  --iw-button-ghost-bg-hover: var(--iw-color-gray-100);
+  --iw-button-ghost-text: var(--iw-color-text);
+  --iw-button-ghost-border: transparent;
+
+  /* Input */
+  --iw-input-bg: var(--iw-color-white);
+  --iw-input-bg-hover: var(--iw-color-white);
+  --iw-input-bg-focus: var(--iw-color-white);
+  --iw-input-text: var(--iw-color-text);
+  --iw-input-text-placeholder: var(--iw-color-text-muted);
+  --iw-input-border: #ced4da;
+  --iw-input-border-hover: #ced4da;
+  --iw-input-border-focus: var(--iw-color-border-focus);
+  --iw-input-radius: var(--iw-radius-md);
+  --iw-input-shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+
+  /* Card */
+  --iw-card-bg: var(--iw-color-surface);
+  --iw-card-border: var(--iw-color-border);
+  --iw-card-radius: var(--iw-radius-lg);
+  --iw-card-shadow: none;
+  --iw-card-shadow-hover: none;
+
+  /* Badge */
+  --iw-badge-radius: var(--iw-radius-md);
+
+  /* Alert */
+  --iw-alert-radius: var(--iw-radius-md);
+  --iw-alert-shadow: none;
+  color-scheme: light;
+}
+
+/* Dark variant */
+.iw-theme-bootstrap.iw-theme-dark {
+  color-scheme: dark;
+
+  --iw-color-bg: #212529;
+  --iw-color-bg-secondary: #2c3036;
+  --iw-color-bg-tertiary: #343a40;
+  --iw-color-surface: #2c3036;
+  --iw-color-surface-hover: #343a40;
+  --iw-color-surface-active: #3d4450;
+  --iw-color-text: #f8f9fa;
+  --iw-color-text-secondary: #dee2e6;
+  --iw-color-text-muted: #adb5bd;
+  --iw-color-border: #495057;
+
+  --iw-color-primary: #5897fb;
+  --iw-color-primary-hover: #4a8bf7;
+  --iw-color-primary-active: #3c7ff3;
+  --iw-color-primary-text: var(--iw-color-black);
+
+  --iw-color-border-focus: #5897fb;
+
+  --iw-input-bg: #2c3036;
+  --iw-input-bg-hover: #2c3036;
+  --iw-input-bg-focus: #2c3036;
+  --iw-input-border: #495057;
+  --iw-input-border-hover: #5a6268;
+  --iw-input-border-focus: var(--iw-color-primary);
+  --iw-input-shadow-focus: 0 0 0 0.25rem rgba(88, 151, 251, 0.25);
+
+  --iw-button-outline-text: var(--iw-color-primary);
+  --iw-button-outline-border: var(--iw-color-primary);
+  --iw-button-ghost-bg-hover: #343a40;
+  --iw-button-ghost-text: var(--iw-color-text);
+}

package/src/themes/inglorious.css

@@ -0,0 +1,106 @@
+.iw-theme-inglorious {
+  /* ========================================
+     INGLORIOUS THEME - Neon Videogame Aesthetic
+     ======================================== */
+
+  /* Semantic Colors */
+  --iw-color-bg: var(--iw-color-gray-900);
+  --iw-color-bg-secondary: var(--iw-color-gray-800);
+  --iw-color-bg-tertiary: var(--iw-color-black);
+  --iw-color-surface: var(--iw-color-gray-800);
+  --iw-color-surface-hover: var(--iw-color-gray-700);
+  --iw-color-surface-active: var(--iw-color-gray-600);
+
+  --iw-color-text: var(--iw-color-gray-100);
+  --iw-color-text-secondary: var(--iw-color-gray-400);
+  --iw-color-text-muted: var(--iw-color-gray-500);
+
+  --iw-color-border: var(--iw-color-gray-700);
+  --iw-color-border-focus: var(--iw-color-primary-500);
+
+  --iw-color-primary: var(--iw-color-primary-500);
+  --iw-color-primary-hover: var(--iw-color-primary-400);
+  --iw-color-primary-active: var(--iw-color-primary-300);
+  --iw-color-primary-text: var(--iw-color-black);
+
+  --iw-color-accent: #ff00ff;
+  --iw-color-accent-hover: #ff33ff;
+  --iw-color-accent-active: #ff66ff;
+
+  /* ========================================
+     COMPONENT TOKENS
+     ======================================== */
+
+  /* Button */
+  --iw-button-bg: var(--iw-color-primary);
+  --iw-button-bg-hover: var(--iw-color-primary-hover);
+  --iw-button-bg-active: var(--iw-color-primary-active);
+  --iw-button-text: var(--iw-color-primary-text);
+  --iw-button-border: var(--iw-color-primary);
+  --iw-button-radius: var(--iw-radius-none);
+  --iw-button-shadow: none;
+  --iw-button-shadow-hover:
+    0 0 10px var(--iw-color-primary), 0 0 20px var(--iw-color-primary);
+  --iw-button-shadow-active: 0 0 5px var(--iw-color-primary);
+
+  --iw-button-outline-bg: transparent;
+  --iw-button-outline-bg-hover: var(--iw-color-primary);
+  --iw-button-outline-text: var(--iw-color-primary);
+  --iw-button-outline-text-hover: var(--iw-color-black);
+  --iw-button-outline-border: var(--iw-color-primary);
+
+  --iw-button-ghost-bg: transparent;
+  --iw-button-ghost-bg-hover: rgba(0, 255, 136, 0.1);
+  --iw-button-ghost-text: var(--iw-color-primary);
+  --iw-button-ghost-border: transparent;
+
+  /* Input */
+  --iw-input-bg: var(--iw-color-bg-tertiary);
+  --iw-input-bg-hover: var(--iw-color-bg-secondary);
+  --iw-input-bg-focus: var(--iw-color-bg-tertiary);
+  --iw-input-text: var(--iw-color-text);
+  --iw-input-text-placeholder: var(--iw-color-text-muted);
+  --iw-input-border: var(--iw-color-border);
+  --iw-input-border-hover: var(--iw-color-gray-600);
+  --iw-input-border-focus: var(--iw-color-primary);
+  --iw-input-radius: var(--iw-radius-none);
+  --iw-input-shadow-focus:
+    0 0 0 1px var(--iw-color-primary), 0 0 10px rgba(0, 255, 136, 0.3);
+
+  /* Card */
+  --iw-card-bg: var(--iw-color-surface);
+  --iw-card-border: var(--iw-color-border);
+  --iw-card-radius: var(--iw-radius-none);
+  --iw-card-shadow: var(--iw-shadow-lg);
+  --iw-card-shadow-hover: var(--iw-shadow-xl), 0 0 15px rgba(0, 255, 136, 0.1);
+
+  /* Badge */
+  --iw-badge-radius: var(--iw-radius-none);
+
+  /* Alert */
+  --iw-alert-radius: var(--iw-radius-none);
+  --iw-alert-shadow: 0 0 10px currentColor;
+  color-scheme: dark;
+}
+
+/* Light variant */
+.iw-theme-inglorious.iw-theme-light {
+  --iw-color-bg: var(--iw-color-white);
+  --iw-color-bg-secondary: var(--iw-color-gray-50);
+  --iw-color-bg-tertiary: var(--iw-color-gray-100);
+  --iw-color-surface: var(--iw-color-white);
+  --iw-color-surface-hover: var(--iw-color-gray-50);
+  --iw-color-surface-active: var(--iw-color-gray-100);
+  --iw-color-text: var(--iw-color-gray-900);
+  --iw-color-text-secondary: var(--iw-color-gray-600);
+  --iw-color-text-muted: var(--iw-color-gray-500);
+  --iw-color-border: var(--iw-color-gray-300);
+  --iw-color-primary-text: var(--iw-color-black);
+
+  --iw-input-bg: var(--iw-color-white);
+  --iw-input-bg-hover: var(--iw-color-gray-50);
+  --iw-input-bg-focus: var(--iw-color-white);
+
+  --iw-button-shadow-hover: 0 0 10px var(--iw-color-primary);
+  --iw-card-shadow-hover: var(--iw-shadow-xl), 0 0 15px rgba(0, 255, 136, 0.2);
+}

package/src/themes/material.css

@@ -0,0 +1,124 @@
+.iw-theme-material {
+  /* ========================================
+     MATERIAL THEME - Material Design Inspired
+     ======================================== */
+
+  /* Semantic Colors */
+  --iw-color-bg: var(--iw-color-gray-50);
+  --iw-color-bg-secondary: var(--iw-color-white);
+  --iw-color-bg-tertiary: var(--iw-color-gray-100);
+  --iw-color-surface: var(--iw-color-white);
+  --iw-color-surface-hover: var(--iw-color-gray-50);
+  --iw-color-surface-active: var(--iw-color-gray-100);
+
+  --iw-color-text: var(--iw-color-gray-900);
+  --iw-color-text-secondary: var(--iw-color-gray-700);
+  --iw-color-text-muted: var(--iw-color-gray-500);
+
+  --iw-color-border: var(--iw-color-gray-300);
+  --iw-color-border-focus: #1a73e8;
+
+  --iw-color-primary: #1a73e8;
+  --iw-color-primary-hover: #1557b0;
+  --iw-color-primary-active: #0d47a1;
+  --iw-color-primary-text: var(--iw-color-white);
+
+  --iw-color-accent: #e91e63;
+  --iw-color-accent-hover: #c2185b;
+  --iw-color-accent-active: #ad1457;
+
+  /* ========================================
+     COMPONENT TOKENS
+     ======================================== */
+
+  /* Button */
+  --iw-button-bg: var(--iw-color-primary);
+  --iw-button-bg-hover: var(--iw-color-primary-hover);
+  --iw-button-bg-active: var(--iw-color-primary-active);
+  --iw-button-text: var(--iw-color-primary-text);
+  --iw-button-border: var(--iw-color-primary);
+  --iw-button-radius: var(--iw-radius-full);
+  --iw-button-shadow:
+    0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+  --iw-button-shadow-hover:
+    0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
+  --iw-button-shadow-active: 0 1px 3px rgba(60, 64, 67, 0.4);
+
+  --iw-button-outline-bg: transparent;
+  --iw-button-outline-bg-hover: rgba(26, 115, 232, 0.08);
+  --iw-button-outline-text: var(--iw-color-primary);
+  --iw-button-outline-text-hover: var(--iw-color-primary);
+  --iw-button-outline-border: transparent;
+
+  --iw-button-ghost-bg: transparent;
+  --iw-button-ghost-bg-hover: rgba(0, 0, 0, 0.04);
+  --iw-button-ghost-text: var(--iw-color-primary);
+  --iw-button-ghost-border: transparent;
+
+  /* Input */
+  --iw-input-bg: var(--iw-color-bg-secondary);
+  --iw-input-bg-hover: var(--iw-color-bg-secondary);
+  --iw-input-bg-focus: var(--iw-color-bg-secondary);
+  --iw-input-text: var(--iw-color-text);
+  --iw-input-text-placeholder: var(--iw-color-text-muted);
+  --iw-input-border: var(--iw-color-border);
+  --iw-input-border-hover: var(--iw-color-border);
+  --iw-input-border-focus: var(--iw-color-primary);
+  --iw-input-radius: var(--iw-radius-xs);
+  --iw-input-shadow-focus: none;
+
+  /* Card */
+  --iw-card-bg: var(--iw-color-surface);
+  --iw-card-border: transparent;
+  --iw-card-radius: var(--iw-radius-lg);
+  --iw-card-shadow:
+    0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+  --iw-card-shadow-hover:
+    0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
+
+  /* Badge */
+  --iw-badge-radius: var(--iw-radius-sm);
+
+  /* Alert */
+  --iw-alert-radius: var(--iw-radius-md);
+  --iw-alert-shadow: none;
+  color-scheme: light;
+}
+
+/* Dark variant */
+.iw-theme-material.iw-theme-dark {
+  color-scheme: dark;
+
+  --iw-color-bg: #121212;
+  --iw-color-bg-secondary: #1e1e1e;
+  --iw-color-bg-tertiary: #2d2d2d;
+  --iw-color-surface: #1e1e1e;
+  --iw-color-surface-hover: #2d2d2d;
+  --iw-color-surface-active: #3d3d3d;
+  --iw-color-text: var(--iw-color-gray-100);
+  --iw-color-text-secondary: var(--iw-color-gray-300);
+  --iw-color-text-muted: var(--iw-color-gray-400);
+  --iw-color-border: var(--iw-color-gray-700);
+
+  --iw-color-primary: #8ab4f8;
+  --iw-color-primary-hover: #aecbfa;
+  --iw-color-primary-active: #669df6;
+  --iw-color-primary-text: var(--iw-color-black);
+
+  --iw-color-border-focus: #8ab4f8;
+
+  --iw-input-bg: var(--iw-color-bg-secondary);
+  --iw-input-bg-hover: var(--iw-color-bg-secondary);
+  --iw-input-bg-focus: var(--iw-color-bg-secondary);
+  --iw-input-border: var(--iw-color-gray-600);
+  --iw-input-border-hover: var(--iw-color-gray-500);
+  --iw-input-border-focus: var(--iw-color-primary);
+
+  --iw-button-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --iw-button-shadow-hover:
+    0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+
+  --iw-card-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+}

package/src/tokens/index.css

@@ -0,0 +1,133 @@
+:root {
+  /* ========================================
+     COLOR PALETTE - Primitive Colors
+     ======================================== */
+  --iw-color-white: #ffffff;
+  --iw-color-black: #000000;
+
+  /* Brand Colors */
+  --iw-color-primary-50: #e6fff0;
+  --iw-color-primary-100: #b3ffd6;
+  --iw-color-primary-200: #80ffbd;
+  --iw-color-primary-300: #4dffa3;
+  --iw-color-primary-400: #1aff8a;
+  --iw-color-primary-500: #00ff88;
+  --iw-color-primary-600: #00cc6d;
+  --iw-color-primary-700: #009952;
+  --iw-color-primary-800: #006637;
+  --iw-color-primary-900: #00331c;
+
+  /* Neutral Colors */
+  --iw-color-gray-50: #fafafa;
+  --iw-color-gray-100: #f4f4f5;
+  --iw-color-gray-200: #e4e4e7;
+  --iw-color-gray-300: #d4d4d8;
+  --iw-color-gray-400: #a1a1aa;
+  --iw-color-gray-500: #71717a;
+  --iw-color-gray-600: #52525b;
+  --iw-color-gray-700: #3f3f46;
+  --iw-color-gray-800: #27272a;
+  --iw-color-gray-900: #18181b;
+
+  /* Semantic Colors */
+  --iw-color-success-light: #d1fae5;
+  --iw-color-success: #10b981;
+  --iw-color-success-dark: #065f46;
+
+  --iw-color-warning-light: #fef3c7;
+  --iw-color-warning: #f59e0b;
+  --iw-color-warning-dark: #92400e;
+
+  --iw-color-error-light: #fee2e2;
+  --iw-color-error: #ef4444;
+  --iw-color-error-dark: #991b1b;
+
+  --iw-color-info-light: #dbeafe;
+  --iw-color-info: #3b82f6;
+  --iw-color-info-dark: #1e40af;
+
+  /* ========================================
+     SPACING SCALE
+     ======================================== */
+  --iw-space-0: 0;
+  --iw-space-1: 0.25rem;
+  --iw-space-2: 0.5rem;
+  --iw-space-3: 0.75rem;
+  --iw-space-4: 1rem;
+  --iw-space-5: 1.25rem;
+  --iw-space-6: 1.5rem;
+  --iw-space-8: 2rem;
+  --iw-space-10: 2.5rem;
+  --iw-space-12: 3rem;
+  --iw-space-16: 4rem;
+  --iw-space-20: 5rem;
+  --iw-space-24: 6rem;
+
+  /* ========================================
+     BORDER RADIUS
+     ======================================== */
+  --iw-radius-none: 0;
+  --iw-radius-sm: 2px;
+  --iw-radius-md: 4px;
+  --iw-radius-lg: 8px;
+  --iw-radius-xl: 12px;
+  --iw-radius-2xl: 16px;
+  --iw-radius-full: 9999px;
+
+  /* ========================================
+     TYPOGRAPHY
+     ======================================== */
+  --iw-font-family-sans:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --iw-font-family-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+
+  --iw-font-size-xs: 0.75rem;
+  --iw-font-size-sm: 0.875rem;
+  --iw-font-size-base: 1rem;
+  --iw-font-size-lg: 1.125rem;
+  --iw-font-size-xl: 1.25rem;
+  --iw-font-size-2xl: 1.5rem;
+  --iw-font-size-3xl: 1.875rem;
+  --iw-font-size-4xl: 2.25rem;
+
+  --iw-font-weight-normal: 400;
+  --iw-font-weight-medium: 500;
+  --iw-font-weight-semibold: 600;
+  --iw-font-weight-bold: 700;
+
+  --iw-line-height-tight: 1.25;
+  --iw-line-height-normal: 1.5;
+  --iw-line-height-relaxed: 1.75;
+
+  /* ========================================
+     SHADOWS
+     ======================================== */
+  --iw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --iw-shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --iw-shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --iw-shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* ========================================
+     TRANSITIONS
+     ======================================== */
+  --iw-transition-fast: 150ms ease;
+  --iw-transition-normal: 200ms ease;
+  --iw-transition-slow: 300ms ease;
+
+  /* ========================================
+     Z-INDEX SCALE
+     ======================================== */
+  --iw-z-dropdown: 1000;
+  --iw-z-sticky: 1020;
+  --iw-z-fixed: 1030;
+  --iw-z-modal-backdrop: 1040;
+  --iw-z-modal: 1050;
+  --iw-z-popover: 1060;
+  --iw-z-tooltip: 1070;
+}

package/src/widgets/card/card.stories.js

@@ -0,0 +1,135 @@
+import { html } from "@inglorious/web"
+
+import {
+  makeStoryRender,
+  notifyActionArgType,
+} from "../../stories/notifyStory.js"
+import { card } from "."
+
+export default {
+  title: "Widgets/Card",
+  tags: ["autodocs"],
+  render: makeStoryRender(card, "story-card"),
+  argTypes: {
+    ...notifyActionArgType,
+    title: {
+      control: "text",
+      description: "Primary header text.",
+    },
+    subtitle: {
+      control: "text",
+      description: "Secondary header text.",
+    },
+    hoverable: {
+      control: "boolean",
+      description: "Enables hover visual feedback.",
+    },
+    clickable: {
+      control: "boolean",
+      description: "Marks the card as interactive and emits click events.",
+    },
+    fullWidth: {
+      control: "boolean",
+      description: "Expands card width to 100% of its container.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Container widget with overridable header/body/footer sub-renderers.",
+      },
+    },
+    actions: {
+      handles: ["click"],
+    },
+  },
+}
+export const Default = {}
+Default.args = {
+  title: "Card Title",
+  subtitle: "This is a card subtitle",
+  hoverable: false,
+  clickable: false,
+  fullWidth: false,
+}
+
+export const Hoverable = {}
+Hoverable.args = {
+  ...Default.args,
+  hoverable: true,
+}
+
+export const Clickable = {}
+Clickable.args = {
+  ...Default.args,
+  hoverable: true,
+  clickable: true,
+}
+
+const cardWithFooter = [
+  ...card,
+  {
+    renderFooter(entity, api) {
+      return html`<div
+        class="iw-card-footer"
+        style="display: flex; gap: 0.5rem;"
+      >
+        ${entity.footerActions?.map(
+          (action) =>
+            html`<button
+              class="iw-button iw-button-sm ${action.variant === "ghost"
+                ? "iw-button-ghost"
+                : ""}"
+              @click=${() => api.notify(`#${entity.id}:${action.event}`)}
+            >
+              ${action.label}
+            </button>`,
+        )}
+      </div>`
+    },
+  },
+]
+
+export const WithFooter = {}
+WithFooter.render = makeStoryRender(cardWithFooter, "card-footer", {
+  resolveByEntityType: true,
+})
+WithFooter.args = {
+  type: "cardWithFooter",
+  title: "Card with Footer",
+  subtitle: "This card has a footer section",
+  footerActions: [
+    { label: "Cancel", event: "cancel", variant: "ghost" },
+    { label: "Save", event: "save" },
+  ],
+}
+
+export const NoHeader = {}
+NoHeader.args = {
+  title: null,
+  subtitle: null,
+}
+
+export const FullWidth = {}
+FullWidth.args = {
+  ...Default.args,
+  fullWidth: true,
+}
+
+export const Interactive = {}
+Interactive.render = makeStoryRender(cardWithFooter, "card-interactive", {
+  resolveByEntityType: true,
+})
+Interactive.args = {
+  type: "cardWithFooter",
+  title: "Interactive Card",
+  subtitle: "Hover, click, and trigger footer actions",
+  hoverable: true,
+  clickable: true,
+  fullWidth: false,
+  footerActions: [
+    { label: "Details", event: "details", variant: "ghost" },
+    { label: "Open", event: "open" },
+  ],
+}

package/src/widgets/card/index.js

@@ -0,0 +1,4 @@
+import { withRenderValidation } from "../../shared/withRenderValidation.js"
+import * as renderers from "./template.js"
+
+export const card = [{ ...renderers }, withRenderValidation]

package/src/widgets/card/style.css

@@ -0,0 +1,53 @@
+.iw-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--iw-card-bg);
+  border: 1px solid var(--iw-card-border);
+  border-radius: var(--iw-card-radius);
+  box-shadow: var(--iw-card-shadow);
+  overflow: hidden;
+  transition: all var(--iw-transition-normal);
+
+  &.iw-card-hoverable:hover {
+    box-shadow: var(--iw-card-shadow-hover);
+  }
+
+  &.iw-card-clickable {
+    cursor: pointer;
+  }
+
+  &.iw-card-full-width {
+    width: 100%;
+  }
+
+  .iw-card-header {
+    padding: var(--iw-space-4);
+    border-bottom: 1px solid var(--iw-color-border);
+  }
+
+  .iw-card-title {
+    margin: 0;
+    font-size: var(--iw-font-size-lg);
+    font-weight: var(--iw-font-weight-semibold);
+    color: var(--iw-color-text);
+    line-height: var(--iw-line-height-tight);
+  }
+
+  .iw-card-subtitle {
+    margin: var(--iw-space-1) 0 0;
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text-secondary);
+    line-height: var(--iw-line-height-normal);
+  }
+
+  .iw-card-body {
+    padding: var(--iw-space-4);
+    flex: 1;
+  }
+
+  .iw-card-footer {
+    padding: var(--iw-space-4);
+    border-top: 1px solid var(--iw-color-border);
+    background-color: var(--iw-color-bg-secondary);
+  }
+}