osi-cards-lib 1.5.30 → 1.5.32

package/styles/core/_bootstrap-reset.scss

@@ -1,445 +0,0 @@
-/* ===================================================================
-   BOOTSTRAP & BOOSTED STYLE ISOLATION
-   Reset Bootstrap/Boosted Variables and Styles for Complete Isolation
-   =================================================================== */
-/* 
- * This file resets all Bootstrap/Boosted CSS variables and common styles
- * within OSI Cards containers to prevent style conflicts when cards are
- * imported into applications that use Bootstrap or Orange Boosted.
- * 
- * Supported Frameworks:
- *   - Bootstrap 5.x
- *   - Orange Boosted 5.x
- *   - DataTables
- * 
- * Usage:
- *   This file is automatically imported in scoped stylesheets.
- *   All framework variables are reset to 'unset' within .osi-cards-container
- *   and .ai-card-surface to ensure complete isolation.
- * 
- * NOTE: This file is imported INSIDE .osi-cards-container { } in _styles-scoped.scss
- */
-
-/* Reset all Bootstrap/Boosted CSS variables - applied to parent container via & */
-&,
-.ai-card-surface,
-article.ai-card-surface {
-  /* Reset Bootstrap color variables */
-  --bs-blue: unset;
-  --bs-indigo: unset;
-  --bs-purple: unset;
-  --bs-pink: unset;
-  --bs-red: unset;
-  --bs-orange: unset;
-  --bs-yellow: unset;
-  --bs-green: unset;
-  --bs-teal: unset;
-  --bs-cyan: unset;
-  --bs-black: unset;
-  --bs-white: unset;
-  --bs-gray: unset;
-  --bs-gray-dark: unset;
-  --bs-gray-100: unset;
-  --bs-gray-200: unset;
-  --bs-gray-300: unset;
-  --bs-gray-400: unset;
-  --bs-gray-500: unset;
-  --bs-gray-600: unset;
-  --bs-gray-700: unset;
-  --bs-gray-800: unset;
-  --bs-gray-900: unset;
-  --bs-gray-950: unset;
-
-  /* Reset Bootstrap semantic color variables */
-  --bs-primary: unset;
-  --bs-secondary: unset;
-  --bs-success: unset;
-  --bs-info: unset;
-  --bs-warning: unset;
-  --bs-danger: unset;
-  --bs-light: unset;
-  --bs-dark: unset;
-
-  /* Reset Bootstrap RGB color variables */
-  --bs-primary-rgb: unset;
-  --bs-secondary-rgb: unset;
-  --bs-success-rgb: unset;
-  --bs-info-rgb: unset;
-  --bs-warning-rgb: unset;
-  --bs-danger-rgb: unset;
-  --bs-light-rgb: unset;
-  --bs-dark-rgb: unset;
-  --bs-white-rgb: unset;
-  --bs-black-rgb: unset;
-
-  /* Reset Bootstrap text emphasis variables */
-  --bs-primary-text-emphasis: unset;
-  --bs-secondary-text-emphasis: unset;
-  --bs-success-text-emphasis: unset;
-  --bs-info-text-emphasis: unset;
-  --bs-warning-text-emphasis: unset;
-  --bs-danger-text-emphasis: unset;
-  --bs-light-text-emphasis: unset;
-  --bs-dark-text-emphasis: unset;
-
-  /* Reset Bootstrap background subtle variables */
-  --bs-primary-bg-subtle: unset;
-  --bs-secondary-bg-subtle: unset;
-  --bs-success-bg-subtle: unset;
-  --bs-info-bg-subtle: unset;
-  --bs-warning-bg-subtle: unset;
-  --bs-danger-bg-subtle: unset;
-  --bs-light-bg-subtle: unset;
-  --bs-dark-bg-subtle: unset;
-
-  /* Reset Bootstrap border subtle variables */
-  --bs-primary-border-subtle: unset;
-  --bs-secondary-border-subtle: unset;
-  --bs-success-border-subtle: unset;
-  --bs-info-border-subtle: unset;
-  --bs-warning-border-subtle: unset;
-  --bs-danger-border-subtle: unset;
-  --bs-light-border-subtle: unset;
-  --bs-dark-border-subtle: unset;
-
-  /* Reset Bootstrap typography variables */
-  --bs-font-sans-serif: unset;
-  --bs-font-monospace: unset;
-  --bs-body-font-family: unset;
-  --bs-body-font-size: unset;
-  --bs-body-font-weight: unset;
-  --bs-body-line-height: unset;
-  --bs-body-color: unset;
-  --bs-body-color-rgb: unset;
-  --bs-body-bg: unset;
-  --bs-body-bg-rgb: unset;
-
-  /* Reset Bootstrap emphasis and secondary colors */
-  --bs-emphasis-color: unset;
-  --bs-emphasis-color-rgb: unset;
-  --bs-secondary-color: unset;
-  --bs-secondary-color-rgb: unset;
-  --bs-secondary-bg: unset;
-  --bs-secondary-bg-rgb: unset;
-  --bs-tertiary-color: unset;
-  --bs-tertiary-color-rgb: unset;
-  --bs-tertiary-bg: unset;
-  --bs-tertiary-bg-rgb: unset;
-  --bs-heading-color: unset;
-
-  /* Reset Bootstrap link variables */
-  --bs-link-color: unset;
-  --bs-link-color-rgb: unset;
-  --bs-link-decoration: unset;
-  --bs-link-hover-color: unset;
-  --bs-link-hover-color-rgb: unset;
-
-  /* Reset Bootstrap code and highlight variables */
-  --bs-code-color: unset;
-  --bs-highlight-color: unset;
-  --bs-highlight-bg: unset;
-  --bs-disabled-color: unset;
-  --bs-tertiary-active-bg: unset;
-
-  /* Reset Bootstrap border variables */
-  --bs-border-width: unset;
-  --bs-border-style: unset;
-  --bs-border-color: unset;
-  --bs-border-color-subtle: unset;
-  --bs-border-color-translucent: unset;
-  --bs-border-radius: unset;
-  --bs-border-radius-sm: unset;
-  --bs-border-radius-lg: unset;
-  --bs-border-radius-xl: unset;
-  --bs-border-radius-xxl: unset;
-  --bs-border-radius-2xl: unset;
-  --bs-border-radius-pill: unset;
-
-  /* Reset Bootstrap box shadow variables */
-  --bs-box-shadow: unset;
-  --bs-box-shadow-sm: unset;
-  --bs-box-shadow-lg: unset;
-  --bs-box-shadow-inset: unset;
-
-  /* Reset Bootstrap focus variables */
-  --bs-focus-visible-inner-color: unset;
-  --bs-focus-visible-outer-color: unset;
-  --bs-focus-ring-width: unset;
-  --bs-focus-ring-opacity: unset;
-  --bs-focus-ring-color: unset;
-
-  /* Reset Bootstrap form variables */
-  --bs-form-valid-color: unset;
-  --bs-form-valid-border-color: unset;
-  --bs-form-invalid-color: unset;
-  --bs-form-invalid-border-color: unset;
-  --bs-form-check-filter: unset;
-  --bs-form-check-input-disabled-color: unset;
-  --bs-form-color-disabled-filter: unset;
-  --bs-form-select-indicator: unset;
-  --bs-form-select-disabled-indicator: unset;
-  --bs-form-switch-square-bg: unset;
-  --bs-form-switch-unchecked-invalid-border-color: unset;
-
-  /* Reset Bootstrap table variables */
-  --bs-table-active-bg-factor: unset;
-  --bs-table-hover-bg-factor: unset;
-  --bs-table-striped-bg-factor: unset;
-
-  /* Reset Bootstrap DataTables variables */
-  --dt-row-selected: unset;
-  --dt-row-selected-text: unset;
-  --dt-row-selected-link: unset;
-  --dt-row-stripe: unset;
-  --dt-row-hover: unset;
-  --dt-column-ordering: unset;
-  --dt-header-align-items: unset;
-  --dt-header-vertical-align: unset;
-  --dt-html-background: unset;
-  --dt-row-hover-alpha: unset;
-  --dt-row-stripe-alpha: unset;
-  --dt-column-ordering-alpha: unset;
-  --dt-row-selected-stripe-alpha: unset;
-  --dt-row-selected-column-ordering-alpha: unset;
-
-  /* Reset Bootstrap gradient */
-  --bs-gradient: unset;
-
-  /* Reset Bootstrap gutter variables */
-  --bs-gutter-y: unset;
-  --bs-gutter-x: unset;
-
-  /* Reset Bootstrap breakpoint variables */
-  --bs-breakpoint-xs: unset;
-  --bs-breakpoint-sm: unset;
-  --bs-breakpoint-md: unset;
-  --bs-breakpoint-lg: unset;
-  --bs-breakpoint-xl: unset;
-  --bs-breakpoint-xxl: unset;
-
-  /* Reset Bootstrap icon variables */
-  --bs-chevron-icon: unset;
-  --bs-close-icon: unset;
-  --bs-check-icon: unset;
-  --bs-success-icon: unset;
-  --bs-error-icon: unset;
-
-  /* Reset Bootstrap breadcrumb variables */
-  --bs-breadcrumb-divider-filter: unset;
-
-  /* ===================================================================
-     ORANGE BOOSTED SPECIFIC RESETS
-     =================================================================== */
-
-  /* Reset Boosted color variables */
-  --boosted-orange: unset;
-  --boosted-primary: unset;
-  --boosted-secondary: unset;
-  --boosted-black: unset;
-  --boosted-white: unset;
-
-  /* Reset Boosted functional colors */
-  --o-accessible-orange: unset;
-  --o-accessible-yellow: unset;
-  --o-accessible-green: unset;
-  --o-accessible-blue: unset;
-  --o-accessible-purple: unset;
-  --o-accessible-pink: unset;
-
-  /* Reset Boosted supporting colors */
-  --o-supporting-green: unset;
-  --o-supporting-blue: unset;
-  --o-supporting-purple: unset;
-  --o-supporting-pink: unset;
-  --o-supporting-yellow: unset;
-
-  /* Reset Boosted typography variables */
-  --o-icon-font-family: unset;
-  --o-letter-icon-font-family: unset;
-  --o-stepped-component-size: unset;
-
-  /* Reset Boosted component variables */
-  --o-navbar-item-min-height: unset;
-  --o-navbar-item-padding-y: unset;
-  --o-navbar-bg: unset;
-  --o-nav-link-color: unset;
-  --o-nav-link-hover-color: unset;
-
-  /* Reset Boosted card variables */
-  --o-card-cap-bg: unset;
-  --o-card-cap-color: unset;
-  --o-card-img-overlay-padding: unset;
-
-  /* Reset Boosted accordion variables */
-  --o-accordion-btn-focus-box-shadow: unset;
-  --o-accordion-color: unset;
-  --o-accordion-bg: unset;
-
-  /* Reset Boosted alert variables */
-  --o-alert-bg: unset;
-  --o-alert-color: unset;
-  --o-alert-border-color: unset;
-
-  /* Reset Boosted button variables */
-  --o-btn-social-network-icon-size: unset;
-  --o-btn-social-network-bg: unset;
-
-  /* Reset Boosted badge variables */
-  --o-badge-font-size: unset;
-  --o-badge-font-weight: unset;
-  --o-badge-border-radius: unset;
-
-  /* Reset Boosted footer variables */
-  --o-footer-bg: unset;
-  --o-footer-color: unset;
-  --o-footer-link-color: unset;
-
-  /* Reset Boosted header variables */
-  --o-header-minimized-logo-height: unset;
-  --o-header-height: unset;
-
-  /* ===================================================================
-     CSS ISOLATION
-     =================================================================== */
-
-  /* CSS Isolation - Create new stacking context */
-  isolation: isolate;
-
-  /* Ensure proper box-sizing for card layout */
-  box-sizing: border-box;
-
-  /* Reset inherited font from parent */
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-/* Additional isolation for nested elements - scoped to card surfaces only */
-.ai-card-surface,
-.ai-card-surface *,
-article.ai-card-surface,
-article.ai-card-surface * {
-  /* Reset Bootstrap-specific properties that might leak through */
-  --bs-body-font-family: unset;
-  --bs-body-font-size: unset;
-  --bs-body-font-weight: unset;
-  --bs-body-line-height: unset;
-  --bs-body-color: unset;
-  --bs-body-bg: unset;
-}
-
-/* Prevent Bootstrap utility classes from affecting card elements */
-&,
-.ai-card-surface,
-article.ai-card-surface {
-  /* Ensure Bootstrap's container classes don't affect layout */
-  &[class*="container"],
-  &[class*="row"],
-  &[class*="col"] {
-    /* Reset Bootstrap grid system properties */
-    --bs-gutter-x: unset;
-    --bs-gutter-y: unset;
-  }
-}
-
-/* ===================================================================
-   ELEMENT-LEVEL BOOTSTRAP OVERRIDES
-   Reset all common HTML element styling from Bootstrap/Boosted
-   =================================================================== */
-
-/* Reset article elements */
-article {
-  text-align: left !important;
-  font-size: inherit !important;
-  line-height: inherit !important;
-  border: none !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-/* Reset div elements */
-div {
-  box-sizing: border-box !important;
-  text-align: left !important;
-}
-
-/* Reset button elements within cards */
-button,
-[role="button"] {
-  font-family: inherit !important;
-  font-size: inherit !important;
-  line-height: inherit !important;
-  text-align: left !important;
-}
-
-/* Reset heading elements */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0 !important;
-  padding: 0 !important;
-  font-family: inherit !important;
-  text-align: left !important;
-}
-
-/* Reset paragraph and span elements */
-p,
-span {
-  margin: 0 !important;
-  padding: 0 !important;
-  text-align: left !important;
-}
-
-/* Reset list elements */
-ul,
-ol,
-li {
-  margin: 0 !important;
-  padding: 0 !important;
-  list-style: none !important;
-  text-align: left !important;
-}
-
-/* Reset anchor elements */
-a {
-  text-decoration: none !important;
-  color: inherit !important;
-}
-
-/* Reset image elements */
-img {
-  max-width: 100% !important;
-  height: auto !important;
-}
-
-/* Reset table elements */
-table,
-thead,
-tbody,
-tr,
-th,
-td {
-  border: none !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  text-align: left !important;
-  vertical-align: top !important;
-}
-
-/* Force all child elements to use border-box */
-*,
-*::before,
-*::after {
-  box-sizing: border-box !important;
-}
-
-/* Reset flex and grid containers */
-[class*="grid"],
-[class*="flex"],
-[class*="-grid"],
-[class*="-flex"] {
-  box-sizing: border-box !important;
-}

package/styles/core/_color-helpers.scss

@@ -1,46 +0,0 @@
-// ===================================================================
-// COLOR HELPERS - Re-exports from Master Tokens
-// ===================================================================
-//
-// This file re-exports color variables and functions from the master
-// tokens file for backward compatibility with @import.
-//
-// All color definitions are now in: ../tokens/_master.scss
-//
-// USAGE: Import this file in section SCSS files to access color helpers.
-// ===================================================================
-
-@forward "../tokens/master";
-@use "../tokens/master" as *;
-
-// All color variables, functions, and opacity variants are now
-// exported from the master tokens file:
-//
-// Brand colors:
-//   $brand-color, $brand-color-90...$brand-color-03
-//
-// Foreground colors:
-//   $foreground-color, $foreground-90...$foreground-03
-//
-// Secondary text:
-//   $text-secondary, $text-secondary-50...$text-secondary-05
-//
-// Muted foreground:
-//   $muted-foreground, $muted-foreground-50...$muted-foreground-10
-//
-// White variants:
-//   $white-90...$white-05
-//
-// Status colors:
-//   $success-color, $warning-color, $error-color, $info-color
-//
-// Border/shadow colors:
-//   $border-light, $border-medium, $border-dark
-//   $shadow-light, $shadow-medium, $shadow-dark
-//
-// Background colors:
-//   $card-bg, $section-bg, etc.
-//
-// Functions:
-//   brand-alpha($opacity), foreground-alpha($opacity),
-//   white-alpha($opacity), black-alpha($opacity)

package/styles/core/_global-unified.scss

@@ -1,118 +0,0 @@
-/* ===================================================================
-   UNIFIED GLOBAL STYLES - Scoped for .osi-cards-container
-   Based on docs app _global.scss with selectors scoped to container
-   =================================================================== */
-
-/* Box sizing reset scoped to container */
-& *,
-& *::before,
-& *::after {
-  box-sizing: border-box !important;
-  margin: 0;
-  padding: 0;
-  /* Removed border-color to prevent any border appearance */
-  outline-color: var(--ring);
-}
-
-/* Apply font and color settings to the container itself */
-& {
-  font-family:
-    Helvetica,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Arial,
-    sans-serif;
-  /* Container is fully transparent - host app background shows through */
-  /* Only the card surface (.ai-card-surface) should have a background */
-  background: transparent !important;
-  background-color: transparent !important;
-  color: var(--foreground);
-  line-height: 1.5;
-
-  /* Improved text rendering for sharpness */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  font-feature-settings: "kern" 1;
-}
-
-& button {
-  cursor: pointer;
-  font-family: inherit;
-
-  // Enhanced focus indicators for accessibility
-  &:focus-visible {
-    outline: 2px solid var(--color-brand, #ff7900);
-    outline-offset: 2px;
-    border-radius: 4px;
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-}
-
-// Global focus styles for all interactive elements inside container
-& a,
-& button,
-& input,
-& select,
-& textarea,
-& [tabindex]:not([tabindex="-1"]) {
-  &:focus-visible {
-    outline: 2px solid var(--color-brand, #ff7900);
-    outline-offset: 2px;
-    border-radius: 2px;
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-}
-
-& h1,
-& h2,
-& h3,
-& h4,
-& h5,
-& h6 {
-  margin: 0;
-  line-height: 1.2;
-  font-family:
-    Helvetica,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Arial,
-    sans-serif;
-}
-
-& h1 {
-  font-size: var(--text-2xl);
-  font-weight: var(--font-weight-medium);
-}
-
-& h2 {
-  font-size: var(--text-xl);
-  font-weight: var(--font-weight-medium);
-}
-
-& h3 {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-medium);
-}
-
-& h4 {
-  font-size: var(--text-base);
-  font-weight: var(--font-weight-medium);
-}
-
-& p {
-  font-size: var(--text-base);
-  font-weight: var(--font-weight-normal);
-  line-height: 1.5;
-  margin: 0;
-}

package/styles/core/_global.scss

@@ -1,73 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  /* Removed border-color to prevent any border appearance */
-  outline-color: var(--ring);
-}
-
-html {
-  font-size: var(--font-size);
-}
-
-body {
-  font-family:
-    Helvetica,
-    "Helvetica Neue",
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    sans-serif;
-  background-color: var(--background);
-  color: var(--foreground);
-  line-height: 1.5;
-
-  /* Improved text rendering for sharpness */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  font-feature-settings: "kern" 1;
-}
-
-button {
-  cursor: pointer;
-  font-family: inherit;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  line-height: 1.5;
-}
-
-h1 {
-  font-size: var(--text-2xl);
-  font-weight: var(--font-weight-medium);
-}
-
-h2 {
-  font-size: var(--text-xl);
-  font-weight: var(--font-weight-medium);
-}
-
-h3 {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-medium);
-}
-
-h4 {
-  font-size: var(--text-base);
-  font-weight: var(--font-weight-medium);
-}
-
-p {
-  font-size: var(--text-base);
-  font-weight: var(--font-weight-normal);
-  line-height: 1.5;
-  margin: 0;
-}