osi-cards-lib 1.5.32 → 1.5.34

package/styles/components/_ai-card-renderer.scss

@@ -0,0 +1,104 @@
+/* Card renderer container and async states */
+
+.ai-card-container {
+  position: relative;
+  max-width: 920px;
+  margin: 0 auto;
+  padding: 24px;
+  background: linear-gradient(180deg, var(--card-background) 0%, rgba(12, 12, 12, 0) 100%);
+  border-radius: 24px;
+  box-shadow:
+    inset 0 1px 3px rgba(255, 121, 0, 0.08),
+    0 4px 20px rgba(0, 0, 0, 0.15);
+
+  /* CSS Isolation - Prevent Bootstrap styles from affecting card container */
+  isolation: isolate;
+}
+
+/* Card preview body improvements */
+.preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6xl);
+  padding: var(--spacing-6xl) 0;
+}
+
+/* Section spacing improvements - using CSS variables */
+.ai-section + .ai-section {
+  margin-top: 0; /* Spacing controlled by margin-bottom on .ai-section */
+}
+
+/* Card grid improvements - using centralized gaps */
+.contact-collection,
+/* Remove forced large gaps - sections now control their own spacing */
+.info-grid,
+.analytics-metrics,
+.list-stack,
+.network-collection {
+  gap: var(--spacing-4xl) !important;
+}
+
+/* Overview grid uses compact spacing defined in _overview.scss */
+
+/* Global card styling enforced via variables - remove !important overrides */
+/* All cards now inherit from centralized --card-* variables */
+
+.ai-card-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 10;
+  border-radius: 24px;
+  backdrop-filter: blur(4px);
+}
+
+.ai-card-error {
+  padding: 18px 20px;
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
+  color: rgba(239, 68, 68, 0.95);
+  border-radius: 14px;
+  margin-bottom: 20px;
+  border: 1px solid rgba(239, 68, 68, 0.35);
+  border-left: 4px solid rgba(239, 68, 68, 0.7);
+  font-weight: 600;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.12);
+  transition: all 0.25s ease;
+}
+
+.ai-card-error:hover {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22) 0%, rgba(239, 68, 68, 0.08) 100%);
+  border-color: rgba(239, 68, 68, 0.5);
+  transform: translateX(4px);
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+  .ai-card-container {
+    padding: 16px;
+    border-radius: 20px;
+  }
+
+  .preview-body {
+    gap: 16px;
+    padding: 16px 0;
+  }
+
+  .ai-section + .ai-section {
+    margin-top: 0; /* Spacing controlled by margin-bottom */
+  }
+
+  .contact-card,
+  .info-card,
+  .metric-card,
+  .list-card {
+    padding: 14px 16px !important;
+  }
+}

package/styles/components/_badges.scss

@@ -0,0 +1,317 @@
+/**
+ * Unified Badge Component System
+ * ============================================================================
+ * Standardized badge styling across all sections and card types.
+ * Replaces multiple inconsistent badge patterns with unified design.
+ * 
+ * Design Spec:
+ * - Height: ~20-22px (auto with padding)
+ * - Padding: 4px 8px (vertical horizontal)
+ * - Border radius: 4px (--radius-sm)
+ * - Font size: 10px (0.625rem)
+ * - Font weight: 600 (semibold)
+ * - Text transform: uppercase
+ * - Letter spacing: 0.05em
+ */
+
+/* ===== BASE BADGE COMPONENT ===== */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  font-size: 0.625rem; /* 10px */
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  line-height: 1.2;
+  white-space: nowrap;
+  transition: var(--hover-transition);
+  cursor: default;
+  user-select: none;
+
+  /* Default variant (primary/orange) */
+  background: var(--badge-bg-primary);
+  border: 1px solid var(--color-orange-border);
+  color: var(--color-orange-solid);
+
+  /* Icon inside badge */
+  lucide-icon,
+  svg {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+  }
+}
+
+/* ===== BADGE VARIANTS ===== */
+
+/* Success - Green (completed, active, success states) */
+.badge--success {
+  background: var(--badge-bg-success);
+  border-color: var(--color-success-border);
+  color: var(--color-success-solid);
+
+  lucide-icon,
+  svg {
+    color: var(--color-success-solid);
+  }
+}
+
+/* Warning - Amber/Yellow (pending, in-progress, warning states) */
+.badge--warning {
+  background: var(--badge-bg-warning);
+  border-color: var(--color-warning-border);
+  color: var(--color-warning-solid);
+
+  lucide-icon,
+  svg {
+    color: var(--color-warning-solid);
+  }
+}
+
+/* Error - Red (failed, urgent, error states) */
+.badge--error {
+  background: var(--badge-bg-error);
+  border-color: var(--color-error-border);
+  color: var(--color-error-solid);
+
+  lucide-icon,
+  svg {
+    color: var(--color-error-solid);
+  }
+}
+
+/* Info - Blue (information, notes, details) */
+.badge--info {
+  background: var(--badge-bg-info);
+  border-color: var(--color-info-border);
+  color: var(--color-info-solid);
+
+  lucide-icon,
+  svg {
+    color: var(--color-info-solid);
+  }
+}
+
+/* Primary - Orange (default, highlighted items) */
+.badge--primary {
+  background: var(--badge-bg-primary);
+  border-color: var(--color-orange-border);
+  color: var(--color-orange-solid);
+
+  lucide-icon,
+  svg {
+    color: var(--color-orange-solid);
+  }
+}
+
+/* Neutral - Gray (inactive, disabled, neutral states) */
+.badge--neutral {
+  background: var(--badge-bg-neutral);
+  border-color: var(--color-neutral-border);
+  color: var(--color-neutral-solid);
+
+  lucide-icon,
+  svg {
+    color: var(--color-neutral-solid);
+  }
+}
+
+/* ===== BADGE SIZE VARIANTS ===== */
+
+/* Small badge (more compact) */
+.badge--sm {
+  padding: 2px 6px;
+  font-size: 0.5625rem; /* 9px */
+
+  lucide-icon,
+  svg {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+/* Large badge (more prominent) */
+.badge--lg {
+  padding: 6px 10px;
+  font-size: 0.6875rem; /* 11px */
+
+  lucide-icon,
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+/* ===== BADGE STYLE MODIFIERS ===== */
+
+/* Solid badge (filled background, no border) */
+.badge--solid {
+  border: none;
+  font-weight: 700;
+
+  &.badge--success {
+    background: var(--color-success-solid);
+    color: var(--color-white);
+  }
+
+  &.badge--warning {
+    background: var(--color-warning-solid);
+    color: var(--color-gray-900);
+  }
+
+  &.badge--error {
+    background: var(--color-error-solid);
+    color: var(--color-white);
+  }
+
+  &.badge--info {
+    background: var(--color-info-solid);
+    color: var(--color-white);
+  }
+
+  &.badge--primary {
+    background: var(--color-orange-solid);
+    color: var(--color-white);
+  }
+
+  &.badge--neutral {
+    background: var(--color-neutral-solid);
+    color: var(--color-white);
+  }
+}
+
+/* Outline badge (no background, border only) */
+.badge--outline {
+  background: transparent;
+  border-width: 1px;
+
+  &.badge--success {
+    border-color: var(--color-success-border);
+    color: var(--color-success-solid);
+  }
+
+  &.badge--warning {
+    border-color: var(--color-warning-border);
+    color: var(--color-warning-solid);
+  }
+
+  &.badge--error {
+    border-color: var(--color-error-border);
+    color: var(--color-error-solid);
+  }
+
+  &.badge--info {
+    border-color: var(--color-info-border);
+    color: var(--color-info-solid);
+  }
+
+  &.badge--primary {
+    border-color: var(--color-orange-border);
+    color: var(--color-orange-solid);
+  }
+
+  &.badge--neutral {
+    border-color: var(--color-neutral-border);
+    color: var(--color-neutral-solid);
+  }
+}
+
+/* ===== INTERACTIVE BADGES ===== */
+
+/* Clickable/interactive badge */
+.badge--interactive {
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--hover-border-color);
+    background: var(--hover-bg-color);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  /* Variant-specific hover states */
+  &.badge--success:hover {
+    border-color: var(--color-success-border);
+    background: color-mix(in srgb, var(--color-success-light) 150%, transparent);
+  }
+
+  &.badge--warning:hover {
+    border-color: var(--color-warning-border);
+    background: color-mix(in srgb, var(--color-warning-light) 150%, transparent);
+  }
+
+  &.badge--error:hover {
+    border-color: var(--color-error-border);
+    background: color-mix(in srgb, var(--color-error-light) 150%, transparent);
+  }
+
+  &.badge--info:hover {
+    border-color: var(--color-info-border);
+    background: color-mix(in srgb, var(--color-info-light) 150%, transparent);
+  }
+}
+
+/* ===== BADGE WITH DOT INDICATOR ===== */
+
+.badge--with-dot {
+  &::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+    flex-shrink: 0;
+  }
+}
+
+/* ===== MOBILE RESPONSIVENESS ===== */
+
+@media (max-width: 768px) {
+  .badge {
+    font-size: 0.5625rem; /* 9px on mobile */
+    padding: 3px 6px;
+
+    lucide-icon,
+    svg {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  .badge--sm {
+    padding: 2px 4px;
+    font-size: 0.5rem; /* 8px */
+  }
+
+  .badge--lg {
+    padding: 4px 8px;
+    font-size: 0.625rem; /* 10px */
+  }
+}
+
+/* ===== UTILITY CLASSES ===== */
+
+/* Badge group container */
+.badge-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+}
+
+/* Badge group with tight spacing */
+.badge-group--tight {
+  gap: var(--spacing-xs);
+}
+
+/* Badge group with loose spacing */
+.badge-group--loose {
+  gap: var(--spacing-lg);
+}

package/styles/components/_card-actions.scss

@@ -0,0 +1,169 @@
+// ============================================
+// CARD ACTIONS - Enforced Button Styles
+// ============================================
+// These styles are included in the Shadow DOM bundle
+// to ensure proper button styling regardless of host app CSS.
+// Buttons are rendered directly without wrapper containers.
+
+// Host component styles
+app-card-actions {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  align-items: center !important;
+  gap: var(--card-element-gap-lg) !important;
+  margin-top: var(--space-3) !important;
+  margin-left: var(--space-1) !important;
+  margin-right: var(--space-1) !important;
+  padding-bottom: var(--osi-card-padding) !important;
+}
+
+// Base Button Styles
+.osi-action-button {
+  // Reset
+  margin: 0 !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+
+  // Layout
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: var(--card-element-gap-md) !important;
+  padding: var(--space-2) var(--space-5) !important;
+
+  // Typography
+  font-family:
+    Helvetica,
+    "Helvetica Neue",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Arial,
+    sans-serif !important;
+  font-size: 0.875rem !important;
+  font-weight: 600 !important;
+  line-height: 1.25rem !important;
+  text-decoration: none !important;
+  white-space: nowrap !important;
+
+  // Interaction
+  cursor: pointer !important;
+
+  // Visual
+  border-radius: var(--radius-md) !important;
+  transition: var(--duration-fast) ease !important;
+  box-sizing: border-box !important;
+}
+
+// Primary Button - Solid Orange Background with WHITE text
+.osi-action-button--primary {
+  background-color: var(--osi-card-action-primary-bg) !important;
+  color: var(--osi-card-action-primary-color) !important;
+  border: none !important;
+  box-shadow: var(--osi-card-action-primary-shadow) !important;
+
+  // Force white text on all child elements
+  * {
+    color: var(--osi-card-action-primary-color) !important;
+  }
+}
+
+.osi-action-button--primary:hover {
+  background-color: var(--osi-card-action-primary-bg-hover) !important;
+  color: var(--osi-card-action-primary-color) !important;
+  box-shadow: var(--osi-card-action-primary-shadow-hover) !important;
+  transform: translateY(calc(var(--motion-distance-xs) * -0.5)) !important;
+}
+
+.osi-action-button--primary:active {
+  background-color: var(--color-brand-dark) !important;
+  color: var(--osi-card-action-primary-color) !important;
+  transform: scale(0.98) translateY(0) !important;
+  box-shadow: var(--osi-card-action-primary-shadow) !important;
+}
+
+.osi-action-button--primary:focus-visible {
+  outline: var(--border-width-accent-sm) solid var(--color-brand) !important;
+  outline-offset: var(--border-width-accent-sm) !important;
+}
+
+// Secondary Button - Orange Border (Outline) with WHITE text
+.osi-action-button--secondary {
+  background-color: transparent !important;
+  color: var(--osi-card-action-secondary-color) !important;
+  border: var(--osi-card-action-secondary-border) !important;
+
+  // Force white text on all child elements
+  * {
+    color: var(--osi-card-action-secondary-color) !important;
+  }
+}
+
+.osi-action-button--secondary:hover {
+  background-color: var(--osi-card-action-secondary-bg-hover) !important;
+  color: var(--osi-card-action-secondary-color) !important;
+  box-shadow: var(--osi-card-action-secondary-shadow-hover) !important;
+}
+
+.osi-action-button--secondary:active {
+  background-color: var(--osi-card-action-secondary-bg-hover) !important;
+  color: var(--osi-card-action-secondary-color) !important;
+  transform: scale(0.98) !important;
+}
+
+.osi-action-button--secondary:focus-visible {
+  outline: var(--border-width-accent-sm) solid var(--color-brand) !important;
+  outline-offset: var(--border-width-accent-sm) !important;
+}
+
+// Button Content Elements - Always white
+.osi-action-button__label {
+  color: inherit !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+}
+
+.osi-action-button__icon {
+  width: var(--icon-sm) !important;
+  height: var(--icon-sm) !important;
+  object-fit: contain !important;
+  flex-shrink: 0 !important;
+}
+
+.osi-action-button__emoji {
+  font-size: var(--icon-sm) !important;
+  line-height: 1 !important;
+  flex-shrink: 0 !important;
+}
+
+// Lucide Icons in Buttons
+.osi-action-button lucide-icon {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex-shrink: 0 !important;
+}
+
+.osi-action-button lucide-icon svg {
+  width: var(--icon-sm) !important;
+  height: var(--icon-sm) !important;
+  stroke: currentColor !important;
+  fill: none !important;
+  stroke-width: var(--border-width-accent-sm) !important;
+  stroke-linecap: round !important;
+  stroke-linejoin: round !important;
+}
+
+// Screen Reader Only (Accessibility)
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}

package/styles/components/_card-footer.scss

@@ -0,0 +1,47 @@
+// ============================================
+// CARD FOOTER - Enforced Signature Styles
+// ============================================
+// These styles are included in the Shadow DOM bundle
+// to ensure proper footer styling regardless of host app CSS.
+
+// Card Signature / "Powered by" Footer
+.card-signature {
+  // Layout
+  display: block !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+
+  // Spacing - No margin above
+  margin: 0 !important;
+  padding: var(--space-3) var(--osi-card-padding) !important;
+
+  // Typography - Small, centered, muted
+  font-family:
+    Helvetica,
+    "Helvetica Neue",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Arial,
+    sans-serif !important;
+  font-size: var(--text-xs) !important;
+  font-weight: 400 !important;
+  line-height: 1.4 !important;
+  letter-spacing: 0.02em !important;
+  text-align: center !important;
+
+  // Color - Muted gray
+  color: var(--muted-foreground) !important;
+
+  // Visual reset
+  background: transparent !important;
+  border: none !important;
+  text-decoration: none !important;
+}
+
+// Dark theme variant - uses theme-aware variable
+:host([data-theme="night"]) .card-signature,
+:host-context([data-theme="night"]) .card-signature {
+  color: var(--muted-foreground) !important;
+}