osi-cards-lib 1.5.40 → 1.5.42

package/styles/components/sections/_sections-base.scss

@@ -18,6 +18,14 @@
   grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
   min-height: 0;
   box-sizing: border-box;
+  max-width: 100%;
+  overflow-x: hidden;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
 
   @media (max-width: 420px) {
     grid-template-columns: 1fr;
@@ -34,10 +42,100 @@
   grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
   min-height: 0;
   box-sizing: border-box;
+  max-width: 100%;
+  overflow-x: hidden;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 
   @media (max-width: $tablet-breakpoint) {
     grid-template-columns: 1fr;
   }
+
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// =====================================================================
+// RESPONSIVE SINGLE COLUMN MIXIN
+// =====================================================================
+
+@mixin responsive-single-column($breakpoint: 600px) {
+  @media (max-width: $breakpoint) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+// =====================================================================
+// TEXT OVERFLOW ELLIPSIS MIXIN
+// =====================================================================
+
+@mixin text-overflow-ellipsis($lines: 1) {
+  @if $lines == unset {
+    display: block;
+    -webkit-line-clamp: unset;
+    overflow: visible;
+  } @else {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  word-break: break-word;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+// =====================================================================
+// EXPANDABLE TEXT MIXIN
+// =====================================================================
+
+@mixin expandable-text($max-lines: 3) {
+  display: -webkit-box;
+  -webkit-line-clamp: $max-lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  max-width: 100%;
+  box-sizing: border-box;
+
+  &--expanded {
+    display: block;
+    -webkit-line-clamp: unset;
+    overflow: visible;
+  }
+}
+
+// =====================================================================
+// BUTTON TEXT MINIMAL MIXIN
+// =====================================================================
+
+@mixin button-text-minimal {
+  align-self: flex-start;
+  background: none;
+  border: none;
+  color: var(--accent);
+  font-size: 0.7rem;
+  font-weight: var(--font-medium);
+  cursor: pointer;
+  padding: var(--osi-spacing-compact-xs, 2px) 0;
+  transition: opacity 200ms var(--ease-out);
+
+  &:hover {
+    text-decoration: underline;
+    opacity: 0.8;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
 }
 
 // =====================================================================
@@ -59,8 +157,12 @@
   cursor: pointer;
   position: relative;
   overflow: hidden;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
+  max-width: 100%;
   box-sizing: border-box;
   text-align: left;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 
   transition:
     background var(--duration-base) var(--ease-out),

package/styles/core/_bootstrap-reset.scss

@@ -339,7 +339,7 @@ article.ai-card-surface {
   /* Section card variables */
   --section-card-min-height: 110px;
   --section-card-compact-height: 90px;
-  --section-header-gap: var(--spacing-md);
+  --section-header-gap: 2px;
   --section-content-gap: var(--spacing-sm);
   --section-card-gap: var(--spacing-md);
   --section-card-padding: var(--spacing-md);

package/styles/core/_mixins.scss

@@ -299,7 +299,7 @@ $osi-use-important: true !default;
 /// @param {Length} $gap - Gap between items
 @mixin osi-grid(
   $min-width: var(--section-grid-min-width, 200px),
-  $gap: var(--section-card-gap, 12px)
+  $gap: var(--section-card-gap, 8px)
 ) {
   @include display(grid);
   @include grid-columns(repeat(auto-fit, minmax($min-width, 1fr)));
@@ -315,7 +315,7 @@ $osi-use-important: true !default;
 
 /// Flex column stack for vertical lists
 /// @param {Length} $gap - Gap between items
-@mixin osi-stack($gap: var(--section-stack-gap, 12px)) {
+@mixin osi-stack($gap: var(--section-stack-gap, 8px)) {
   @include display(flex);
   @include flex-direction(column);
   @include gap($gap);
@@ -326,7 +326,7 @@ $osi-use-important: true !default;
 /// Fixed column grid
 /// @param {Number} $columns - Number of columns
 /// @param {Length} $gap - Gap between items
-@mixin osi-grid-fixed($columns: 2, $gap: var(--section-card-gap, 12px)) {
+@mixin osi-grid-fixed($columns: 2, $gap: var(--section-card-gap, 8px)) {
   @include display(grid);
   @include grid-columns(repeat($columns, 1fr));
   @include gap($gap);

package/styles/design-system/_tokens.scss

@@ -17,7 +17,7 @@
   --osi-spacing-3xl: 48px;
 
   // Section-specific spacing (More compact by default)
-  --osi-section-header-gap: var(--osi-spacing-sm); // 8px (was 12px)
+  --osi-section-header-gap: 2px; // Reduced gap between title and subtitle
   --osi-section-padding: var(--osi-spacing-sm); // 8px (was 12px)
   --osi-section-gap: var(--osi-spacing-md); // 12px (was 16px)
   --osi-item-padding: var(--osi-spacing-sm); // 8px (was 12px)

package/styles/design-system/_unified-sections.scss

@@ -16,24 +16,16 @@
   font-weight: var(--osi-font-semibold); // 600
   line-height: var(--osi-leading-snug); // 1.375
   color: var(--osi-foreground);
-
-  @include mobile {
-    font-size: var(--osi-text-sm); // Keep same on mobile
-  }
 }
 
 // Item labels (small uppercase text)
 @mixin unified-item-label {
-  font-size: 0.7rem; // 11.2px - Compact
+  font-size: 0.7rem; // 11.2px - Compact, fixed size
   font-weight: var(--osi-font-medium); // 500
   line-height: var(--osi-leading-tight); // 1.25
   color: var(--osi-muted-foreground);
   text-transform: uppercase;
   letter-spacing: 0.04em;
-
-  @include mobile {
-    font-size: 0.65rem; // 10.4px on mobile
-  }
 }
 
 // Item values (prominent text/numbers)
@@ -42,10 +34,6 @@
   font-weight: var(--osi-font-semibold); // 600
   line-height: var(--osi-leading-normal); // 1.5
   color: var(--osi-foreground);
-
-  @include mobile {
-    font-size: var(--osi-text-sm); // Keep same on mobile
-  }
 }
 
 // Item descriptions (secondary text)
@@ -54,25 +42,16 @@
   font-weight: var(--osi-font-normal); // 400
   line-height: var(--osi-leading-relaxed); // 1.625
   color: var(--osi-muted-foreground);
-
-  @include mobile {
-    font-size: var(--osi-text-xs); // Keep same on mobile
-    line-height: var(--osi-leading-normal); // Tighter on mobile
-  }
 }
 
 // Number displays (metrics, analytics)
 @mixin unified-number-display {
-  font-size: var(--osi-text-xl); // 24px - Compact (was 30px)
+  font-size: var(--osi-text-xl); // 24px - Fixed size for all screen sizes
   font-weight: var(--osi-font-bold); // 700
   line-height: 1;
   letter-spacing: var(--osi-tracking-tight);
   font-variant-numeric: tabular-nums;
   color: var(--osi-foreground);
-
-  @include mobile {
-    font-size: var(--osi-text-lg); // 20px on mobile
-  }
 }
 
 // ═══════════════════════════════════════════════════════════════════

package/styles/layout/_masonry.scss

@@ -17,7 +17,7 @@
     display: grid !important;
     grid-template-columns: repeat(auto-fill, minmax(var(--section-grid-min-width, 260px), 1fr));
     grid-template-rows: masonry;
-    gap: var(--section-card-gap, 12px);
+    gap: var(--section-card-gap, 8px);
     align-tracks: stretch;
 
     /* Native masonry doesn't need absolute positioning */
@@ -116,14 +116,17 @@
   height: fit-content;
   min-height: fit-content;
   width: 100%;
+  max-width: 100%;
   break-inside: avoid;
   page-break-inside: avoid;
   display: flex;
   flex-direction: column;
   overflow: visible;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
   box-sizing: border-box;
   overflow-wrap: break-word;
   word-wrap: break-word;
+  word-break: break-word; /* Break long unbreakable strings */
 
   /* Performance optimization: CSS containment */
   contain: layout style paint;
@@ -155,6 +158,11 @@
   height: auto !important;
   min-height: fit-content !important;
   max-height: none !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+  overflow-x: hidden !important;
 }
 
 /* ============================================================
@@ -284,12 +292,6 @@
   }
 }
 
-.masonry-item[data-priority="2"],
-.masonry-item[data-priority="3"] {
-  /* Priority 2 and 3 sections - no special border, use unified styling */
-  /* Left accent border removed for consistency */
-}
-
 /* Flex grow sections - expand to fill space */
 .masonry-item--flex-grow {
   flex-grow: 1 !important;
@@ -551,17 +553,17 @@
 }
 
 .masonry-skeleton--single {
-  width: calc((100% - var(--masonry-gap, 12px) * 3) / 4);
+  width: calc((100% - var(--masonry-gap, 8px) * 3) / 4);
   height: 180px;
 }
 
 .masonry-skeleton--double {
-  width: calc((100% - var(--masonry-gap, 12px) * 3) / 4 * 2 + var(--masonry-gap, 12px));
+  width: calc((100% - var(--masonry-gap, 8px) * 3) / 4 * 2 + var(--masonry-gap, 8px));
   height: 200px;
 }
 
 .masonry-skeleton--triple {
-  width: calc((100% - var(--masonry-gap, 12px) * 3) / 4 * 3 + var(--masonry-gap, 12px) * 2);
+  width: calc((100% - var(--masonry-gap, 8px) * 3) / 4 * 3 + var(--masonry-gap, 8px) * 2);
   height: 220px;
 }
 

package/styles/tokens/_master.scss

@@ -466,15 +466,14 @@ $breakpoints: (
 @mixin osi-card-typography($variant: "demo") {
   // Both demo and integration now use the same compact values
   // Section Titles
-  --section-title-font-size: 0.92rem;
+  --section-title-font-size: calc(0.92rem - 6px);
   --section-title-font-weight: 700;
   --section-title-letter-spacing: -0.02em;
   --section-title-line-height: 1.3;
   --section-title-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 
   // Card Header Title (main card title - larger)
-  --card-header-title-font-size: 1.25rem; /* 20px - main card header (reduced by 2px from 22px) */
-  --card-header-title-font-size-mobile: 1rem; /* 16px - mobile (reduced by 2px from 18px) */
+  --card-header-title-font-size: 1rem; /* 16px - fixed size for all screen sizes */
   --card-header-title-font-weight: 700;
   --card-header-title-letter-spacing: -0.02em;
   --card-header-title-line-height: 1.3;
@@ -526,23 +525,23 @@ $breakpoints: (
 
 /// Generate card layout tokens
 @mixin osi-card-layout() {
-  --card-main-padding: 16px;
+  --card-main-padding: 8px;
   --card-padding-vertical: 12px;
-  --card-padding-horizontal: 16px;
-  --card-padding: 16px;
+  --card-padding-horizontal: 12px;
+  --card-padding: 12px;
   --card-padding-large: 20px;
   --section-padding: 12px;
-  --section-container-padding: 12px;
+  --section-container-padding: 16px;
   --card-min-height: auto;
   --card-gap: 6px;
   --card-gap-large: 10px;
   --card-nested-gap: 3px;
-  --section-header-gap: 3px;
+  --section-header-gap: 2px;
   --section-header-padding-bottom: 0px;
   --section-title-margin-bottom: 0;
   --card-border-radius: 12px;
   --card-border-radius-large: 16px;
-  --section-card-gap: 12px;
+  --section-card-gap: 8px;
   --section-card-border-radius: 10px;
 
   // Element gaps within cards
@@ -649,11 +648,11 @@ $breakpoints: (
   --osi-card-shadow-fullscreen: none;
 
   // Card Spacing - Padding
-  --osi-card-padding: var(--card-main-padding, 16px);
-  --osi-card-padding-top: var(--card-main-padding, 16px);
-  --osi-card-padding-bottom: var(--card-main-padding, 16px);
-  --osi-card-padding-left: var(--card-main-padding, 16px);
-  --osi-card-padding-right: var(--card-main-padding, 16px);
+  --osi-card-padding: var(--card-main-padding, 8px);
+  --osi-card-padding-top: var(--card-main-padding, 8px);
+  --osi-card-padding-bottom: var(--card-main-padding, 8px);
+  --osi-card-padding-left: var(--card-main-padding, 8px);
+  --osi-card-padding-right: var(--card-main-padding, 8px);
   --osi-card-padding-mobile: 4px; // Fixed padding - no responsive behavior
 
   // Card Spacing - Margins
@@ -663,9 +662,9 @@ $breakpoints: (
   --osi-card-margin-right: 0;
 
   // Card Spacing - Gaps
-  --osi-card-gap: var(--section-card-gap, 12px);
-  --osi-card-body-gap: var(--space-3, 12px);
-  --osi-card-grid-gap: var(--section-card-gap, 12px);
+  --osi-card-gap: var(--section-card-gap, 8px);
+  --osi-card-body-gap: var(--space-4, 8px);
+  --osi-card-grid-gap: var(--section-card-gap, 8px);
 
   // Card Border Radius
   --osi-card-border-radius: var(--card-border-radius);
@@ -801,7 +800,7 @@ $breakpoints: (
   --osi-section-border-radius: var(--section-card-border-radius);
 
   // Section Typography
-  --osi-section-title-font-size: var(--section-title-font-size, 1.1rem);
+  --osi-section-title-font-size: calc(1.1rem - 4px);
   --osi-section-title-font-weight: var(--section-title-font-weight, 700);
   --osi-section-title-letter-spacing: var(--section-title-letter-spacing, -0.02em);
   --osi-section-title-line-height: var(--section-title-line-height, 1.3);