osi-cards-lib 1.5.32 → 1.5.34

package/styles/layout/_masonry.scss

@@ -0,0 +1,734 @@
+/* ============================================================
+   MASONRY LAYOUT STYLES
+   Standardized: 200px min column width, 12px gap
+
+   Supports:
+   - CSS native masonry (when browser supports it)
+   - JavaScript-based fallback with absolute positioning
+   - CSS Grid with dense packing as intermediate fallback
+   ============================================================ */
+
+/* ============================================================
+   CSS NATIVE MASONRY (Progressive Enhancement)
+   Use when browser supports grid-template-rows: masonry
+   ============================================================ */
+@supports (grid-template-rows: masonry) {
+  .masonry-container--native {
+    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);
+    align-tracks: stretch;
+
+    /* Native masonry doesn't need absolute positioning */
+    .masonry-item {
+      position: relative !important;
+      left: auto !important;
+      top: auto !important;
+      width: auto !important;
+    }
+  }
+}
+
+/* ============================================================
+   CSS GRID DENSE PACKING FALLBACK
+   Better than simple grid, handles varying heights
+   ============================================================ */
+.masonry-container--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--section-grid-min-width, 260px), 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-auto-flow: dense;
+  gap: var(--section-card-gap, 12px);
+
+  /* Items span based on col-span data attribute */
+  .masonry-item {
+    position: relative;
+
+    &[data-col-span="2"] {
+      grid-column: span 2;
+    }
+
+    &[data-col-span="3"] {
+      grid-column: span 3;
+    }
+
+    &[data-col-span="4"] {
+      grid-column: span 4;
+    }
+  }
+
+  /* Ensure wide items don't overflow on small screens */
+  @media (max-width: 600px) {
+    .masonry-item[data-col-span] {
+      grid-column: span 1;
+    }
+  }
+}
+
+/* ============================================================
+   CSS SUBGRID SUPPORT (for aligned headers/bodies)
+   ============================================================ */
+@supports (grid-template-rows: subgrid) {
+  .masonry-container--subgrid .masonry-item {
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-row: span 2; /* Header + body */
+
+    .ai-section__header {
+      grid-row: 1;
+    }
+
+    .ai-section__body {
+      grid-row: 2;
+    }
+  }
+}
+
+/* ============================================================
+   JAVASCRIPT-BASED MASONRY (Default/Fallback)
+   Uses absolute positioning calculated by component
+   ============================================================ */
+.masonry-grid-container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  min-height: 200px;
+
+  /* GPU acceleration for smooth height changes */
+  will-change: height;
+  transform: translateZ(0);
+}
+
+.masonry-grid-container .masonry-item {
+  position: absolute;
+  width: auto;
+  height: auto;
+  box-sizing: border-box;
+  transform-origin: top left;
+
+  /* FLIP animation support */
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+}
+
+.masonry-item {
+  height: fit-content;
+  min-height: fit-content;
+  width: 100%;
+  break-inside: avoid;
+  page-break-inside: avoid;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  /* Performance optimization: CSS containment */
+  contain: layout style paint;
+
+  /* Performance optimization: content-visibility for off-screen items */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 200px;
+
+  /* Smooth transitions for position and size changes */
+  transition:
+    top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.35s ease-out;
+
+  /* GLOBALLY DEFINED: Use shared mixins for discrete section borders */
+  @include surface-section-base;
+  padding: var(--section-container-padding) !important;
+
+  /* Gap between header and body - standardized to 12px */
+  gap: var(--section-card-gap);
+
+  &:hover {
+    @include surface-section-hover;
+  }
+}
+
+.masonry-item > * {
+  height: auto !important;
+  min-height: fit-content !important;
+  max-height: none !important;
+}
+
+/* ============================================================
+   LEGACY GRID CLASSES
+   Using standardized 200px min width, 12px gap
+   ============================================================ */
+
+.masonry-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-gap: 12px;
+  grid-auto-rows: minmax(100px, auto);
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-gap: 12px;
+}
+
+/* ============================================================
+   SECTION ORIENTATION MODIFIERS
+   Controls how content is arranged within sections
+   ============================================================ */
+
+/* Vertical orientation (default) - stack items in a column */
+.masonry-item--vertical .ai-section__body {
+  display: flex !important;
+  flex-direction: column !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  gap: var(--section-card-gap) !important;
+}
+
+/* Horizontal orientation - arrange items in a row */
+.masonry-item--horizontal .ai-section__body {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  align-items: flex-start !important;
+  gap: var(--section-card-gap) !important;
+}
+
+/* Horizontal card sizing within horizontal sections */
+.masonry-item--horizontal .ai-section__body > * {
+  flex: 1 1 200px !important;
+  min-width: 180px !important;
+  max-width: 100% !important;
+}
+
+/* Contact cards in horizontal mode */
+.masonry-item--horizontal .contact-card,
+.masonry-item--horizontal .network-card {
+  flex: 1 1 220px !important;
+  min-width: 200px !important;
+  max-width: 320px !important;
+}
+
+/* Metrics in horizontal mode - more compact */
+.masonry-item--horizontal .analytics-metric,
+.masonry-item--horizontal .financial-metric {
+  flex: 1 1 160px !important;
+  min-width: 140px !important;
+  max-width: 260px !important;
+}
+
+/* Overview cards in horizontal mode */
+.masonry-item--horizontal .overview-card {
+  flex: 1 1 180px !important;
+  min-width: 160px !important;
+  max-width: 280px !important;
+}
+
+/* Auto orientation - let container queries decide */
+.masonry-item--auto .ai-section__body {
+  display: flex !important;
+  flex-direction: column !important;
+  flex-wrap: wrap !important;
+  gap: var(--section-card-gap) !important;
+}
+
+/* Auto orientation switches to row on wide sections */
+@container (min-width: 500px) {
+  .masonry-item--auto .ai-section__body {
+    flex-direction: row !important;
+  }
+
+  .masonry-item--auto .ai-section__body > * {
+    flex: 1 1 200px !important;
+    min-width: 180px !important;
+  }
+}
+
+/* Responsive orientation switching */
+/* At narrow widths, horizontal sections become vertical */
+@media (max-width: 480px) {
+  .masonry-item--horizontal .ai-section__body {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .masonry-item--horizontal .ai-section__body > * {
+    flex: 1 1 auto !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+  }
+}
+
+/* Container query support for per-section responsiveness */
+.masonry-item {
+  container-type: inline-size;
+  container-name: section;
+}
+
+/* Priority-based visual indicators */
+.masonry-item--priority-critical {
+  /* Critical sections get subtle emphasis */
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--color-brand, #ff7900);
+    border-radius: 0 2px 2px 0;
+  }
+}
+
+.masonry-item--priority-important {
+  /* Important sections - no special border, use unified styling */
+  /* Left accent border removed for consistency */
+}
+
+/* Sticky sections */
+.masonry-item--sticky {
+  position: sticky !important;
+  top: 0 !important;
+  z-index: 10 !important;
+  background: var(--card-background) !important;
+}
+
+/* Flex grow sections - expand to fill space */
+.masonry-item--flex-grow {
+  flex-grow: 1 !important;
+}
+
+/* ============================================================
+   REDUCED MOTION SUPPORT
+   ============================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .masonry-item,
+  .masonry-grid-container .masonry-item {
+    transition: none;
+  }
+}
+
+/* ============================================================
+   LAYOUT MODE MODIFIERS
+   ============================================================ */
+
+/* Compact mode - tighter spacing */
+.masonry-container--compact {
+  --section-card-gap: 8px;
+
+  .masonry-item {
+    padding: calc(var(--section-container-padding) * 0.75) !important;
+  }
+}
+
+/* Comfortable mode - more spacing */
+.masonry-container--comfortable {
+  --section-card-gap: 16px;
+
+  .masonry-item {
+    padding: calc(var(--section-container-padding) * 1.25) !important;
+  }
+}
+
+/* Track-aligned mode - sections snap to row tracks */
+.masonry-container--track-aligned {
+  /* Use CSS Grid for track alignment */
+  display: grid;
+  grid-template-columns: repeat(var(--masonry-columns, 4), 1fr);
+  grid-auto-rows: minmax(50px, auto);
+  gap: var(--section-card-gap, 12px);
+
+  .masonry-item {
+    position: relative !important;
+    left: auto !important;
+    top: auto !important;
+    width: auto !important;
+
+    /* Align to nearest row track */
+    align-self: start;
+  }
+}
+
+/* ============================================================
+   VISUAL DEBUGGING MODE
+   ============================================================ */
+
+.masonry-container--debug {
+  /* Show grid lines */
+  background-image:
+    linear-gradient(to right, rgba(255, 121, 0, 0.1) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 121, 0, 0.1) 1px, transparent 1px);
+  background-size: calc(100% / var(--masonry-columns, 4)) 50px;
+
+  .masonry-item {
+    outline: 2px dashed rgba(255, 121, 0, 0.5) !important;
+    outline-offset: -2px;
+
+    /* Show col-span as badge */
+    &::after {
+      content: attr(data-col-span) " col";
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      background: rgba(255, 121, 0, 0.9);
+      color: white;
+      font-size: 10px;
+      font-weight: 600;
+      padding: 2px 6px;
+      border-radius: 4px;
+      z-index: 100;
+      pointer-events: none;
+    }
+
+    /* Show priority badge */
+    &[data-priority="critical"]::before {
+      content: "★ Critical";
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      background: #ef4444;
+      color: white;
+      font-size: 9px;
+      font-weight: 600;
+      padding: 2px 4px;
+      border-radius: 3px;
+      z-index: 100;
+    }
+
+    &[data-priority="important"]::before {
+      content: "◆ Important";
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      background: #f59e0b;
+      color: white;
+      font-size: 9px;
+      font-weight: 600;
+      padding: 2px 4px;
+      border-radius: 3px;
+      z-index: 100;
+    }
+
+    &[data-priority="optional"]::before {
+      content: "○ Optional";
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      background: #6b7280;
+      color: white;
+      font-size: 9px;
+      font-weight: 600;
+      padding: 2px 4px;
+      border-radius: 3px;
+      z-index: 100;
+    }
+  }
+}
+
+/* ============================================================
+   STAGGERED ANIMATION SUPPORT
+   ============================================================ */
+
+.masonry-container--stagger-animations {
+  .masonry-item {
+    animation: masonry-item-appear 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
+
+    @for $i from 1 through 20 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 50}ms;
+      }
+    }
+  }
+}
+
+@keyframes masonry-item-appear {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 20px, 0) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+/* ============================================================
+   CSS TRANSITIONS FOR REFLOW (Point 86)
+   Enhanced smooth transitions for position changes during reflow
+   ============================================================ */
+
+.masonry-item--transitioning {
+  /* Use GPU acceleration during transitions */
+  will-change: transform, left, top, width;
+
+  transition:
+    top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.25s ease-out;
+}
+
+/* Disable transitions during initial render */
+.masonry-container--initializing .masonry-item {
+  transition: none !important;
+}
+
+/* Disable transitions when user prefers reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .masonry-item,
+  .masonry-item--transitioning {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* ============================================================
+   COLUMN HEIGHT BALANCING (Point 87)
+   Visual indicators for balanced columns
+   ============================================================ */
+
+.masonry-container--balanced {
+  /* Container shows balanced state */
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(
+      to right,
+      transparent,
+      rgba(var(--primary-rgb, 59, 130, 246), 0.3),
+      transparent
+    );
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover::after {
+    opacity: 1;
+  }
+}
+
+/* Column balance debug visualization */
+.masonry-container--debug-balance {
+  .masonry-item {
+    position: relative;
+
+    &::after {
+      content: attr(data-column);
+      position: absolute;
+      top: -20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.6);
+      color: white;
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      pointer-events: none;
+    }
+  }
+}
+
+/* ============================================================
+   SKELETON PLACEHOLDERS (Point 88)
+   Show approximate shapes while layout is calculating
+   ============================================================ */
+
+.masonry-skeleton {
+  position: relative;
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base, rgba(200, 200, 200, 0.2)) 25%,
+    var(--skeleton-highlight, rgba(200, 200, 200, 0.4)) 50%,
+    var(--skeleton-base, rgba(200, 200, 200, 0.2)) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s infinite;
+  border-radius: var(--section-border-radius, 8px);
+  overflow: hidden;
+}
+
+.masonry-skeleton--single {
+  width: calc((100% - var(--masonry-gap, 12px) * 3) / 4);
+  height: 180px;
+}
+
+.masonry-skeleton--double {
+  width: calc((100% - var(--masonry-gap, 12px) * 3) / 4 * 2 + var(--masonry-gap, 12px));
+  height: 200px;
+}
+
+.masonry-skeleton--triple {
+  width: calc((100% - var(--masonry-gap, 12px) * 3) / 4 * 3 + var(--masonry-gap, 12px) * 2);
+  height: 220px;
+}
+
+.masonry-skeleton--full {
+  width: 100%;
+  height: 250px;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Skeleton content lines */
+.masonry-skeleton__header {
+  height: 24px;
+  width: 60%;
+  margin: 16px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+
+.masonry-skeleton__line {
+  height: 16px;
+  margin: 8px 16px;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+
+  &:nth-child(2) {
+    width: 90%;
+  }
+  &:nth-child(3) {
+    width: 75%;
+  }
+  &:nth-child(4) {
+    width: 60%;
+  }
+}
+
+/* Skeleton container while loading */
+.masonry-container--loading {
+  min-height: 400px;
+
+  .masonry-skeleton {
+    position: absolute;
+
+    @for $i from 1 through 8 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 100}ms;
+      }
+    }
+  }
+}
+
+/* ============================================================
+   PRESERVE ORDER MODE (Point 89)
+   Classes for strict data order layout
+   ============================================================ */
+
+.masonry-container--preserve-order {
+  /* Items follow natural flow order */
+  .masonry-item {
+    order: var(--item-order, 0);
+  }
+
+  /* Show order numbers in debug mode */
+  &.masonry-container--debug {
+    .masonry-item::before {
+      content: "#" attr(data-index);
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      background: rgba(0, 0, 0, 0.7);
+      color: white;
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      z-index: 100;
+    }
+  }
+}
+
+/* ============================================================
+   ACCESSIBILITY - ARIA FLOW (Point 90)
+   Visual indicators for reading order
+   ============================================================ */
+
+/* Focus styles for keyboard navigation following aria-flowto */
+.masonry-item:focus-visible {
+  outline: 2px solid var(--focus-color, #3b82f6);
+  outline-offset: 2px;
+  z-index: 10;
+}
+
+/* Reading order indicator (debug mode) */
+.masonry-container--show-reading-order {
+  .masonry-item {
+    &::after {
+      content: attr(data-reading-order);
+      position: absolute;
+      bottom: 4px;
+      right: 4px;
+      background: var(--reading-order-bg, #6366f1);
+      color: white;
+      font-size: 12px;
+      font-weight: bold;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      z-index: 100;
+    }
+  }
+
+  /* Connect items with visual flow lines */
+  .masonry-item[data-next-id]::before {
+    content: "";
+    position: absolute;
+    bottom: 16px;
+    right: -6px;
+    width: 20px;
+    height: 2px;
+    background: var(--reading-order-line, rgba(99, 102, 241, 0.3));
+    z-index: 99;
+  }
+}
+
+/* Skip link for keyboard users */
+.masonry-skip-link {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  z-index: 1000;
+  padding: 12px 24px;
+  background: var(--skip-link-bg, #1e40af);
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
+
+  &:focus {
+    top: 12px;
+    left: 12px;
+  }
+}
+
+/* Screen reader only text */
+.masonry-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}