osi-cards-lib 1.5.30 → 1.5.32

package/styles/bundles/_all.scss

@@ -1,68 +0,0 @@
-// ============================================
-// ALL COMPONENTS BUNDLE
-// ============================================
-//
-// Complete bundle including all OSI Cards styles.
-// Use this for simple integration when bundle size is not a concern.
-//
-// Usage in Shadow DOM component:
-//   @use 'osi-cards-lib/styles/bundles/all';
-//
-// ============================================
-
-// 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
-:host {
-  @include osi-theme-base("integration", true);
-  @include osi-tokens("integration", true);
-}
-
-:host([data-theme="night"]),
-:host-context([data-theme="night"]) {
-  @include osi-theme-dark("integration", true);
-}
-
-:host([data-theme="day"]),
-:host-context([data-theme="day"]) {
-  @include osi-theme-light("integration", true);
-}
-
-// 4. Core styles
-@import "../core/mixins";
-@import "../core/surface-layers";
-@import "../core/utilities";
-@import "../core/animations";
-
-// 5. Layout styles
-@import "../layout/tilt";
-@import "../layout/masonry";
-
-// 6. Component styles
-@import "../components/cards/ai-card";
-
-// 7. Section styles (consolidated import)
-@import "../components/sections/sections-all";
-
-// 8. 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();
-  }
-}

package/styles/bundles/_base.scss

@@ -1,60 +0,0 @@
-// ============================================
-// BASE BUNDLE
-// ============================================
-//
-// Shared foundation for all component bundles.
-// Contains tokens, reset, and core styles without section-specific code.
-//
-// Usage: Import in individual section bundles
-//   @use 'base';
-//
-// ============================================
-
-// 1. Master tokens
-@use "../tokens/master" as *;
-
-// 2. Shadow DOM reset
-@use "../reset/shadow-reset";
-
-// 3. Generate CSS custom properties
-:host {
-  @include osi-theme-base("integration", true);
-  @include osi-tokens("integration", true);
-}
-
-:host([data-theme="night"]),
-:host-context([data-theme="night"]) {
-  @include osi-theme-dark("integration", true);
-}
-
-:host([data-theme="day"]),
-:host-context([data-theme="day"]) {
-  @include osi-theme-light("integration", true);
-}
-
-// 4. Core styles
-@import "../core/mixins";
-@import "../core/utilities";
-@import "../core/animations";
-
-// 5. Section foundation (consolidated styles)
-@import "../components/sections/sections-all";
-
-// 6. Accessibility
-@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();
-  }
-}

package/styles/bundles/_card-skeleton.scss

@@ -1,290 +0,0 @@
-// ============================================
-// CARD SKELETON COMPONENT BUNDLE
-// ============================================
-//
-// Self-contained bundle for the Card Skeleton component.
-// Includes all styles needed to render loading skeleton states.
-//
-// Usage in Shadow DOM component:
-//   styleUrls: ['../../styles/bundles/_card-skeleton.scss']
-//
-// ============================================
-
-// 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
-:host {
-  @include osi-theme-base("integration", true);
-  @include osi-tokens("integration", true);
-
-  display: block;
-  width: 100%;
-}
-
-:host([data-theme="night"]),
-:host-context([data-theme="night"]) {
-  @include osi-theme-dark("integration", true);
-}
-
-:host([data-theme="day"]),
-:host-context([data-theme="day"]) {
-  @include osi-theme-light("integration", true);
-}
-
-// ============================================
-// SKELETON KEYFRAME ANIMATIONS
-// ============================================
-
-@keyframes shimmerWave {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-@keyframes skeleton-fade-in {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 10px, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes skeletonPulse {
-  0%,
-  100% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-// ============================================
-// CARD SKELETON STYLES
-// ============================================
-
-.card-skeleton {
-  width: 100%;
-  min-height: 400px;
-  background: var(--card-background, var(--background, #ffffff));
-  border: 1px solid var(--border, rgba(200, 200, 200, 0.5));
-  border-radius: var(--card-border-radius, 1rem);
-  padding: var(--card-main-padding, 1.5rem);
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  position: relative;
-  overflow: hidden;
-}
-
-.card-skeleton--fullscreen {
-  min-height: 100%;
-  border-radius: 0;
-}
-
-.card-skeleton-header {
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--border, rgba(200, 200, 200, 0.5));
-}
-
-.skeleton-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--foreground, #1c1c1f);
-  min-height: 2rem;
-  display: flex;
-  align-items: center;
-}
-
-.skeleton-title-placeholder {
-  width: 60%;
-  height: 2rem;
-  background: linear-gradient(
-    90deg,
-    color-mix(in srgb, var(--muted, #f4f4f6) 100%, transparent) 0%,
-    color-mix(in srgb, var(--muted-foreground, #555861) 100%, transparent) 20%,
-    color-mix(in srgb, var(--color-brand, #ff7900) 15%, transparent) 50%,
-    color-mix(in srgb, var(--muted, #f4f4f6) 100%, transparent) 100%
-  );
-  background-size: 200% 100%;
-  border-radius: 0.5rem;
-  animation: shimmerWave 1.5s ease-in-out infinite;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 2px 4px color-mix(in srgb, var(--foreground, #1c1c1f) 5%, transparent);
-}
-
-.skeleton-title-placeholder::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    color-mix(in srgb, var(--color-brand, #ff7900) 20%, transparent) 50%,
-    transparent 100%
-  );
-  animation: shimmerWave 1.5s ease-in-out infinite;
-}
-
-.card-skeleton-sections {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  flex: 1;
-}
-
-.skeleton-section {
-  opacity: 0;
-  animation: skeleton-fade-in 0.4s ease-out forwards;
-  padding: 1.25rem;
-  border: 1px solid color-mix(in srgb, var(--border, rgba(200, 200, 200, 0.5)) 60%, transparent);
-  border-radius: 0.75rem;
-  background: linear-gradient(
-    135deg,
-    var(--card-background, var(--background, #ffffff)) 0%,
-    color-mix(
-        in srgb,
-        var(--card-background, var(--background, #ffffff)) 98%,
-        var(--color-brand, #ff7900) 2%
-      )
-      100%
-  );
-  box-shadow: 0 2px 4px color-mix(in srgb, var(--foreground, #1c1c1f) 5%, transparent);
-  position: relative;
-  overflow: hidden;
-}
-
-.skeleton-section::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: linear-gradient(
-    180deg,
-    var(--color-brand, #ff7900),
-    color-mix(in srgb, var(--color-brand, #ff7900) 50%, transparent)
-  );
-  opacity: 0.3;
-}
-
-// Stagger animation delays for skeleton sections
-@for $i from 1 through 10 {
-  .skeleton-section:nth-child(#{$i}) {
-    animation-delay: #{$i * 0.1}s;
-  }
-}
-
-.skeleton-section-header {
-  margin-bottom: 0.75rem;
-}
-
-.skeleton-section-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.skeleton-line {
-  height: 1rem;
-  background: linear-gradient(
-    90deg,
-    color-mix(in srgb, var(--muted, #f4f4f6) 100%, transparent) 0%,
-    color-mix(in srgb, var(--muted-foreground, #555861) 100%, transparent) 20%,
-    color-mix(in srgb, var(--color-brand, #ff7900) 10%, transparent) 50%,
-    color-mix(in srgb, var(--muted, #f4f4f6) 100%, transparent) 100%
-  );
-  background-size: 200% 100%;
-  border-radius: 0.375rem;
-  animation: shimmerWave 1.5s ease-in-out infinite;
-  position: relative;
-  overflow: hidden;
-}
-
-.skeleton-line::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    color-mix(in srgb, var(--color-brand, #ff7900) 15%, transparent) 50%,
-    transparent 100%
-  );
-  animation: shimmerWave 1.5s ease-in-out infinite;
-}
-
-.skeleton-line--title {
-  width: 40%;
-  height: 1.25rem;
-}
-
-.skeleton-line:not(.skeleton-line--title) {
-  width: 100%;
-}
-
-.skeleton-line:not(.skeleton-line--title):nth-child(2) {
-  width: 80%;
-}
-
-.card-skeleton-empty {
-  padding: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-}
-
-.skeleton-line--empty {
-  width: 60%;
-  height: 1.5rem;
-}
-
-// ============================================
-// ACCESSIBILITY SUPPORT
-// ============================================
-
-@media (prefers-reduced-motion: reduce) {
-  :host {
-    @include osi-tokens-reduced-motion();
-  }
-
-  .skeleton-title-placeholder,
-  .skeleton-title-placeholder::after,
-  .skeleton-line,
-  .skeleton-line::after,
-  .skeleton-section {
-    animation: none !important;
-    opacity: 1 !important;
-  }
-}
-
-@media (prefers-contrast: high) {
-  :host {
-    @include osi-tokens-high-contrast();
-  }
-}
-
-@media (forced-colors: active) {
-  :host {
-    @include osi-tokens-forced-colors();
-  }
-}

package/styles/bundles/_index.scss

@@ -1,25 +0,0 @@
-// ============================================
-// BUNDLES INDEX
-// ============================================
-//
-// Available bundles for Shadow DOM components:
-//
-// FULL BUNDLES:
-//   @use 'bundles/all'           - Everything included
-//   @use 'bundles/ai-card'       - AI Card with all sections
-//   @use 'bundles/sections'      - All sections without card chrome
-//
-// BASE BUNDLE:
-//   @use 'bundles/base'          - Foundation only (tokens, reset, core)
-//
-// Note: Individual section bundles have been consolidated into
-// 'sections' bundle to reduce redundancy. Use 'base' + 'sections'
-// for section-specific styles.
-//
-// ============================================
-
-// Re-export all bundles
-@forward "all";
-@forward "ai-card";
-@forward "sections";
-@forward "base";

package/styles/bundles/_sections.scss

@@ -1,48 +0,0 @@
-// ============================================
-// ALL SECTIONS BUNDLE
-// ============================================
-//
-// Bundle containing all section styles.
-// Use this when you need multiple section types.
-//
-// Usage in Shadow DOM component:
-//   @use 'osi-cards-lib/styles/bundles/sections';
-//
-// ============================================
-
-// 1. Master tokens
-@use "../tokens/master" as *;
-
-// 2. Shadow DOM reset
-@use "../reset/shadow-reset";
-
-// 3. Generate CSS custom properties
-:host {
-  @include osi-theme-base("integration", true);
-  @include osi-tokens("integration", true);
-}
-
-:host([data-theme="night"]),
-:host-context([data-theme="night"]) {
-  @include osi-theme-dark("integration", true);
-}
-
-:host([data-theme="day"]),
-:host-context([data-theme="day"]) {
-  @include osi-theme-light("integration", true);
-}
-
-// 4. Core styles
-@import "../core/mixins";
-@import "../core/utilities";
-@import "../core/animations";
-
-// 5. All section styles (consolidated)
-@import "../components/sections/sections-all";
-
-// 8. Accessibility
-@media (prefers-reduced-motion: reduce) {
-  :host {
-    @include osi-tokens-reduced-motion();
-  }
-}

package/styles/bundles/_tokens-only.scss

@@ -1,139 +0,0 @@
-// ============================================
-// TOKENS ONLY - CSS Custom Properties for Host Apps
-// ============================================
-//
-// This file provides ONLY the CSS custom properties (tokens) without
-// any component styles. Use this when you want the host app to define
-// the design tokens that OSI Cards components will consume.
-//
-// Include this in your host app's global styles to enable theming:
-//
-//   @import 'osi-cards-lib/styles/bundles/tokens-only';
-//
-// Or import the compiled CSS:
-//
-//   @import 'osi-cards-lib/styles/osi-cards-tokens.css';
-//
-// The components will read these CSS variables through Shadow DOM
-// (CSS custom properties pass through Shadow DOM boundaries).
-//
-// ============================================
-
-@use "../tokens/master" as *;
-
-// ============================================
-// ROOT-LEVEL TOKEN DEFINITIONS
-// ============================================
-
-// Apply to :root for global token availability
-:root {
-  // Base colors
-  @include osi-base-colors();
-
-  // Status colors
-  @include osi-status-colors();
-
-  // Shadows
-  @include osi-shadows();
-
-  // Radius
-  @include osi-radius();
-
-  // Spacing
-  @include osi-spacing();
-
-  // Animation
-  @include osi-animation();
-
-  // Opacity
-  @include osi-opacity();
-
-  // Typography (demo variant for standalone apps)
-  @include osi-typography("demo");
-
-  // Card typography
-  @include osi-card-typography("demo");
-
-  // Card layout
-  @include osi-card-layout();
-
-  // Interactive states
-  @include osi-interactive();
-
-  // Default theme (light)
-  @include osi-theme-base("demo", false);
-}
-
-// ============================================
-// THEME VARIANTS
-// ============================================
-
-// Dark theme
-:root[data-theme="night"],
-[data-theme="night"] {
-  @include osi-theme-dark("demo", false);
-}
-
-// Light theme
-:root[data-theme="day"],
-[data-theme="day"] {
-  @include osi-theme-light("demo", false);
-}
-
-// ============================================
-// ACCESSIBILITY OVERRIDES
-// ============================================
-
-// Reduced motion
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    @include osi-tokens-reduced-motion();
-  }
-}
-
-// High contrast
-@media (prefers-contrast: high) {
-  :root {
-    @include osi-tokens-high-contrast();
-  }
-}
-
-// Forced colors (Windows High Contrast)
-@media (forced-colors: active) {
-  :root {
-    @include osi-tokens-forced-colors();
-  }
-}
-
-// ============================================
-// INTEGRATION VARIANT
-// ============================================
-
-// For embedding in external apps with scoped container
-.osi-cards-container {
-  // Scoped theme base
-  @include osi-theme-base("integration", true);
-  @include osi-tokens("integration", true);
-
-  // Scoped theme variants
-  &[data-theme="night"] {
-    @include osi-theme-dark("integration", true);
-  }
-
-  &[data-theme="day"] {
-    @include osi-theme-light("integration", true);
-  }
-
-  // Scoped accessibility overrides
-  @media (prefers-reduced-motion: reduce) {
-    @include osi-tokens-reduced-motion();
-  }
-
-  @media (prefers-contrast: high) {
-    @include osi-tokens-high-contrast();
-  }
-
-  @media (forced-colors: active) {
-    @include osi-tokens-forced-colors();
-  }
-}