Bootstrap Laravel Package

## Getting Started

### Minimal Setup in Laravel (Updated for v5.3.8)
1. **Install via npm** (unchanged):
   ```bash
   npm install bootstrap@5.3.8 @popperjs/core

Add to resources/js/app.js (or your entry file):

import 'bootstrap';

2. Compile Assets (unchanged):

   npm run dev
   

3. First Use Case (updated for WCAG 2.1 compliance):

   <!-- WCAG 2.1 compliant color contrast (new in v5.3.8) -->
   <button class="btn btn-primary" style="--bs-btn-padding-x: 0.5rem; --bs-btn-padding-y: 0.5rem">
       Click Me
   </button>
   <div class="alert alert-success">Success message!</div>
   

4. Documentation:

   • Official docs: getbootstrap.com/docs/5.3
   • Laravel-specific: Laravel Bootstrap Integration Guide
   • New: Focus on WCAG 2.1 compliance fixes in docs.

Implementation Patterns

Common Workflows (Updated)

1. Responsive Layouts (unchanged):

   <div class="container">
       <div class="row">
           <div class="col-md-6">Left Column</div>
           <div class="col-md-6">Right Column</div>
       </div>
   </div>
   

2. Forms with WCAG Compliance (new):

   <!-- Leverage new CSS variables for better contrast -->
   <form>
       <div class="mb-3">
           <label class="form-label" for="email" style="--bs-form-text-opacity: 1;">
               Email
           </label>
           <input type="email" class="form-control" id="email" required>
       </div>
       <button class="btn btn-primary" type="submit">Submit</button>
   </form>
   

3. Modals/Dropdowns (updated for focus behavior):

   <!-- Fixed focus behavior in v5.3.8 (reverted PR #41668) -->
   <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal">
       Open Modal
   </button>
   

4. Component-Based Integration (unchanged):

   @props(['type' => 'info'])
   <div class="alert alert-{{ $type }}" role="alert">
       {{ $slot }}
   </div>
   

5. Dynamic Classes with CSS Variables (new):

   <!-- Use Bootstrap's CSS variables for dynamic theming -->
   <div class="p-3"
        style="--bs-bg: {{ $isDark ? '#212529' : '#ffffff' }};">
       Dynamic content
   </div>
   

6. JavaScript Integration (updated for spinner fixes):

   // Fixed spinner distortion in flex containers (PR #41654)
   document.addEventListener('DOMContentLoaded', () => {
       const spinner = new bootstrap.Spinner(document.getElementById('spinner'));
       document.getElementById('load-btn').addEventListener('click', () => {
           spinner.start();
           // Simulate async task
           setTimeout(() => spinner.stop(), 2000);
       });
   });
   

Integration Tips (Updated)

1. Asset Optimization (unchanged):

   // vite.config.js
   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import purgecss from 'vite-plugin-purgecss';
   
   export default defineConfig({
       plugins: [
           laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true }),
           purgecss({
               content: ['./resources/**/*.blade.php'],
               safelist: {
                   standard: ['btn', 'btn-primary', /^bg-/],
               },
           }),
       ],
   });
   

2. WCAG 2.1 Compliance (new):

   • Use Bootstrap's built-in color-contrast() function (fixed in PR #41585):

     // resources/scss/app.scss
     @import "bootstrap/scss/bootstrap";
     .my-text {
         color: #333;
         @include color-contrast(); // Ensures WCAG compliance
     }
     

   • Test contrast ratios using WebAIM Contrast Checker.

3. Custom Theming with CSS Variables (updated):

   // resources/scss/custom.scss
   :root {
       --bs-body-bg: #f8f9fa;
       --bs-body-color: #212529;
       --bs-border-color: #dee2e6;
   }
   @import "bootstrap/scss/bootstrap";
   

4. Laravel Collective Integration (unchanged):

   {!! Form::open(['class' => 'needs-validation', 'novalidate']) !!}
       {!! Form::email('email', null, ['class' => 'form-control is-valid', 'required']) !!}
       {!! Form::submit('Submit', ['class' => 'btn btn-primary']) !!}
   {!! Form::close !!}
   

5. Search Input Fix (new):

   <!-- Fixed cursor pointer on search cancel button (PR #41639) -->
   <div class="input-group">
       <input type="text" class="form-control" placeholder="Search">
       <button class="btn btn-outline-secondary" type="button">
           <svg class="bi bi-x" width="16" height="16"></svg>
       </button>
   </div>
   

Gotchas and Tips

Pitfalls (Updated)

1. CSS Specificity Conflicts (unchanged):

   • Fix: Use !important sparingly or increase specificity.

2. JavaScript Initialization (updated):

   • Spinner Distortion: Fixed in v5.3.8 (PR #41654). Ensure flex containers don’t distort spinners:

     .spinner-container {
         display: flex;
         align-items: center;
     }
     

   • Dropdown Focus: Reverted in v5.3.8 (PR #41668). If you relied on explicit focus returns, update your JS.

3. Asset Loading Order (unchanged):

   • Ensure CSS loads before JS. In Laravel, compile CSS first in your entry file.

4. Laravel Mix/Vite Quirks (updated):

   • Vite Configuration: Ensure bootstrap is imported in your entry file:

     // resources/js/app.js
     import '../css/app.css';
     import 'bootstrap@5.3.8';
     

   • PurgeCSS: Safelist new classes like color-contrast() utilities.

5. Form Validation (updated):

   • WCAG Compliance: Ensure validation messages meet contrast requirements:

     <div class="invalid-feedback" style="--bs-feedback-text-opacity: 1;">
         {{ $message }}
     </div>
     

6. Dynamic Content (new):

   • MutationObserver: Use for dynamic tooltips/modals (fixed in v5.3.8):

     const observer = new MutationObserver(() => {
         bootstrap.Tooltip.getOrCreateInstance(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
     });
     observer.observe(document.body, { childList: true, subtree: true });
     

Debugging Tips (Updated)

1. Inspect Elements (unchanged):

   • Check for overridden styles or missing JS initialization.

2. Disable Cache (unchanged):

   npm run dev -- --no-cache
   

3. Check Console Errors (updated):

   • New Errors:
     • Uncaught TypeError: bootstrap.Spinner is not a constructor → Ensure bootstrap.bundle.min.js is loaded.
     • color-contrast() function not working → Verify SCSS compilation includes the fix (PR #41585).

4. WCAG Validation (new):

   • Use axe DevTools to validate contrast ratios:

     npm install -g axe-core
     axe "http://your-laravel-app.test"
     

5. Spinner Debugging (new):

   • If spinners distort in flex containers, add:

     .spinner-border, .spinner-grow {
         flex-shrink: 0;
     }
     

Extension Points (Updated)

1. Custom Components (updated):
   • Extend Bootstrap’s CSS variables for theming:

     // resources/scss/custom.scss
     $primary: #4e73df;
     $