osi-cards-lib 1.5.30 → 1.5.32

package/styles/_osi-cards-tokens.scss

@@ -1,333 +0,0 @@
-/**
- * OSI Cards Design Tokens
- * Single Source of Truth for all design tokens
- *
- * Usage:
- * @use 'osi-cards-tokens' as tokens;
- *
- * .my-component {
- *   color: var(--osi-text-primary);
- *   padding: var(--osi-spacing-md);
- * }
- */
-
-// ============================================================================
-// COLOR PALETTE
-// ============================================================================
-
-:root {
-  // Primary Colors
-  --osi-primary-50: #fef4f2;
-  --osi-primary-100: #fee5e2;
-  --osi-primary-200: #fdd0c8;
-  --osi-primary-300: #fbb0a3;
-  --osi-primary-400: #f78370;
-  --osi-primary-500: #ec5a45;
-  --osi-primary-600: #d93e27;
-  --osi-primary-700: #b6311d;
-  --osi-primary-800: #972c1c;
-  --osi-primary-900: #7d2a1d;
-
-  // Neutral Colors
-  --osi-neutral-50: #f8fafc;
-  --osi-neutral-100: #f1f5f9;
-  --osi-neutral-200: #e2e8f0;
-  --osi-neutral-300: #cbd5e1;
-  --osi-neutral-400: #94a3b8;
-  --osi-neutral-500: #64748b;
-  --osi-neutral-600: #475569;
-  --osi-neutral-700: #334155;
-  --osi-neutral-800: #1e293b;
-  --osi-neutral-900: #0f172a;
-
-  // Semantic Colors
-  --osi-success-50: #f0fdf4;
-  --osi-success-500: #22c55e;
-  --osi-success-700: #15803d;
-
-  --osi-warning-50: #fffbeb;
-  --osi-warning-500: #f59e0b;
-  --osi-warning-700: #b45309;
-
-  --osi-error-50: #fef2f2;
-  --osi-error-500: #ef4444;
-  --osi-error-700: #b91c1c;
-
-  --osi-info-50: #eff6ff;
-  --osi-info-500: #3b82f6;
-  --osi-info-700: #1d4ed8;
-}
-
-// ============================================================================
-// TYPOGRAPHY
-// ============================================================================
-
-:root {
-  // Font Families
-  --osi-font-sans:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --osi-font-mono: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-  // Font Sizes - COMPACT MODE (reduced by ~10-15%)
-  --osi-text-xs: 0.625rem; // 10px (was 12px)
-  --osi-text-sm: 0.8125rem; // 13px (was 14px)
-  --osi-text-base: 0.9375rem; // 15px (was 16px)
-  --osi-text-lg: 1.0625rem; // 17px (was 18px)
-  --osi-text-xl: 1.1875rem; // 19px (was 20px)
-  --osi-text-2xl: 1.375rem; // 22px (was 24px)
-  --osi-text-3xl: 1.75rem; // 28px (was 30px)
-  --osi-text-4xl: 2.125rem; // 34px (was 36px)
-
-  // Line Heights
-  --osi-leading-tight: 1.25;
-  --osi-leading-snug: 1.375;
-  --osi-leading-normal: 1.5;
-  --osi-leading-relaxed: 1.625;
-
-  // Font Weights
-  --osi-font-normal: 400;
-  --osi-font-medium: 500;
-  --osi-font-semibold: 600;
-  --osi-font-bold: 700;
-}
-
-// ============================================================================
-// SPACING
-// ============================================================================
-
-:root {
-  --osi-spacing-0: 0;
-  --osi-spacing-px: 1px;
-  --osi-spacing-0_5: 0.125rem; // 2px
-  --osi-spacing-1: 0.25rem; // 4px
-  --osi-spacing-1_5: 0.375rem; // 6px
-  --osi-spacing-2: 0.5rem; // 8px
-  --osi-spacing-2_5: 0.625rem; // 10px
-  --osi-spacing-3: 0.75rem; // 12px
-  --osi-spacing-3_5: 0.875rem; // 14px
-  --osi-spacing-4: 1rem; // 16px
-  --osi-spacing-5: 1.25rem; // 20px
-  --osi-spacing-6: 1.5rem; // 24px
-  --osi-spacing-7: 1.75rem; // 28px
-  --osi-spacing-8: 2rem; // 32px
-  --osi-spacing-9: 2.25rem; // 36px
-  --osi-spacing-10: 2.5rem; // 40px
-  --osi-spacing-12: 3rem; // 48px
-  --osi-spacing-14: 3.5rem; // 56px
-  --osi-spacing-16: 4rem; // 64px
-  --osi-spacing-20: 5rem; // 80px
-  --osi-spacing-24: 6rem; // 96px
-
-  // Semantic spacing aliases (DEFAULT)
-  --osi-spacing-xs: var(--osi-spacing-1);
-  --osi-spacing-sm: var(--osi-spacing-2);
-  --osi-spacing-md: var(--osi-spacing-4);
-  --osi-spacing-lg: var(--osi-spacing-6);
-  --osi-spacing-xl: var(--osi-spacing-8);
-  --osi-spacing-2xl: var(--osi-spacing-12);
-
-  // COMPACT MODE - Reduced spacing (25-30% smaller)
-  --osi-spacing-compact-xs: var(--osi-spacing-0_5); // 2px (was 4px)
-  --osi-spacing-compact-sm: var(--osi-spacing-1_5); // 6px (was 8px)
-  --osi-spacing-compact-md: var(--osi-spacing-3); // 12px (was 16px)
-  --osi-spacing-compact-lg: var(--osi-spacing-4); // 16px (was 24px)
-  --osi-spacing-compact-xl: var(--osi-spacing-6); // 24px (was 32px)
-  --osi-spacing-compact-2xl: var(--osi-spacing-8); // 32px (was 48px)
-}
-
-// ============================================================================
-// BORDERS & RADIUS
-// ============================================================================
-
-:root {
-  // Border Radius
-  --osi-radius-none: 0;
-  --osi-radius-sm: 0.125rem; // 2px
-  --osi-radius-default: 0.25rem; // 4px
-  --osi-radius-md: 0.375rem; // 6px
-  --osi-radius-lg: 0.5rem; // 8px
-  --osi-radius-xl: 0.75rem; // 12px
-  --osi-radius-2xl: 1rem; // 16px
-  --osi-radius-3xl: 1.5rem; // 24px
-  --osi-radius-full: 9999px;
-
-  // Border Widths
-  --osi-border-0: 0;
-  --osi-border-1: 1px;
-  --osi-border-2: 2px;
-  --osi-border-4: 4px;
-  --osi-border-8: 8px;
-}
-
-// ============================================================================
-// SHADOWS
-// ============================================================================
-
-:root {
-  --osi-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --osi-shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --osi-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --osi-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --osi-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --osi-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --osi-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --osi-shadow-none: 0 0 #0000;
-}
-
-// ============================================================================
-// ANIMATIONS
-// ============================================================================
-
-:root {
-  // Durations
-  --osi-duration-75: 75ms;
-  --osi-duration-100: 100ms;
-  --osi-duration-150: 150ms;
-  --osi-duration-200: 200ms;
-  --osi-duration-300: 300ms;
-  --osi-duration-500: 500ms;
-  --osi-duration-700: 700ms;
-  --osi-duration-1000: 1000ms;
-
-  // Timing Functions
-  --osi-ease-linear: linear;
-  --osi-ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --osi-ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --osi-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --osi-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-// ============================================================================
-// Z-INDEX
-// ============================================================================
-
-:root {
-  --osi-z-0: 0;
-  --osi-z-10: 10;
-  --osi-z-20: 20;
-  --osi-z-30: 30;
-  --osi-z-40: 40;
-  --osi-z-50: 50;
-  --osi-z-auto: auto;
-
-  // Semantic z-index
-  --osi-z-dropdown: 1000;
-  --osi-z-sticky: 1020;
-  --osi-z-fixed: 1030;
-  --osi-z-modal-backdrop: 1040;
-  --osi-z-modal: 1050;
-  --osi-z-popover: 1060;
-  --osi-z-tooltip: 1070;
-}
-
-// ============================================================================
-// COMPONENT TOKENS
-// ============================================================================
-
-:root {
-  // Card tokens
-  --osi-card-bg: white;
-  --osi-card-border: var(--osi-neutral-200);
-  --osi-card-radius: var(--osi-radius-xl);
-  --osi-card-shadow: var(--osi-shadow-md);
-  --osi-card-padding: var(--osi-spacing-4);
-
-  // Section tokens
-  --osi-section-gap: var(--osi-spacing-3);
-  --osi-section-header-color: var(--osi-neutral-800);
-  --osi-section-content-color: var(--osi-neutral-600);
-
-  // Field tokens
-  --osi-field-label-color: var(--osi-neutral-500);
-  --osi-field-value-color: var(--osi-neutral-900);
-  --osi-field-gap: var(--osi-spacing-1);
-
-  // Grid tokens
-  --osi-grid-columns: 12;
-  --osi-grid-gap: var(--osi-spacing-4);
-  --osi-grid-min-column: 200px;
-
-  // Button tokens
-  --osi-btn-padding-x: var(--osi-spacing-4);
-  --osi-btn-padding-y: var(--osi-spacing-2);
-  --osi-btn-radius: var(--osi-radius-md);
-  --osi-btn-font-size: var(--osi-text-sm);
-  --osi-btn-font-weight: var(--osi-font-medium);
-}
-
-// ============================================================================
-// THEME-SPECIFIC TOKENS (Light)
-// ============================================================================
-
-:root,
-[data-theme="light"] {
-  --osi-bg-primary: white;
-  --osi-bg-secondary: var(--osi-neutral-50);
-  --osi-bg-tertiary: var(--osi-neutral-100);
-
-  --osi-text-primary: var(--osi-neutral-900);
-  --osi-text-secondary: var(--osi-neutral-600);
-  --osi-text-tertiary: var(--osi-neutral-400);
-  --osi-text-inverse: white;
-
-  --osi-border-default: var(--osi-neutral-200);
-  --osi-border-strong: var(--osi-neutral-300);
-}
-
-// ============================================================================
-// THEME-SPECIFIC TOKENS (Dark)
-// ============================================================================
-
-[data-theme="dark"] {
-  --osi-bg-primary: var(--osi-neutral-900);
-  --osi-bg-secondary: var(--osi-neutral-800);
-  --osi-bg-tertiary: var(--osi-neutral-700);
-
-  --osi-text-primary: var(--osi-neutral-50);
-  --osi-text-secondary: var(--osi-neutral-300);
-  --osi-text-tertiary: var(--osi-neutral-500);
-  --osi-text-inverse: var(--osi-neutral-900);
-
-  --osi-border-default: var(--osi-neutral-700);
-  --osi-border-strong: var(--osi-neutral-600);
-
-  // Override card tokens for dark
-  --osi-card-bg: var(--osi-neutral-800);
-  --osi-card-border: var(--osi-neutral-700);
-
-  // Override section tokens
-  --osi-section-header-color: var(--osi-neutral-100);
-  --osi-section-content-color: var(--osi-neutral-300);
-
-  // Override field tokens
-  --osi-field-label-color: var(--osi-neutral-400);
-  --osi-field-value-color: var(--osi-neutral-100);
-}
-
-// ============================================================================
-// PRINT STYLES
-// ============================================================================
-
-@media print {
-  :root {
-    --osi-card-shadow: none;
-    --osi-card-border: var(--osi-neutral-300);
-  }
-}
-
-// ============================================================================
-// REDUCED MOTION
-// ============================================================================
-
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --osi-duration-75: 0ms;
-    --osi-duration-100: 0ms;
-    --osi-duration-150: 0ms;
-    --osi-duration-200: 0ms;
-    --osi-duration-300: 0ms;
-    --osi-duration-500: 0ms;
-    --osi-duration-700: 0ms;
-    --osi-duration-1000: 0ms;
-  }
-}

package/styles/_styles-scoped.scss

@@ -1,81 +0,0 @@
-/* ===================================================================
-   OSI CARDS STYLES - Scoped Integration Entry Point
-
-   Wraps all styles in .osi-cards-container to prevent CSS leakage.
-   Uses same CSS variables as demo app, just scoped to container.
-
-   CSS Layer Strategy:
-     - All library styles are in the 'osi-cards' layer
-     - Consumer styles outside this layer have higher priority
-     - Easy to override: just write your CSS normally, no !important needed
-
-   Usage:
-     1. Import this file in your styles or angular.json
-     2. Wrap your OSI Cards components in <div class="osi-cards-container">
-
-   Example:
-     <div class="osi-cards-container" data-theme="day">
-       <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
-     </div>
-
-   Overriding styles:
-     // Your styles (outside @layer) automatically override library styles
-     .osi-cards-container .ai-card-title {
-       font-size: 2rem; // This will override library default
-     }
-   =================================================================== */
-
-/* Declare the layer first for proper cascade ordering */
-@layer osi-cards;
-
-/* All library styles go in the osi-cards layer */
-@layer osi-cards {
-  .osi-cards-container {
-    // Container base styles - transparent with 8px padding
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 8px;
-    background: transparent !important;
-    background-color: transparent !important;
-
-    // Preserve 3D transforms for tilt effects
-    perspective: 1200px;
-    transform-style: preserve-3d;
-
-    // Responsive: reduce padding on mobile
-    @media (max-width: 480px) {
-      padding: 4px;
-    }
-
-    // Bootstrap isolation - must come first to reset external Bootstrap variables
-    @import "core/bootstrap-reset";
-
-    // Scoped variables (applies tokens to & selector)
-    @import "core/variables-unified";
-
-    // Core styles (scoped versions where needed)
-    @import "core/mixins";
-    @import "core/surface-layers";
-    @import "core/global-unified";
-    @import "core/utilities";
-    @import "core/animations";
-
-    // Layout styles
-    @import "layout/tilt";
-    @import "layout/masonry";
-    @import "layout/feature-grid";
-
-    // Streaming effects (must come after animations)
-    @import "components/streaming-effects";
-
-    // Hero card and feature card styles
-    @import "components/hero-card";
-
-    // Component styles (SAME files as demo app)
-    @import "components/cards/ai-card";
-
-    // All section styles (consolidated)
-    @import "components/sections/sections-all";
-  }
-}

package/styles/_styles.scss

@@ -1,26 +0,0 @@
-/* ===================================================================
-   OSI CARDS STYLES - Demo App Entry Point
-   
-   For use in the demo/documentation app. Applies styles to :root.
-   Imports shared component bundle after setting up variables.
-   
-   CSS Layer Strategy:
-     - All library styles are in the 'osi-cards' layer
-     - Consumer styles outside this layer have higher priority
-     
-   Note: Using @import inside @layer as @use cannot be used in @layer blocks.
-   The Sass @import deprecation warnings can be safely ignored until
-   Dart Sass 3.0.0 when migration will be required.
-   =================================================================== */
-
-/* Declare the layer first for proper cascade ordering */
-@layer osi-cards;
-
-/* All library styles go in the osi-cards layer */
-@layer osi-cards {
-  // Core variables (applies to :root)
-  @import "core/variables";
-
-  // Shared component styles
-  @import "components";
-}

package/styles/bundles/_ai-card.scss

@@ -1,245 +0,0 @@
-// ============================================
-// AI CARD COMPONENT BUNDLE
-// ============================================
-//
-// Self-contained bundle for the AI Card Renderer component.
-// Includes all styles needed to render AI cards with any section type.
-//
-// Usage in Shadow DOM component:
-//   @use 'osi-cards-lib/styles/bundles/ai-card';
-//
-// ============================================
-
-// 1. Master tokens (single source of truth)
-@use "../tokens/master" as *;
-
-// 2. Shadow DOM reset (full isolation)
-@use "../reset/shadow-reset";
-
-// 3. Generate CSS custom properties
-// Use "demo" mode to match demo app appearance exactly
-:host {
-  @include osi-theme-base("demo", true);
-  @include osi-tokens("demo", true);
-
-  // Block display - let content determine height
-  display: block;
-  width: 100%;
-  min-height: 0; // Allow flex children to shrink
-}
-
-// Primary: Use :host([data-theme]) for explicit Shadow DOM scope (most reliable)
-// Fallback: :host-context for cases where parent sets data-theme
-:host([data-theme="night"]) {
-  @include osi-theme-dark("demo", true);
-}
-
-:host([data-theme="day"]) {
-  @include osi-theme-light("demo", true);
-}
-
-// Fallback: Support parent context (for backward compatibility)
-// Note: Safari may have inconsistent :host-context behavior, so :host([data-theme]) is preferred
-:host-context([data-theme="night"]) {
-  @include osi-theme-dark("demo", true);
-}
-
-:host-context([data-theme="day"]) {
-  @include osi-theme-light("demo", true);
-}
-
-// 4. Core styles required for AI card
-@import "../core/mixins";
-@import "../core/surface-layers";
-@import "../core/utilities";
-
-// 4a. Animations (keyframes + utility classes)
-@import "../core/animations";
-
-// 5. Layout
-@import "../layout/tilt";
-@import "../layout/masonry";
-@import "../layout/feature-grid";
-
-// 5a. Hero card styles
-@import "../components/hero-card";
-
-// 5b. Streaming effects
-@import "../components/streaming-effects";
-
-// 5c. Component styles for ViewEncapsulation.None components
-// (masonry-grid, section-renderer, card-actions, card-streaming-indicator, etc.)
-@import "../components/_component-styles";
-
-// 6. AI Card specific styles
-@import "../components/cards/ai-card";
-@import "../components/_empty-state";
-
-// 6a. Utility classes (w-full, h-full, flex-1, min-h-0, etc.)
-@import "../components/sections/_utility-classes";
-
-// 7. Section Styles (consolidated)
-// Design system + sections base + section shell + all section types
-@import "../components/sections/sections-all";
-
-// 7a. Additional design tokens for Shadow DOM
-// Convert :root selectors to :host for Shadow DOM compatibility
-:host {
-  // Spacing scale
-  --spacing-none: 0;
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 12px;
-  --spacing-base: 16px;
-  --spacing-lg: 20px;
-  --spacing-xl: 28px;
-  --spacing-2xl: 40px;
-  --spacing-3xl: 56px;
-
-  // Compact mode variations
-  --spacing-compact-xs: 3px;
-  --spacing-compact-sm: 6px;
-  --spacing-compact-md: 9px;
-  --spacing-compact-base: 12px;
-  --spacing-compact-lg: 16px;
-
-  // Section-specific sizing
-  --section-card-min-height: 110px;
-  --section-card-compact-height: 90px;
-  --section-header-gap: var(--spacing-md);
-  --section-content-gap: var(--spacing-sm);
-  --section-card-gap: var(--spacing-md);
-  --section-card-padding: var(--spacing-md);
-
-  // Typography
-  --text-md: 0.875rem;
-  --font-light: 300;
-  --font-normal: 400;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-  --font-extrabold: 800;
-  --leading-tight: 1.2;
-  --leading-snug: 1.3;
-  --leading-normal: 1.4;
-  --leading-relaxed: 1.5;
-  --leading-loose: 1.75;
-}
-
-// 8. Component-specific optimizations (from demo app)
-// Register CSS custom properties for browser-native interpolation
-@supports (background: paint(id)) {
-  @property --tilt-x {
-    syntax: "<angle>";
-    initial-value: 0deg;
-    inherits: false;
-  }
-  @property --tilt-y {
-    syntax: "<angle>";
-    initial-value: 0deg;
-    inherits: false;
-  }
-  @property --glow-blur {
-    syntax: "<length>";
-    initial-value: 8px;
-    inherits: false;
-  }
-  @property --glow-color {
-    syntax: "<color>";
-    initial-value: rgba(255, 121, 0, 0.225);
-    inherits: false;
-  }
-  @property --reflection-opacity {
-    syntax: "<number>";
-    initial-value: 0;
-    inherits: false;
-  }
-}
-
-// Card container wrapper - CSS containment for performance
-.card-container-wrapper {
-  contain: layout style;
-}
-
-// Note: Tilt and glow container styles are already included from _tilt.scss import above
-// The tilt effect should work automatically via the tilt-container class
-
-// Card surface styles - matching demo app exactly
-// These ensure the card has proper background and border in Shadow DOM
-// Theme-aware: uses CSS variables but with fallbacks for night theme
-.ai-card-surface {
-  // Use theme variables, but ensure they're applied with proper specificity
-  // The theme mixins set these, but we need to ensure they're not overridden
-  border: var(--osi-card-border, 1px solid rgba(255, 255, 255, 0.08)) !important;
-  background: var(--osi-card-background, rgba(20, 20, 20, 0.6)) !important;
-  backdrop-filter: var(--osi-card-backdrop-filter, blur(12px)) !important;
-  -webkit-backdrop-filter: var(--osi-card-backdrop-filter, blur(12px)) !important;
-  box-shadow: var(--osi-card-shadow, 0 4px 24px -1px rgba(0, 0, 0, 0.2)) !important;
-  transition: var(--osi-card-transition-border, all 0.4s cubic-bezier(0.4, 0, 0.2, 1)) !important;
-}
-
-.ai-card-surface:hover {
-  border: var(--osi-card-border-hover, 1px solid rgba(255, 121, 0, 0.5)) !important;
-  background: var(--osi-card-background-hover, rgba(30, 30, 30, 0.8)) !important;
-  box-shadow: var(--osi-card-shadow-hover, 0 20px 40px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 121, 0, 0.2)) !important;
-}
-
-// Section highlight animation for URL fragment scrolling
-.section-highlight {
-  animation: section-pulse 2s ease-out;
-  position: relative;
-}
-
-.section-highlight::after {
-  content: "";
-  position: absolute;
-  inset: -4px;
-  border: 2px solid rgba(255, 121, 0, 0.6);
-  border-radius: 14px;
-  pointer-events: none;
-  animation: section-border-fade 2s ease-out forwards;
-}
-
-@keyframes section-pulse {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.01);
-  }
-}
-
-@keyframes section-border-fade {
-  0% {
-    opacity: 1;
-    box-shadow: 0 0 20px rgba(255, 121, 0, 0.4);
-  }
-  100% {
-    opacity: 0;
-    box-shadow: 0 0 0 rgba(255, 121, 0, 0);
-  }
-}
-
-// 10. Action buttons and footer (enforced styles for Shadow DOM)
-@import "../components/card-actions";
-@import "../components/card-footer";
-
-// 11. Accessibility support
-@media (prefers-reduced-motion: reduce) {
-  :host {
-    @include osi-tokens-reduced-motion();
-  }
-}
-
-@media (prefers-contrast: high) {
-  :host {
-    @include osi-tokens-high-contrast();
-  }
-}
-
-@media (forced-colors: active) {
-  :host {
-    @include osi-tokens-forced-colors();
-  }
-}