Enterprise component contracts

Combobox

The optional runtime enhances a combobox consisting of [data-xsh-combobox], a text input with role=combobox and a [role=listbox] with child [role=option] elements. Arrow keys select the active option, Enter commits and Escape dismisses. Items must have meaningful text or data-xsh-value. This is a locally filtered list, not server-backed async autocomplete.

Combobox example

<div class="xsh-combobox" data-xsh-combobox>
 <label for="xsh-city">City</label>
 <input id="xsh-city" class="xsh-input" role="combobox" autocomplete="off" aria-label="City">
 <ul class="xsh-combobox-list" id="xsh-cities" role="listbox" hidden>
  <li id="xsh-city-raipur" role="option" aria-selected="false">Raipur</li>
  <li id="xsh-city-delhi" role="option" aria-selected="false">Delhi</li>
 </ul>
</div>

Paged grid

Use table[data-xsh-paginate="10"] with an ID, plus a pagination container data-xsh-grid-for pointing at the ID or a table with data-xsh-pagination targeting a container. Use an input with data-xsh-grid-search="#xsh-table-id" to search client-side. Paging operates on HTML table rows; it is not virtualization. For thousands of rows or confidential data, use backend pagination and authorization.

Grid example

<div class="xsh-adapt-table">
 <table id="xsh-orders" class="xsh-data-grid" data-xsh-paginate="5" data-xsh-pagination="#xsh-order-pages">
  <thead><tr><th scope="col">Order</th><th scope="col">Amount</th></tr></thead>
  <tbody><tr><td>INV-001</td><td>₹1,200</td></tr></tbody>
 </table>
</div>
<div id="xsh-order-pages" class="xsh-data-grid-foot"></div>

Wizard forms

An element with data-xsh-wizard contains panels with data-xsh-step. Buttons use data-xsh-next and data-xsh-prev. Before moving forward the runtime checks native form constraints in the current panel. Application code must separately enforce server-side validation, authorization and transaction integrity.

Lifecycle

Xshna.init(document) attaches document-level handlers, Xshna.refresh(root) refreshes selected enhanced components after adding DOM, and Xshna.destroy(document) releases handlers. Do not mix multiple JS versions or import both the full bundle and individual modules simultaneously.