# HTML IDs


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## CardStackHtmlIds

All DOM element IDs are derived from a configurable prefix, enabling
multiple card stack instances on the same page without ID collisions.

------------------------------------------------------------------------

<a
href="https://github.com/cj-mills/cjm-fasthtml-card-stack/blob/main/cjm_fasthtml_card_stack/core/html_ids.py#L13"
target="_blank" style="float:right; font-size:smaller">source</a>

### CardStackHtmlIds

``` python

def CardStackHtmlIds(
    prefix:str
)->None:

```

*Prefix-based HTML ID generator for card stack DOM elements.*

``` python
# Test CardStackHtmlIds with default-style prefix
ids = CardStackHtmlIds(prefix="cs0")
assert ids.card_stack == "cs0-card-stack"
assert ids.card_stack_inner == "cs0-card-stack-inner"
assert ids.card_stack_empty == "cs0-card-stack-empty"
assert ids.viewport_section_before == "cs0-viewport-section-before"
assert ids.viewport_section_focused == "cs0-viewport-section-focused"
assert ids.viewport_section_after == "cs0-viewport-section-after"
assert ids.card_count_select == "cs0-card-count-select"
assert ids.card_count_slider == "cs0-card-count-slider"
assert ids.card_count_auto_toggle == "cs0-card-count-auto-toggle"
assert ids.width_slider == "cs0-width-slider"
assert ids.scale_slider == "cs0-scale-slider"
assert ids.settings_modal == "cs0-settings-modal"
assert ids.progress == "cs0-progress"
assert ids.loading == "cs0-loading"
assert ids.focused_index_input == "cs0-focused-index"
print("CardStackHtmlIds default prefix tests passed!")
```

``` python
# Test viewport_slot method (unified IDs for items and placeholders)
ids = CardStackHtmlIds(prefix="cs0")
# Real items
assert ids.viewport_slot(0) == "cs0-item-slot-0"
assert ids.viewport_slot(3) == "cs0-item-slot-3"
assert ids.viewport_slot(8) == "cs0-item-slot-8"
# Placeholders (negative indices for before-start)
assert ids.viewport_slot(-1) == "cs0-item-slot--1"
assert ids.viewport_slot(-2) == "cs0-item-slot--2"
# Placeholders (indices >= total_items for after-end)
assert ids.viewport_slot(20) == "cs0-item-slot-20"
assert ids.viewport_slot(21) == "cs0-item-slot-21"
print("Viewport slot tests passed!")
```

    Viewport slot tests passed!

``` python
# Test multi-instance uniqueness
ids_a = CardStackHtmlIds(prefix="text-stack")
ids_b = CardStackHtmlIds(prefix="vad-stack")
assert ids_a.card_stack == "text-stack-card-stack"
assert ids_b.card_stack == "vad-stack-card-stack"
assert ids_a.card_stack != ids_b.card_stack
assert ids_a.viewport_slot(0) != ids_b.viewport_slot(0)
assert ids_a.viewport_slot(-1) != ids_b.viewport_slot(-1)
print("Multi-instance uniqueness tests passed!")
```

    Multi-instance uniqueness tests passed!