osi-cards-lib 1.5.30 → 1.5.32

package/styles/reset/_shadow-reset.scss

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

@@ -1,326 +0,0 @@
-/**
- * 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;
-  }
-}