osi-cards-lib 1.5.30 → 1.5.32

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

@@ -1,104 +0,0 @@
-/* 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

@@ -1,317 +0,0 @@
-/**
- * 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

@@ -1,169 +0,0 @@
-// ============================================
-// 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

@@ -1,47 +0,0 @@
-// ============================================
-// 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;
-}