@sekiui/elements 0.0.55 → 0.0.57

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

@@ -0,0 +1,608 @@
+/**
+ * SekiUI Design Tokens - Index
+ * Aggregates all design token files into a single entry point
+ *
+ * Import this file to get access to all design tokens:
+ * @import '../tokens/index.css';
+ */
+
+/**
+ * SekiUI Design Tokens - Colors
+ * Based on shadcn/ui color system
+ */
+
+/* =============================================================================
+   PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
+   ============================================================================= */
+
+:host {
+  /* Neutral Scale (50-950) - shadcn/ui inspired */
+  --seki-neutral-50: hsl(0, 0%, 98%);
+  --seki-neutral-100: hsl(0, 0%, 96.1%);
+  --seki-neutral-200: hsl(0, 0%, 89.8%);
+  --seki-neutral-300: hsl(0, 0%, 83.1%);
+  --seki-neutral-400: hsl(0, 0%, 63.9%);
+  --seki-neutral-500: hsl(0, 0%, 45.1%);
+  --seki-neutral-600: hsl(0, 0%, 32.2%);
+  --seki-neutral-700: hsl(0, 0%, 25.1%);
+  --seki-neutral-800: hsl(0, 0%, 14.9%);
+  --seki-neutral-900: hsl(0, 0%, 9%);
+  --seki-neutral-950: hsl(0, 0%, 3.9%);
+
+  /* Primary/Accent Scale (50-950) */
+  --seki-primary-50: hsl(210, 100%, 97%);
+  --seki-primary-100: hsl(210, 95%, 93%);
+  --seki-primary-200: hsl(210, 95%, 85%);
+  --seki-primary-300: hsl(210, 90%, 73%);
+  --seki-primary-400: hsl(210, 85%, 58%);
+  --seki-primary-500: hsl(210, 80%, 48%);
+  --seki-primary-600: hsl(210, 75%, 40%);
+  --seki-primary-700: hsl(210, 70%, 32%);
+  --seki-primary-800: hsl(210, 65%, 25%);
+  --seki-primary-900: hsl(210, 60%, 18%);
+  --seki-primary-950: hsl(210, 55%, 10%);
+
+  /* Semantic Color Primitives */
+  --seki-success-500: hsl(142, 71%, 45%);
+  --seki-success-600: hsl(142, 71%, 35%);
+  --seki-warning-500: hsl(38, 92%, 50%);
+  --seki-warning-600: hsl(38, 92%, 40%);
+  --seki-destructive-500: hsl(0, 84.2%, 60.2%);
+  --seki-destructive-600: hsl(0, 72%, 41%);
+}
+
+/* =============================================================================
+   SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
+   ============================================================================= */
+
+:host {
+  /* Base */
+  --seki-background: hsl(0, 0%, 100%);
+  --seki-foreground: hsl(0, 0%, 3.9%);
+
+  /* Muted */
+  --seki-muted: hsl(0, 0%, 96.1%);
+  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+
+  /* Card */
+  --seki-card: hsl(0, 0%, 100%);
+  --seki-card-foreground: hsl(0, 0%, 3.9%);
+
+  /* Popover */
+  --seki-popover: hsl(0, 0%, 100%);
+  --seki-popover-foreground: hsl(0, 0%, 3.9%);
+
+  /* Border */
+  --seki-border: hsl(0, 0%, 89.8%);
+  --seki-input: hsl(0, 0%, 89.8%);
+
+  /* Primary */
+  --seki-primary: hsl(0, 0%, 9%);
+  --seki-primary-foreground: hsl(0, 0%, 98%);
+
+  /* Secondary */
+  --seki-secondary: hsl(0, 0%, 96.1%);
+  --seki-secondary-foreground: hsl(0, 0%, 9%);
+
+  /* Accent */
+  --seki-accent: hsl(0, 0%, 96.1%);
+  --seki-accent-foreground: hsl(0, 0%, 9%);
+
+  /* Destructive */
+  --seki-destructive: hsl(0, 84.2%, 60.2%);
+  --seki-destructive-foreground: hsl(0, 0%, 98%);
+
+  /* Ring */
+  --seki-ring: hsl(0, 0%, 3.9%);
+
+  /* Legacy aliases for backward compatibility */
+  --seki-bg-primary: var(--seki-background);
+  --seki-bg-secondary: var(--seki-muted);
+  --seki-bg-tertiary: var(--seki-accent);
+  --seki-text-primary: var(--seki-foreground);
+  --seki-text-secondary: var(--seki-muted-foreground);
+  --seki-text-tertiary: var(--seki-neutral-400);
+  --seki-border-default: var(--seki-border);
+  --seki-border-emphasis: var(--seki-neutral-300);
+}
+
+/* Dark Mode Semantic Tokens */
+:host([data-theme='dark']) {
+  /* Base */
+  --seki-background: hsl(0, 0%, 3.9%);
+  --seki-foreground: hsl(0, 0%, 98%);
+
+  /* Muted */
+  --seki-muted: hsl(0, 0%, 14.9%);
+  --seki-muted-foreground: hsl(0, 0%, 63.9%);
+
+  /* Card */
+  --seki-card: hsl(0, 0%, 3.9%);
+  --seki-card-foreground: hsl(0, 0%, 98%);
+
+  /* Popover */
+  --seki-popover: hsl(0, 0%, 3.9%);
+  --seki-popover-foreground: hsl(0, 0%, 98%);
+
+  /* Border */
+  --seki-border: hsl(0, 0%, 14.9%);
+  --seki-input: hsl(0, 0%, 14.9%);
+
+  /* Primary */
+  --seki-primary: hsl(0, 0%, 98%);
+  --seki-primary-foreground: hsl(0, 0%, 9%);
+
+  /* Secondary */
+  --seki-secondary: hsl(0, 0%, 14.9%);
+  --seki-secondary-foreground: hsl(0, 0%, 98%);
+
+  /* Accent */
+  --seki-accent: hsl(0, 0%, 14.9%);
+  --seki-accent-foreground: hsl(0, 0%, 98%);
+
+  /* Destructive */
+  --seki-destructive: hsl(0, 62.8%, 30.6%);
+  --seki-destructive-foreground: hsl(0, 0%, 98%);
+
+  /* Ring */
+  --seki-ring: hsl(0, 0%, 83.1%);
+
+  /* Legacy aliases for backward compatibility */
+  --seki-bg-primary: var(--seki-background);
+  --seki-bg-secondary: var(--seki-muted);
+  --seki-bg-tertiary: var(--seki-accent);
+  --seki-text-primary: var(--seki-foreground);
+  --seki-text-secondary: var(--seki-muted-foreground);
+  --seki-text-tertiary: var(--seki-neutral-600);
+  --seki-border-default: var(--seki-border);
+  --seki-border-emphasis: var(--seki-neutral-700);
+
+  /* Button overrides for dark mode */
+  --seki-button-primary-hover-bg: hsl(0, 0%, 98%, 0.9);
+  --seki-button-secondary-hover-bg: hsl(0, 0%, 14.9%, 0.8);
+}
+
+/* =============================================================================
+   COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
+   ============================================================================= */
+
+:host {
+  /* Button Variant: Primary (default in shadcn/ui) */
+  --seki-button-primary-bg: var(--seki-primary);
+  --seki-button-primary-text: var(--seki-primary-foreground);
+  --seki-button-primary-border: transparent;
+  --seki-button-primary-hover-bg: hsl(0, 0%, 9%, 0.9);
+  --seki-button-primary-hover-text: var(--seki-primary-foreground);
+  --seki-button-primary-hover-border: transparent;
+
+  /* Button Variant: Secondary */
+  --seki-button-secondary-bg: var(--seki-secondary);
+  --seki-button-secondary-text: var(--seki-secondary-foreground);
+  --seki-button-secondary-border: transparent;
+  --seki-button-secondary-hover-bg: hsl(0, 0%, 96.1%, 0.8);
+  --seki-button-secondary-hover-text: var(--seki-secondary-foreground);
+  --seki-button-secondary-hover-border: transparent;
+
+  /* Button Variant: Outline */
+  --seki-button-outline-bg: transparent;
+  --seki-button-outline-text: var(--seki-foreground);
+  --seki-button-outline-border: var(--seki-input);
+  --seki-button-outline-hover-bg: var(--seki-accent);
+  --seki-button-outline-hover-text: var(--seki-accent-foreground);
+  --seki-button-outline-hover-border: var(--seki-input);
+
+  /* Button Variant: Ghost */
+  --seki-button-ghost-bg: transparent;
+  --seki-button-ghost-text: var(--seki-foreground);
+  --seki-button-ghost-border: transparent;
+  --seki-button-ghost-hover-bg: var(--seki-accent);
+  --seki-button-ghost-hover-text: var(--seki-accent-foreground);
+  --seki-button-ghost-hover-border: transparent;
+
+  /* Button Variant: Destructive */
+  --seki-button-destructive-bg: var(--seki-destructive);
+  --seki-button-destructive-text: var(--seki-destructive-foreground);
+  --seki-button-destructive-border: transparent;
+  --seki-button-destructive-hover-bg: hsl(0, 84.2%, 60.2%, 0.9);
+  --seki-button-destructive-hover-border: transparent;
+
+  /* Button Sizing: Small */
+  --seki-button-sm-padding-x: var(--seki-spacing-3, 0.75rem);
+  --seki-button-sm-padding-y: 0.375rem;
+  --seki-button-sm-font-size: var(--seki-text-sm, 0.875rem);
+  --seki-button-sm-height: 2.25rem; /* Updated from 2rem to match shadcn (36px) */
+
+  /* Button Sizing: Medium (default) */
+  --seki-button-md-padding-x: var(--seki-spacing-4, 1rem);
+  --seki-button-md-padding-y: var(--seki-spacing-2, 0.5rem);
+  --seki-button-md-font-size: var(--seki-text-base, 1rem);
+  --seki-button-md-height: 2.5rem;
+
+  /* Button Sizing: Large */
+  --seki-button-lg-padding-x: 2rem; /* Updated from 1.25rem to match shadcn */
+  --seki-button-lg-padding-y: 0.5rem;
+  --seki-button-lg-font-size: 1rem; /* Updated from 1.125rem to match shadcn */
+  --seki-button-lg-height: 2.75rem; /* Updated from 3rem to match shadcn (44px) */
+
+  /* Button Sizing: Icon-only (NEW - shadcn compatibility) */
+  --seki-button-icon-sm-size: 2rem; /* 32x32px square */
+  --seki-button-icon-size: 2.5rem; /* 40x40px square */
+  --seki-button-icon-lg-size: 3rem; /* 48x48px square */
+  --seki-button-icon-gap: 0.5rem; /* 8px gap between icon and text */
+
+  /* Button Variant: Link (NEW - shadcn compatibility) */
+  --seki-button-link-bg: transparent;
+  --seki-button-link-text: var(--seki-primary);
+  --seki-button-link-border: transparent;
+  --seki-button-link-hover-bg: transparent;
+  --seki-button-link-hover-text: var(--seki-primary);
+  --seki-button-link-hover-border: transparent;
+
+  /* Button Common */
+  --seki-button-radius: var(--seki-radius-md, 0.375rem);
+  --seki-button-font-weight: var(--seki-font-medium, 500);
+  --seki-button-transition-duration: 150ms;
+  --seki-button-transition-timing: ease-in-out;
+  --seki-button-shadow: var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --seki-button-shadow-hover: var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  --seki-button-disabled-opacity: 0.5;
+
+  /* Input Component Colors */
+  --seki-input-bg: var(--seki-background);
+  --seki-input-border: var(--seki-border);
+  --seki-input-text: var(--seki-foreground);
+  --seki-input-placeholder: var(--seki-muted-foreground);
+  --seki-input-ring: var(--seki-ring);
+  --seki-input-invalid-border: var(--seki-destructive);
+  --seki-input-invalid-ring: var(--seki-destructive);
+  --seki-input-disabled-opacity: 0.5;
+  --seki-input-radius: var(--seki-radius-md);
+  --seki-input-ring-offset: 2px;
+
+  /* Select Component Colors */
+  --seki-select-trigger-bg: var(--seki-background);
+  --seki-select-trigger-border: 1px solid var(--seki-border);
+  --seki-select-trigger-bg-hover: var(--seki-muted);
+  --seki-select-trigger-radius: var(--seki-radius-md);
+  --seki-select-trigger-min-height: 2.5rem;
+  --seki-select-trigger-padding: 0.5rem 0.75rem;
+  --seki-select-trigger-gap: 0.5rem;
+
+  /* Select Content/Dropdown */
+  --seki-select-content-bg: var(--seki-popover);
+  --seki-select-content-border: 1px solid var(--seki-border);
+  --seki-select-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --seki-select-content-radius: var(--seki-radius-md);
+  --seki-select-content-padding: 0.5rem 0;
+
+  /* Select Option */
+  --seki-select-option-padding: 0.5rem 0.75rem;
+  --seki-select-option-gap: 0.5rem;
+  --seki-select-option-radius: var(--seki-radius-sm);
+  --seki-select-option-bg-hover: var(--seki-muted);
+  --seki-select-option-bg-selected: var(--seki-muted);
+
+  /* Select Group */
+  --seki-select-group-label-padding: 0.5rem 0.75rem;
+  --seki-select-group-label-font-size: var(--seki-font-size-xs);
+  --seki-select-group-label-font-weight: var(--seki-font-semibold);
+  --seki-select-group-label-color: var(--seki-muted-foreground);
+  --seki-select-group-separator: 1px solid var(--seki-border);
+}
+
+/**
+ * SekiUI Design Tokens - Spacing
+ * 4px base unit, rem-based scale
+ */
+
+:host {
+  /* Spacing Scale (4px base unit) */
+  --seki-spacing-0: 0;
+  --seki-spacing-0-5: 0.125rem;  /* 2px */
+  --seki-spacing-1: 0.25rem;     /* 4px */
+  --seki-spacing-1-5: 0.375rem;  /* 6px */
+  --seki-spacing-2: 0.5rem;      /* 8px */
+  --seki-spacing-2-5: 0.625rem;  /* 10px */
+  --seki-spacing-3: 0.75rem;     /* 12px */
+  --seki-spacing-3-5: 0.875rem;  /* 14px */
+  --seki-spacing-4: 1rem;        /* 16px */
+  --seki-spacing-5: 1.25rem;     /* 20px */
+  --seki-spacing-6: 1.5rem;      /* 24px */
+  --seki-spacing-8: 2rem;        /* 32px */
+  --seki-spacing-10: 2.5rem;     /* 40px */
+  --seki-spacing-12: 3rem;       /* 48px */
+  --seki-spacing-16: 4rem;       /* 64px */
+  --seki-spacing-20: 5rem;       /* 80px */
+  --seki-spacing-24: 6rem;       /* 96px */
+
+  /* Input Component Tokens */
+  --seki-input-height-sm: 2rem;       /* 32px */
+  --seki-input-height-md: 2.5rem;     /* 40px - default */
+  --seki-input-height-lg: 3rem;       /* 48px */
+  --seki-input-padding-x: 0.75rem;    /* 12px */
+  --seki-input-padding-y: 0.5rem;     /* 8px */
+  --seki-input-font-size: 0.875rem;   /* 14px */
+  --seki-input-ring-offset: 2px;
+}
+
+/**
+ * SekiUI Design Tokens - Shadows
+ * Subtle elevation system
+ */
+
+:host {
+  /* Shadow Levels */
+  --seki-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --seki-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --seki-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/**
+ * SekiUI Design Tokens - Typography
+ * System font stacks, sizes, weights, line heights
+ */
+
+:host {
+  /* Font Families */
+  --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
+  --seki-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+
+  /* Font Sizes (rem-based) */
+  --seki-text-xs: 0.75rem;    /* 12px */
+  --seki-text-sm: 0.875rem;   /* 14px */
+  --seki-text-base: 1rem;     /* 16px */
+  --seki-text-lg: 1.125rem;   /* 18px */
+  --seki-text-xl: 1.25rem;    /* 20px */
+  --seki-text-2xl: 1.5rem;    /* 24px */
+  --seki-text-3xl: 1.875rem;  /* 30px */
+  --seki-text-4xl: 2.25rem;   /* 36px */
+
+  /* Font Weights */
+  --seki-font-normal: 400;
+  --seki-font-medium: 500;
+  --seki-font-semibold: 600;
+  --seki-font-bold: 700;
+
+  /* Line Heights */
+  --seki-leading-tight: 1.25;
+  --seki-leading-normal: 1.5;
+  --seki-leading-relaxed: 1.75;
+}
+
+/**
+ * SekiUI Design Tokens - Border Radius
+ * Four-level radius system
+ */
+
+:host {
+  /* Border Radius Levels */
+  --seki-radius-sm: 0.25rem;   /* 4px */
+  --seki-radius-md: 0.375rem;  /* 6px */
+  --seki-radius-lg: 0.5rem;    /* 8px */
+  --seki-radius-xl: 1rem;      /* 16px */
+}
+
+
+
+/* Card Component Design Tokens & Styles */
+
+/* ============================================
+   Design Tokens - Light Mode (Default)
+   ============================================ */
+
+:host {
+  --seki-card-background: #ffffff;
+  --seki-card-border: #e5e7eb;
+  --seki-card-text-color: #1f2937;
+  --seki-card-text-secondary: #6b7280;
+  --seki-card-padding: clamp(0.75rem, 4vw, 1.5rem);
+  --seki-card-border-radius: 0.5rem;
+  --seki-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --seki-card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --seki-card-header-padding: clamp(0.75rem, 4vw, 1.5rem);
+  --seki-card-content-padding: clamp(0.75rem, 4vw, 1.5rem);
+  --seki-card-footer-padding: clamp(0.75rem, 4vw, 1.5rem);
+  --seki-card-title-font-size: 1.5rem;
+  --seki-card-title-font-weight: 600;
+  --seki-card-title-color: var(--seki-card-text-color);
+  --seki-card-description-font-size: 0.875rem;
+  --seki-card-description-color: var(--seki-card-text-secondary);
+}
+
+/* ============================================
+   Dark Mode
+   ============================================ */
+
+:host([data-theme='dark']),
+:host-context([data-theme='dark']) {
+  --seki-card-background: #1f2937;
+  --seki-card-border: #374151;
+  --seki-card-text-color: #f3f4f6;
+  --seki-card-text-secondary: #d1d5db;
+}
+
+/* ============================================
+   Card Component Styles
+   ============================================ */
+
+section {
+  background: var(--seki-card-background);
+  border: 1px solid var(--seki-card-border);
+  border-radius: var(--seki-card-border-radius);
+  padding: var(--seki-card-padding);
+  box-shadow: var(--seki-card-shadow);
+  color: var(--seki-card-text-color);
+  font-family: var(--seki-font-sans);
+  font-size: var(--seki-text-base);
+  line-height: var(--seki-leading-relaxed);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ============================================
+   CardHeader Styles
+   ============================================ */
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-bottom: var(--seki-card-header-padding);
+  border-bottom: 1px solid var(--seki-card-border);
+  margin: calc(var(--seki-card-padding) * -1);
+  margin-bottom: var(--seki-card-padding);
+  padding: var(--seki-card-header-padding);
+}
+
+header.card-header {
+  border-bottom: 1px solid var(--seki-card-border);
+  margin: 0;
+  padding: 0 0 var(--seki-card-header-padding) 0;
+}
+
+/* ============================================
+   CardTitle Styles
+   ============================================ */
+
+h1.card-title,
+h2.card-title,
+h3.card-title,
+h4.card-title,
+h5.card-title,
+h6.card-title {
+  font-family: var(--seki-font-sans);
+  font-size: var(--seki-card-title-font-size);
+  font-weight: var(--seki-card-title-font-weight);
+  color: var(--seki-card-title-color);
+  margin: 0;
+  line-height: var(--seki-leading-tight);
+  flex: 1;
+}
+
+h1.card-title {
+  font-size: 2rem;
+}
+
+h2.card-title {
+  font-size: 1.5rem;
+}
+
+h3.card-title {
+  font-size: 1.25rem;
+}
+
+h4.card-title {
+  font-size: 1.125rem;
+}
+
+h5.card-title {
+  font-size: 1rem;
+}
+
+h6.card-title {
+  font-size: 0.875rem;
+}
+
+/* ============================================
+   CardDescription Styles
+   ============================================ */
+
+p.card-description {
+  font-family: var(--seki-font-sans);
+  font-size: var(--seki-card-description-font-size);
+  color: var(--seki-card-description-color);
+  margin: 0.5rem 0 0 0;
+  line-height: var(--seki-leading-relaxed);
+}
+
+/* ============================================
+   CardContent Styles
+   ============================================ */
+
+div.card-content {
+  padding: var(--seki-card-content-padding) 0;
+  color: var(--seki-card-text-color);
+}
+
+/* ============================================
+   CardFooter Styles
+   ============================================ */
+
+footer.card-footer {
+  display: flex;
+  gap: 0.5rem;
+  padding-top: var(--seki-card-footer-padding);
+  border-top: 1px solid var(--seki-card-border);
+  margin: 0;
+  justify-content: flex-start;
+}
+
+footer.card-footer[style*='justify-content'] {
+  /* Allows inline style to override */
+}
+
+/* ============================================
+   CardAction Styles
+   ============================================ */
+
+div.card-action {
+  display: flex;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+
+/* ============================================
+   Responsive Behavior
+   ============================================ */
+
+/* Mobile optimizations */
+@media (max-width: 640px) {
+  :host {
+    --seki-card-padding: clamp(0.75rem, 2vw, 1.5rem);
+    --seki-card-header-padding: clamp(0.75rem, 2vw, 1.5rem);
+    --seki-card-content-padding: clamp(0.75rem, 2vw, 1.5rem);
+    --seki-card-footer-padding: clamp(0.75rem, 2vw, 1.5rem);
+  }
+
+  header.card-header {
+    flex-wrap: wrap;
+  }
+}
+
+/* Tablet optimizations */
+@media (min-width: 641px) and (max-width: 1024px) {
+  :host {
+    --seki-card-padding: clamp(1rem, 3vw, 1.5rem);
+  }
+}
+
+/* Desktop optimizations */
+@media (min-width: 1025px) {
+  :host {
+    --seki-card-padding: 1.5rem;
+  }
+}
+
+/* ============================================
+   Focus & Hover States
+   ============================================ */
+
+section:focus-within {
+  box-shadow: var(--seki-card-shadow-hover);
+}
+
+/* ============================================
+   Utilities
+   ============================================ */
+
+/* Preserve slot content spacing */
+::slotted(*:first-child) {
+  margin-top: 0;
+}
+
+::slotted(*:last-child) {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,72 @@
+import { h } from "@stencil/core";
+/**
+ * Flexible container for organizing related content with optional header,
+ * content, and footer sections. Composition-based using subcomponents.
+ *
+ * @example
+ * <seki-card>
+ *   <seki-card-header>
+ *     <seki-card-title>Title</seki-card-title>
+ *   </seki-card-header>
+ *   <seki-card-content>Content here</seki-card-content>
+ * </seki-card>
+ */
+export class Card {
+    render() {
+        return (h("section", { key: 'aad54a1896d99e1e0420b27e39d27a128a50a3cc', class: this.class }, h("slot", { key: 'c7de90a03488abb919e7bc67c2f4d40a3edcec56' })));
+    }
+    static get is() { return "seki-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional CSS class for custom styling hooks"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            },
+            "dataTestid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional data attribute for testing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data-testid"
+            }
+        };
+    }
+}

package/dist/collection/components/field/seki-field.js

@@ -32,7 +32,7 @@ export class SekiField {
     }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        return (h(Host, { key: '7d408fdb23512ed73f2e3b824323299259a9f54e', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: 'ed41345dd9f4a215348ada06e18963b0636ff39b', class: "field" }, h("div", { key: '3c47939088ff6daa0b6764e67e041ebfbaae3fe5', class: "field-label" }, h("slot", { key: 'ab1f28345bdf3daf232b0336f2e2dad8e86a4e0d', name: "label" })), h("div", { key: 'f51416218c47263b93401596de55d4dc97a448a3', class: "field-control" }, h("slot", { key: '890e240b0977bea0749f61799d93921404ff1c60' })), h("div", { key: '10c7383951a8c011d1c1453c52ed90009774d1cc', class: "field-description" }, h("slot", { key: 'b704d490e0299e8c9e5a48b8710024d0940cc63f', name: "description" })), h("div", { key: '3e474168ee78566198a27677ddbc489b953cea3e', class: "field-error" }, h("slot", { key: '8bd880c75f7c5044d3c27651bca268b54a42f3df', name: "error" })))));
+        return (h(Host, { key: '4d4811ebe41e0ac3103d3c2e6057679556d9ea8f', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: 'de3078e15975b74d5daf8a898906eac941859a28', class: "field" }, h("div", { key: '654fa59185f2e28a41ac17b41f3bccbeeddeaeeb', class: "field-label" }, h("slot", { key: '0e5d795106bcbd6741894d384c2458bd5835c9f2', name: "label" })), h("div", { key: '9389fbfe76438bfc9de827608369463415cfe813', class: "field-control" }, h("slot", { key: 'df767c630d1c5d74a70e602106280af19359becd' })), h("div", { key: '9c1f633ffd2baddfc3a35218a2c6556bdc2408e3', class: "field-description" }, h("slot", { key: 'b25d944acc695145a7aac0df0e0ea9ba229c950d', name: "description" })), h("div", { key: 'e620012a73cffa6e7e555d43f48c3f2dddf0e84b', class: "field-error" }, h("slot", { key: 'e09a83a71f180f74e981333f9516c6652e8e1751', name: "error" })))));
     }
     static get is() { return "seki-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-description/seki-field-description.js

@@ -29,7 +29,7 @@ export class SekiFieldDescription {
         return this.componentId;
     }
     render() {
-        return (h("div", { key: '944a6268efe02b6b69725daf7503a9bcf8482f94', id: this.componentId, class: "description" }, h("slot", { key: '900d5afcf9662fe2e8f32acf55b21823389dbb59' })));
+        return (h("div", { key: 'fa1459a08d5673e513a473af92095034c1c44652', id: this.componentId, class: "description" }, h("slot", { key: '51b19301a0d3a89e7b02eff97f4995765e918f2c' })));
     }
     static get is() { return "seki-field-description"; }
     static get encapsulation() { return "shadow"; }