osi-cards-lib 1.5.32 → 1.5.34

package/styles/reset/_shadow-reset.scss

@@ -0,0 +1,383 @@
+// ============================================
+// SHADOW DOM RESET
+// ============================================
+//
+// Comprehensive reset for Shadow DOM encapsulated components.
+// This ensures components are completely isolated from host app styles.
+//
+// Usage: Include at the top of component style bundles
+//
+// ============================================
+
+@use "../tokens/master" as tokens;
+
+// ============================================
+// HOST ELEMENT RESET
+// ============================================
+
+:host {
+  // Reset ALL inherited properties to initial state
+  // This prevents any host app styles from leaking in
+  all: initial;
+
+  // Re-establish essential display properties
+  display: block !important;
+  position: relative;
+  box-sizing: border-box;
+  width: 100% !important;
+  min-height: 0; // Allow content to determine height
+  visibility: visible !important;
+  opacity: 1 !important;
+
+  // Transparent container with 8px padding (library default)
+  // Must be set here immediately after all:initial to ensure application
+  padding: 8px;
+  background: transparent !important;
+  background-color: transparent !important;
+
+  // Typography - inherit from host but with fallbacks
+  font-family:
+    Helvetica,
+    "Helvetica Neue",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Arial,
+    sans-serif;
+  font-size: var(--font-size-base, 14px);
+  line-height: 1.5;
+  color: var(--foreground, #{tokens.$osi-foreground-light});
+
+  // Text rendering
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "kern" 1;
+
+  // Prevent text selection issues
+  -webkit-tap-highlight-color: transparent;
+
+  // Contain styles within shadow boundary
+  contain: layout style;
+
+  // Responsive: reduce padding on mobile
+  @media (max-width: 480px) {
+    padding: 4px;
+  }
+}
+
+// Host context variations
+:host([hidden]) {
+  display: none !important;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+// ============================================
+// UNIVERSAL BOX MODEL RESET
+// ============================================
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  // Reset borders
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+
+// ============================================
+// TYPOGRAPHY RESET
+// ============================================
+
+// Headings - with explicit font sizes matching demo app
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  line-height: 1.2;
+  font-family: inherit;
+}
+
+h1 {
+  font-size: var(--text-2xl, 1.5rem);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+h2 {
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+h3 {
+  font-size: var(--text-lg, 1.125rem);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+h4 {
+  font-size: var(--text-base, 1rem);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+h5 {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+h6 {
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+// Paragraphs and text
+p {
+  font-size: var(--text-base, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: 1.5;
+  margin: 0;
+}
+
+span,
+div {
+  margin: 0;
+  padding: 0;
+}
+
+// Links
+a {
+  color: inherit;
+  text-decoration: inherit;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-brand, #{tokens.$osi-color-brand});
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+}
+
+// Lists
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  margin: 0;
+  padding: 0;
+}
+
+// ============================================
+// FORM ELEMENTS RESET
+// ============================================
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-brand, #{tokens.$osi-color-brand});
+    outline-offset: 2px;
+  }
+}
+
+// Remove default button styles
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+// ============================================
+// MEDIA ELEMENTS RESET
+// ============================================
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+  max-width: 100%;
+  height: auto;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+svg {
+  fill: currentColor;
+}
+
+// ============================================
+// LUCIDE ICON SPECIFIC STYLES
+// ============================================
+
+// Lucide icons use stroke-based SVGs, not fill
+lucide-icon,
+lucide-angular {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  vertical-align: middle !important;
+  flex-shrink: 0;
+
+  svg {
+    display: block !important;
+    width: inherit !important;
+    height: inherit !important;
+    stroke: currentColor !important;
+    fill: none !important;
+    stroke-width: 2 !important;
+    stroke-linecap: round !important;
+    stroke-linejoin: round !important;
+  }
+}
+
+// ============================================
+// TABLE RESET
+// ============================================
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+// ============================================
+// INTERACTIVE ELEMENTS
+// ============================================
+
+// Summary element (disclosure widget)
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+// Prevent text selection on interactive elements
+[role="button"] {
+  cursor: pointer;
+}
+
+// ============================================
+// ACCESSIBILITY ENHANCEMENTS
+// ============================================
+
+// Focus visible styles for keyboard navigation
+:focus-visible {
+  outline: 2px solid var(--color-brand, #{tokens.$osi-color-brand});
+  outline-offset: 2px;
+}
+
+// Remove focus outline for mouse users
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+// 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;
+    scroll-behavior: auto !important;
+  }
+}
+
+// High contrast mode support
+@media (prefers-contrast: high) {
+  * {
+    border-color: currentColor !important;
+  }
+}
+
+// ============================================
+// SCROLLBAR STYLING
+// ============================================
+
+// Webkit scrollbar styling (Chrome, Safari, Edge)
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--muted, #{tokens.$osi-gray-200});
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--muted-foreground, #{tokens.$osi-gray-400});
+  border-radius: 4px;
+
+  &:hover {
+    background: var(--foreground, #{tokens.$osi-foreground-light});
+  }
+}
+
+// Firefox scrollbar styling
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--muted-foreground, #{tokens.$osi-gray-400})
+    var(--muted, #{tokens.$osi-gray-200});
+}
+
+// ============================================
+// PRINT STYLES
+// ============================================
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+}

package/styles/responsive.scss

@@ -0,0 +1,326 @@
+/**
+ * OSI Cards - Responsive Design System
+ * 
+ * Breakpoints and responsive utilities for cards and sections.
+ */
+
+// ============================================
+// Breakpoint Variables
+// ============================================
+
+$breakpoints: (
+  "xs": 320px,
+  "sm": 480px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px,
+  "2xl": 1536px,
+);
+
+// ============================================
+// Responsive Mixins
+// ============================================
+
+/// Media query for minimum width (mobile-first)
+@mixin responsive($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @media (min-width: $breakpoint) {
+      @content;
+    }
+  }
+}
+
+/// Media query for maximum width
+@mixin responsive-down($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media (max-width: #{map-get($breakpoints, $breakpoint) - 1px}) {
+      @content;
+    }
+  } @else {
+    @media (max-width: #{$breakpoint - 1px}) {
+      @content;
+    }
+  }
+}
+
+/// Media query for range
+@mixin responsive-between($min, $max) {
+  $min-width: if(map-has-key($breakpoints, $min), map-get($breakpoints, $min), $min);
+  $max-width: if(map-has-key($breakpoints, $max), map-get($breakpoints, $max), $max);
+
+  @media (min-width: $min-width) and (max-width: #{$max-width - 1px}) {
+    @content;
+  }
+}
+
+// ============================================
+// Container Queries
+// ============================================
+
+@mixin container($name: card) {
+  container-type: inline-size;
+  container-name: $name;
+}
+
+@mixin container-query($name, $min-width: null, $max-width: null) {
+  @if $min-width and $max-width {
+    @container #{$name} (min-width: #{$min-width}) and (max-width: #{$max-width}) {
+      @content;
+    }
+  } @else if $min-width {
+    @container #{$name} (min-width: #{$min-width}) {
+      @content;
+    }
+  } @else if $max-width {
+    @container #{$name} (max-width: #{$max-width}) {
+      @content;
+    }
+  }
+}
+
+// ============================================
+// Card Responsive Styles
+// ============================================
+
+.osi-card-container {
+  @include container(card);
+
+  // Base mobile styles
+  --card-padding: 0.75rem;
+  --card-gap: 0.5rem;
+  --card-title-size: 1rem;
+  --section-title-size: 0.875rem;
+  --field-label-size: 0.75rem;
+  --field-value-size: 0.875rem;
+
+  @include responsive("sm") {
+    --card-padding: 1rem;
+    --card-gap: 0.75rem;
+    --card-title-size: 1.125rem;
+  }
+
+  @include responsive("md") {
+    --card-padding: 1.25rem;
+    --card-gap: 1rem;
+    --card-title-size: 1.25rem;
+    --section-title-size: 1rem;
+  }
+
+  @include responsive("lg") {
+    --card-padding: 1.5rem;
+    --card-gap: 1.25rem;
+    --card-title-size: 1.375rem;
+  }
+}
+
+// ============================================
+// Grid Responsive Utilities
+// ============================================
+
+.masonry-container {
+  // Mobile: 1 column
+  --masonry-columns: 1;
+
+  @include responsive("sm") {
+    --masonry-columns: 2;
+  }
+
+  @include responsive("lg") {
+    --masonry-columns: 3;
+  }
+
+  @include responsive("xl") {
+    --masonry-columns: 4;
+  }
+}
+
+// Container query based columns
+.masonry-container--container-responsive {
+  @include container-query(card, $min-width: 400px) {
+    --masonry-columns: 2;
+  }
+
+  @include container-query(card, $min-width: 700px) {
+    --masonry-columns: 3;
+  }
+
+  @include container-query(card, $min-width: 1000px) {
+    --masonry-columns: 4;
+  }
+}
+
+// ============================================
+// Section Responsive Styles
+// ============================================
+
+.ai-section {
+  // Info section: stack fields on mobile
+  &--info {
+    .section-field-grid {
+      grid-template-columns: 1fr;
+
+      @include responsive("sm") {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @include responsive("lg") {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+  }
+
+  // Analytics section: adjust metric sizes
+  &--analytics {
+    .metric-grid {
+      grid-template-columns: 1fr;
+
+      @include responsive("xs") {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @include responsive("md") {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+
+    .metric-value {
+      font-size: 1.5rem;
+
+      @include responsive("md") {
+        font-size: 2rem;
+      }
+    }
+  }
+
+  // Timeline section: horizontal on desktop
+  &--timeline {
+    .timeline-items {
+      flex-direction: column;
+
+      @include responsive("lg") {
+        flex-direction: row;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+
+        > * {
+          scroll-snap-align: start;
+          min-width: 280px;
+        }
+      }
+    }
+  }
+
+  // Contact section: adjust layout
+  &--contact {
+    .contact-grid {
+      grid-template-columns: 1fr;
+
+      @include responsive("sm") {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+}
+
+// ============================================
+// Typography Responsive Utilities
+// ============================================
+
+.text-responsive {
+  font-size: clamp(0.875rem, 2vw, 1rem);
+  line-height: 1.5;
+}
+
+.heading-responsive {
+  font-size: clamp(1.25rem, 4vw, 2rem);
+  line-height: 1.2;
+}
+
+// ============================================
+// Spacing Responsive Utilities
+// ============================================
+
+.space-responsive {
+  padding: clamp(0.5rem, 2vw, 1.5rem);
+}
+
+.gap-responsive {
+  gap: clamp(0.5rem, 2vw, 1rem);
+}
+
+// ============================================
+// Touch Target Utilities
+// ============================================
+
+.touch-target {
+  min-height: 44px;
+  min-width: 44px;
+
+  @include responsive("lg") {
+    min-height: 36px;
+    min-width: 36px;
+  }
+}
+
+// ============================================
+// Visibility Utilities
+// ============================================
+
+.hide-mobile {
+  @include responsive-down("md") {
+    display: none !important;
+  }
+}
+
+.hide-desktop {
+  @include responsive("md") {
+    display: none !important;
+  }
+}
+
+.show-mobile {
+  display: none !important;
+
+  @include responsive-down("md") {
+    display: block !important;
+  }
+}
+
+.show-desktop {
+  display: none !important;
+
+  @include responsive("md") {
+    display: block !important;
+  }
+}
+
+// ============================================
+// Print Styles
+// ============================================
+
+@media print {
+  .osi-card-container {
+    --card-padding: 1rem;
+    box-shadow: none;
+    border: 1px solid #ddd;
+    break-inside: avoid;
+  }
+
+  .masonry-container {
+    --masonry-columns: 2;
+    display: block;
+
+    .masonry-item {
+      break-inside: avoid;
+      margin-bottom: 1rem;
+    }
+  }
+
+  .hide-print {
+    display: none !important;
+  }
+}