osi-cards-lib 1.5.32 → 1.5.34

package/styles/bundles/_all.scss

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

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

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

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

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

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