Progress Stacked Component
   - segments: array - Array of progress segments, each with:
     - value: number - Progress value (required)
     - label: string - Segment label (default: Segment {n})
     - variant: string - Color variant (primary, success, info, warning, danger) (optional)
     - min: number - Minimum value (default: 0)
     - max: number - Maximum value (default: 100)
     - textBg: bool - Whether to use text-bg-* classes for better text contrast (optional)
   - class: string - Additional CSS classes (optional)

    ThemedComponent::make("feedback/progress-stacked")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes (optional)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->label('value') //string - Segment label (default: Segment {n})
	->max('value') //number - Maximum value (default: 100)
	->min('value') //number - Minimum value (default: 0)
	->segments('value') //array - Array of progress segments, each with:
	->textBg('value') //bool - Whether to use text-bg-* classes for better text contrast (optional)
	->value('value') //number - Progress value (required)
	->variant('value') //string - Color variant (primary, success, info, warning, danger) (optional)
	->render();

// Basic stacked progress
echo ThemedComponent::make('feedback/progress-stacked')
    ->segments([
        [
            'value' => 15,
            'label' => 'Segment one'
        ],
        [
            'value' => 30,
            'label' => 'Segment two',
            'variant' => 'success'
        ],
        [
            'value' => 20,
            'label' => 'Segment three',
            'variant' => 'info'
        ]
    ])
    ->class('mb-3')
    ->render();

// Stacked progress with text backgrounds
echo ThemedComponent::make('feedback/progress-stacked')
    ->segments([
        [
            'value' => 20,
            'label' => 'Primary segment',
            'variant' => 'primary',
            'textBg' => true
        ],
        [
            'value' => 25,
            'label' => 'Success segment',
            'variant' => 'success',
            'textBg' => true
        ],
        [
            'value' => 15,
            'label' => 'Warning segment',
            'variant' => 'warning',
            'textBg' => true
        ]
    ])
    ->render();

{# Progress Stacked Component
   - segments: array - Array of progress segments, each with:
     - value: number - Progress value (required)
     - label: string - Segment label (default: Segment {n})
     - variant: string - Color variant (primary, success, info, warning, danger) (optional)
     - min: number - Minimum value (default: 0)
     - max: number - Maximum value (default: 100)
     - textBg: bool - Whether to use text-bg-* classes for better text contrast (optional)
   - class: string - Additional CSS classes (optional)
#}
<div class="progress-stacked {{ content.class|default('') }}">
    {% for segment in content.segments %}
    <div class="progress" 
         role="progressbar" 
         aria-label="{{ segment.label|default('Segment ' ~ loop.index) }}" 
         aria-valuenow="{{ segment.value }}" 
         aria-valuemin="{{ segment.min|default(0) }}" 
         aria-valuemax="{{ segment.max|default(100) }}"
         style="width: {{ segment.value }}%">
        <div class="progress-bar{% if segment.variant %}{% if segment.textBg %} text-bg-{{ segment.variant }}{% else %} bg-{{ segment.variant }}{% endif %}{% endif %}"></div>
    </div>
    {% endfor %}
</div>