npm - osi-cards-lib - Versions diffs - 1.5.30 → 1.5.32 - Mend

osi-cards-lib 1.5.30 → 1.5.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/README.md +58 -20
package/package.json +13 -25
package/postcss.config.js +81 -0
package/section-registry.json +3864 -0
package/section-registry.schema.json +264 -0
package/fesm2022/osi-cards-lib.mjs +0 -31878
package/fesm2022/osi-cards-lib.mjs.map +0 -1
package/index.d.ts +0 -11522
package/scripts/setup-angular-styles.js +0 -169
package/styles/_components.scss +0 -38
package/styles/_index.scss +0 -25
package/styles/_osi-cards-mixins.scss +0 -459
package/styles/_osi-cards-tokens.scss +0 -333
package/styles/_styles-scoped.scss +0 -81
package/styles/_styles.scss +0 -26
package/styles/bundles/_ai-card.scss +0 -245
package/styles/bundles/_all.scss +0 -68
package/styles/bundles/_base.scss +0 -60
package/styles/bundles/_card-skeleton.scss +0 -290
package/styles/bundles/_index.scss +0 -25
package/styles/bundles/_sections.scss +0 -48
package/styles/bundles/_tokens-only.scss +0 -139
package/styles/components/_ai-card-renderer.scss +0 -104
package/styles/components/_badges.scss +0 -317
package/styles/components/_card-actions.scss +0 -169
package/styles/components/_card-footer.scss +0 -47
package/styles/components/_component-styles.scss +0 -205
package/styles/components/_empty-state.scss +0 -630
package/styles/components/_hero-card.scss +0 -422
package/styles/components/_image-fallback.scss +0 -28
package/styles/components/_streaming-effects.scss +0 -518
package/styles/components/cards/_ai-card.scss +0 -718
package/styles/components/sections/_all-sections.generated.scss +0 -41
package/styles/components/sections/_all-sections.scss +0 -1086
package/styles/components/sections/_balanced-compact-system.scss +0 -186
package/styles/components/sections/_compact-mixins.scss +0 -180
package/styles/components/sections/_component-mixins.scss +0 -454
package/styles/components/sections/_design-system.scss +0 -477
package/styles/components/sections/_design-tokens.scss +0 -308
package/styles/components/sections/_enhanced-design-variables.scss +0 -147
package/styles/components/sections/_master-compact-system.scss +0 -302
package/styles/components/sections/_master-dense-system.scss +0 -239
package/styles/components/sections/_minimalistic-design.scss +0 -268
package/styles/components/sections/_modern-effects.scss +0 -392
package/styles/components/sections/_modern-sections.scss +0 -351
package/styles/components/sections/_perfect-system.scss +0 -204
package/styles/components/sections/_section-animations.scss +0 -331
package/styles/components/sections/_section-shell.scss +0 -337
package/styles/components/sections/_section-types.generated.scss +0 -30
package/styles/components/sections/_sections-all.scss +0 -26
package/styles/components/sections/_sections-base.scss +0 -334
package/styles/components/sections/_typography-system.scss +0 -327
package/styles/components/sections/_ultra-compact-tokens.scss +0 -375
package/styles/components/sections/_unified-section-style.scss +0 -157
package/styles/components/sections/_utility-classes.scss +0 -567
package/styles/components/sections/_visual-effects-library.scss +0 -374
package/styles/core/_animations.scss +0 -1498
package/styles/core/_bootstrap-reset.scss +0 -445
package/styles/core/_color-helpers.scss +0 -46
package/styles/core/_global-unified.scss +0 -118
package/styles/core/_global.scss +0 -73
package/styles/core/_mixins.scss +0 -491
package/styles/core/_surface-layers.scss +0 -76
package/styles/core/_utilities.scss +0 -326
package/styles/core/_variables-unified.scss +0 -57
package/styles/core/_variables.scss +0 -36
package/styles/core/variables/_colors-source.scss +0 -34
package/styles/core/variables/_colors-unified.scss +0 -26
package/styles/core/variables/_colors.scss +0 -21
package/styles/critical.scss +0 -353
package/styles/design-system/_compact-theme.scss +0 -159
package/styles/design-system/_section-base.scss +0 -426
package/styles/design-system/_tokens.scss +0 -237
package/styles/design-system/_unified-sections.scss +0 -215
package/styles/layout/_feature-grid.scss +0 -322
package/styles/layout/_masonry.scss +0 -734
package/styles/layout/_tilt.scss +0 -244
package/styles/micro-interactions.scss +0 -583
package/styles/mixins/_section-mixins.scss +0 -280
package/styles/non-critical.scss +0 -643
package/styles/reset/_framework-reset.scss +0 -457
package/styles/reset/_index.scss +0 -14
package/styles/reset/_shadow-reset.scss +0 -383
package/styles/responsive.scss +0 -326
package/styles/themes.scss +0 -573
package/styles/tokens/_index.scss +0 -92
package/styles/tokens/_master.scss +0 -1404
package/styles/tokens/_section-tokens.generated.scss +0 -140

package/styles/critical.scss DELETED Viewed

@@ -1,353 +0,0 @@
-/**
- * OSI Cards - Critical CSS
- *
- * This stylesheet contains above-the-fold critical styles that should be
- * inlined or loaded synchronously for optimal First Contentful Paint (FCP).
- *
- * Include these styles in your HTML <head> for best performance:
- *
- * @example
- * ```html
- * <style>
- *   @import 'osi-cards-lib/styles/critical';
- * </style>
- * ```
- *
- * Or inline via build tooling:
- * ```js
- * // In your build config
- * const criticalCSS = require('osi-cards-lib/styles/critical.css');
- * ```
- */
-// =============================================================================
-// CSS CUSTOM PROPERTIES (CRITICAL)
-// =============================================================================
-:root {
-  // Core colors
-  --osi-color-brand: #ff7900;
-  --osi-color-brand-rgb: 255, 121, 0;
-  --osi-color-brand-dark: #e66a00;
-  --osi-color-text: #333333;
-  --osi-color-text-secondary: #666666;
-  --osi-color-background: #ffffff;
-  --osi-color-background-soft: #f8f9fa;
-  --osi-color-border: #e9ecef;
-  // Spacing (critical only)
-  --osi-spacing-xs: 4px;
-  --osi-spacing-sm: 8px;
-  --osi-spacing-md: 16px;
-  --osi-spacing-lg: 24px;
-  // Typography (critical)
-  --osi-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --osi-font-size-sm: 0.875rem;
-  --osi-font-size-base: 1rem;
-  --osi-font-size-lg: 1.125rem;
-  --osi-font-size-xl: 1.25rem;
-  --osi-font-size-2xl: 1.5rem;
-  // Border radius
-  --osi-border-radius-sm: 4px;
-  --osi-border-radius-md: 8px;
-  --osi-border-radius-lg: 12px;
-  // Shadows (critical only)
-  --osi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --osi-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  // Z-index
-  --osi-z-index-card: 1;
-  --osi-z-index-dropdown: 100;
-  --osi-z-index-modal: 1000;
-}
-// Dark mode critical variables
-@media (prefers-color-scheme: dark) {
-  :root {
-    --osi-color-text: #f0f0f0;
-    --osi-color-text-secondary: #a0a0a0;
-    --osi-color-background: #1a1a1a;
-    --osi-color-background-soft: #2a2a2a;
-    --osi-color-border: #3a3a3a;
-  }
-}
-// =============================================================================
-// CONTAINER CRITICAL STYLES
-// =============================================================================
-.osi-cards-container {
-  font-family: var(--osi-font-family);
-  font-size: var(--osi-font-size-base);
-  line-height: 1.5;
-  color: var(--osi-color-text);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-// =============================================================================
-// CARD CRITICAL STYLES
-// =============================================================================
-.osi-card {
-  position: relative;
-  background: var(--osi-color-background);
-  border-radius: var(--osi-border-radius-lg);
-  box-shadow: var(--osi-shadow-md);
-  overflow: hidden;
-}
-.osi-card-surface {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: var(--osi-color-background);
-  border-radius: inherit;
-  overflow: hidden;
-  will-change: transform;
-}
-.osi-card-content {
-  padding: var(--osi-spacing-lg);
-}
-// =============================================================================
-// CARD HEADER CRITICAL STYLES
-// =============================================================================
-.osi-card-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: var(--osi-spacing-lg);
-  padding-bottom: var(--osi-spacing-md);
-}
-.osi-card-title {
-  margin: 0;
-  font-size: var(--osi-font-size-2xl);
-  font-weight: 700;
-  line-height: 1.2;
-  color: var(--osi-color-text);
-}
-.osi-card-subtitle {
-  margin-top: var(--osi-spacing-xs);
-  font-size: var(--osi-font-size-sm);
-  color: var(--osi-color-text-secondary);
-}
-// =============================================================================
-// SECTION CRITICAL STYLES
-// =============================================================================
-.osi-section {
-  padding: var(--osi-spacing-md) var(--osi-spacing-lg);
-  border-top: 1px solid var(--osi-color-border);
-  &:first-of-type {
-    border-top: none;
-  }
-}
-.osi-section-title {
-  margin: 0 0 var(--osi-spacing-sm);
-  font-size: var(--osi-font-size-lg);
-  font-weight: 600;
-  color: var(--osi-color-text);
-}
-.osi-section-content {
-  font-size: var(--osi-font-size-base);
-}
-// =============================================================================
-// FIELD CRITICAL STYLES
-// =============================================================================
-.osi-field {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  padding: var(--osi-spacing-sm) 0;
-  gap: var(--osi-spacing-md);
-}
-.osi-field-label {
-  font-size: var(--osi-font-size-sm);
-  color: var(--osi-color-text-secondary);
-  flex-shrink: 0;
-}
-.osi-field-value {
-  font-weight: 500;
-  text-align: right;
-  word-break: break-word;
-}
-// =============================================================================
-// ITEM CRITICAL STYLES
-// =============================================================================
-.osi-item {
-  display: flex;
-  align-items: flex-start;
-  padding: var(--osi-spacing-sm) 0;
-  gap: var(--osi-spacing-md);
-}
-.osi-item-icon {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  font-size: 20px;
-  line-height: 24px;
-  text-align: center;
-}
-.osi-item-content {
-  flex: 1;
-  min-width: 0;
-}
-.osi-item-title {
-  font-weight: 500;
-  margin: 0;
-}
-.osi-item-description {
-  font-size: var(--osi-font-size-sm);
-  color: var(--osi-color-text-secondary);
-  margin: var(--osi-spacing-xs) 0 0;
-}
-// =============================================================================
-// ACTION BUTTON CRITICAL STYLES
-// =============================================================================
-.osi-card-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--osi-spacing-sm);
-  padding: var(--osi-spacing-md) var(--osi-spacing-lg);
-  border-top: 1px solid var(--osi-color-border);
-}
-.osi-action-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--osi-spacing-xs);
-  padding: var(--osi-spacing-sm) var(--osi-spacing-md);
-  font-family: inherit;
-  font-size: var(--osi-font-size-sm);
-  font-weight: 500;
-  text-decoration: none;
-  border-radius: var(--osi-border-radius-md);
-  cursor: pointer;
-  transition: none; // Start with no transition for critical
-  // Primary variant (default)
-  &--primary {
-    background: var(--osi-color-brand);
-    color: white;
-    border: none;
-  }
-  // Secondary variant
-  &--secondary {
-    background: var(--osi-color-background-soft);
-    color: var(--osi-color-text);
-    border: 1px solid var(--osi-color-border);
-  }
-  // Outline variant
-  &--outline {
-    background: transparent;
-    color: var(--osi-color-brand);
-    border: 1px solid var(--osi-color-brand);
-  }
-  // Ghost variant
-  &--ghost {
-    background: transparent;
-    color: var(--osi-color-text-secondary);
-    border: none;
-  }
-}
-// =============================================================================
-// SKELETON/LOADING CRITICAL STYLES
-// =============================================================================
-.osi-skeleton {
-  background: var(--osi-color-background-soft);
-  border-radius: var(--osi-border-radius-sm);
-  // Animation added in non-critical CSS
-}
-.osi-skeleton-text {
-  height: 16px;
-  margin-bottom: var(--osi-spacing-sm);
-  &:last-child {
-    width: 70%;
-    margin-bottom: 0;
-  }
-}
-.osi-skeleton-title {
-  height: 24px;
-  width: 60%;
-  margin-bottom: var(--osi-spacing-md);
-}
-// =============================================================================
-// FOCUS & ACCESSIBILITY CRITICAL STYLES
-// =============================================================================
-// Focus visible for keyboard users
-:focus-visible {
-  outline: 2px solid var(--osi-color-brand);
-  outline-offset: 2px;
-}
-// Reduced motion support
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-// =============================================================================
-// UTILITY CLASSES (CRITICAL ONLY)
-// =============================================================================
-.osi-visually-hidden {
-  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: 0 !important;
-}
-.osi-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.osi-sr-only {
-  @extend .osi-visually-hidden;
-}

package/styles/design-system/_compact-theme.scss DELETED Viewed

@@ -1,159 +0,0 @@
-// =====================================================================
-// COMPACT THEME - Tighter Spacing for Dense Information Display
-// =====================================================================
-@use "./tokens" as *;
-// ═══════════════════════════════════════════════════════════════════
-// COMPACT SPACING TOKENS
-// ═══════════════════════════════════════════════════════════════════
-:root {
-  // Compact spacing scale (reduce by ~33%)
-  --osi-spacing-compact-xs: 2px;
-  --osi-spacing-compact-sm: 6px;
-  --osi-spacing-compact-md: 8px;
-  --osi-spacing-compact-lg: 10px;
-  --osi-spacing-compact-xl: 16px;
-  // Compact section-specific
-  --osi-section-header-gap-compact: var(--osi-spacing-compact-sm);
-  --osi-section-padding-compact: var(--osi-spacing-compact-md);
-  --osi-item-padding-compact: var(--osi-spacing-compact-md);
-  --osi-item-gap-compact: var(--osi-spacing-compact-sm);
-  --osi-element-gap-compact: var(--osi-spacing-compact-xs);
-}
-// ═══════════════════════════════════════════════════════════════════
-// COMPACT TYPOGRAPHY (Slightly smaller, tighter)
-// ═══════════════════════════════════════════════════════════════════
-@mixin compact-section-title {
-  font-size: var(--osi-text-base); // 16px (was 18px)
-  font-weight: var(--osi-font-bold);
-  line-height: var(--osi-leading-tight);
-  margin: 0;
-}
-@mixin compact-section-description {
-  font-size: var(--osi-text-sm); // 14px
-  font-weight: var(--osi-font-normal);
-  line-height: var(--osi-leading-snug);
-  margin: 0;
-}
-@mixin compact-item-title {
-  font-size: var(--osi-text-sm); // 14px (was 16px)
-  font-weight: var(--osi-font-semibold);
-  line-height: var(--osi-leading-snug);
-  margin: 0;
-}
-@mixin compact-item-label {
-  font-size: 0.7rem; // 11.2px (was 12px)
-  font-weight: var(--osi-font-medium);
-  line-height: var(--osi-leading-tight);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-@mixin compact-item-value {
-  font-size: var(--osi-text-sm); // 14px (was 16px)
-  font-weight: var(--osi-font-semibold);
-  line-height: var(--osi-leading-normal);
-}
-@mixin compact-number-display {
-  font-size: var(--osi-text-xl); // 24px (was 30px)
-  font-weight: var(--osi-font-bold);
-  line-height: 1;
-  letter-spacing: var(--osi-tracking-tight);
-  font-variant-numeric: tabular-nums;
-}
-// ═══════════════════════════════════════════════════════════════════
-// COMPACT CARD & ITEM MIXINS
-// ═══════════════════════════════════════════════════════════════════
-@mixin compact-card {
-  padding: var(--osi-spacing-compact-md);
-  border-radius: var(--osi-radius-sm);
-  gap: var(--osi-spacing-compact-sm);
-  min-height: auto; // Remove fixed heights
-}
-@mixin compact-item {
-  padding: var(--osi-spacing-compact-md);
-  gap: var(--osi-spacing-compact-sm);
-}
-@mixin compact-grid {
-  gap: var(--osi-spacing-compact-md);
-}
-@mixin compact-list {
-  gap: var(--osi-spacing-compact-sm);
-  padding: var(--osi-spacing-compact-sm);
-}
-// ═══════════════════════════════════════════════════════════════════
-// APPLY COMPACT THEME
-// ═══════════════════════════════════════════════════════════════════
-// Apply to host element with [data-compact] attribute
-:host-context([data-compact]),
-:host([data-compact]) {
-  // Override spacing tokens
-  --osi-section-header-gap: var(--osi-section-header-gap-compact);
-  --osi-section-padding: var(--osi-section-padding-compact);
-  --osi-item-padding: var(--osi-item-padding-compact);
-  --osi-item-gap: var(--osi-item-gap-compact);
-  --osi-element-gap: var(--osi-element-gap-compact);
-  // Reduce min-heights
-  .metric-card,
-  .contact-card,
-  .solution-card {
-    min-height: auto;
-  }
-}
-// ═══════════════════════════════════════════════════════════════════
-// COMPACT MODIFIER CLASS
-// ═══════════════════════════════════════════════════════════════════
-.section-compact {
-  // Section-level compact mode
-  --osi-section-header-gap: var(--osi-section-header-gap-compact);
-  --osi-section-padding: var(--osi-section-padding-compact);
-  --osi-item-padding: var(--osi-item-padding-compact);
-  --osi-item-gap: var(--osi-item-gap-compact);
-  // Typography adjustments
-  .section-title,
-  h3 {
-    font-size: var(--osi-text-base);
-    margin-bottom: var(--osi-spacing-compact-xs);
-  }
-  .section-description {
-    font-size: var(--osi-text-sm);
-    line-height: var(--osi-leading-snug);
-  }
-  // Card/item adjustments
-  .metric-card,
-  .contact-card,
-  .list-item,
-  .info-item {
-    padding: var(--osi-spacing-compact-md);
-    min-height: auto;
-  }
-  // Grid adjustments
-  .analytics-grid,
-  .contacts-grid,
-  .news-grid {
-    gap: var(--osi-spacing-compact-md);
-  }
-}