@supersoniks/concorde 4.9.98-visual-stack.1 → 5.0.1

package/docs/src/core/components/functional/date/date.md

@@ -1,290 +0,0 @@
-# Date
-
-## No attribute
-
-**Nothing** is displayed.
-
-<sonic-code>
-  <template>
-    <sonic-date></sonic-date>
-  </template>
-</sonic-code>
-
-## Now
-
-Displays the **current date**.
-
-<sonic-code>
-  <template>
-    <sonic-date now></sonic-date>
-  </template>
-</sonic-code>
-
-
-## Date  
-
-Displays a date from a **timestamp**.
-
-<sonic-code>
-  <template>
-    <sonic-date date= "1640265629"></sonic-date>
-  </template>
-</sonic-code>
-
-## Date_string  
-
-Displays a date from a **string**.
-
-<sonic-code>
-  <template>
-    <sonic-date date_string="July 20, 69 20:17:40 GMT+00:00"></sonic-date>
-  </template>
-</sonic-code>
-
-## Start_date / end_date  
-
-Displays a period of time **from start_date to end_date**.  
-When by itself **start_date** will act as **date**  
-if a **start_date is not specified** it will be set by the **current date**.  
-if the **end_date is anterior** to start date date it will be **used as the start_date**. 
-
-<sonic-code>
-  <template>
-    <!-- from start_date to end_date -->
-    <sonic-date start_date="1640265629" end_date= "1640365629"></sonic-date>
-    <br>
-    <!-- start_date is not specified -->
-    <sonic-date end_date= "2640365629"></sonic-date>
-    <br>
-    <!-- end_date is anterior -->
-    <sonic-date end_date= "640365629"></sonic-date>
-  </template>
-</sonic-code>
-
-
-## Start_date_string / end_date_string
-
-<sonic-code>
-  <template>
-    <!-- from start_date to end_date -->
-    <sonic-date date_string="July 20, 90 20:17:40 GMT+00:00" end_date_string= "June 20, 94 20:17:40 GMT+00:00"></sonic-date>
-    <br>
-    <!-- start_date is not specified -->
-    <sonic-date end_date_string= "May 20, 34 20:17:40 GMT+00:00"></sonic-date>
-    <br>
-    <!-- end_date is anterior -->
-    <sonic-date end_date_string= "April 20, 06 20:17:40 GMT+00:00"></sonic-date>
-  </template>
-</sonic-code>
-
-## Wording_billet_periode_validite
-
-<sonic-code>
-  <template>
-    <sonic-date wording_billet_periode_validite= "À partir du %s jusqu'au %s" start_date="1640265629" end_date= "1640365629"></sonic-date>
-  </template>
-</sonic-code>
-
-
-## Weekday
-
-<sonic-code>
-  <template>
-    <b>narrow : </b>
-    <sonic-date weekday="narrow" now></sonic-date>
-    <br>
-    <b>short (default) : </b>
-    <sonic-date weekday="short" now></sonic-date>
-    <br>
-    <b>long : </b>
-    <sonic-date weekday="long" now></sonic-date>
-    <br>
-    <b>hidden : </b>
-    <sonic-date weekday="hidden" now></sonic-date>
-  </template>
-</sonic-code>
-
-## Day
-
-<sonic-code>
-  <template>
-    <b>numeric : </b>
-    <sonic-date day="numeric" date_string="July 01, 69"></sonic-date>
-    <br>
-    <b>2-digit (default) : </b>
-    <sonic-date day="2-digit" date_string="July 01, 69"></sonic-date>
-  </template>
-</sonic-code>
-
-## Month
-
-<sonic-code>
-  <template>
-    <b>numeric : </b>
-    <sonic-date month="numeric" now></sonic-date>
-    <br>
-    <b>2-digit : </b>
-    <sonic-date month="2-digit" now></sonic-date>
-    <br>
-    <b>narrow : </b>
-    <sonic-date month="narrow" now></sonic-date>
-    <br>
-    <b>short (default) : </b>
-    <sonic-date month="short" now></sonic-date>
-    <br>
-    <b>long : </b>
-    <sonic-date month="long" now></sonic-date>
-  </template>
-</sonic-code>
-
-## Year
-
-<sonic-code>
-  <template>
-    <b>numeric (default) : </b>
-    <sonic-date year="numeric" now></sonic-date>
-    <br>
-    <b>2-digit : </b>
-    <sonic-date year="2-digit" now></sonic-date>
-  </template>
-</sonic-code>
-
-## Hour
-
-<sonic-code>
-  <template>
-    <b>numeric : </b>
-    <sonic-date hour="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-    <br>
-    <b>2-digit (default) : </b>
-    <sonic-date hour="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-    <br>
-    <b>hidden : </b>
-    <sonic-date hour="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-  </template>
-</sonic-code>
-
-## Minute
-
-<sonic-code>
-  <template>
-    <b>numeric : </b>
-    <sonic-date minute="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-    <br>
-    <b>2-digit (default) : </b>
-    <sonic-date minute="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-    <br>
-    <b>hidden : </b>
-    <sonic-date minute="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-  </template>
-</sonic-code>
-
-## Language  
-
-<sonic-button href="https://www.w3schools.com/tags/ref_language_codes.asp" target="_blank" type="info" size="sm">ISO 639-1 Language Codes</sonic-button>
-
-<sonic-code>
-  <template>
-    <b>fr : </b>
-    <sonic-date language="fr" now></sonic-date>
-    <br>
-    <b>en : </b>
-    <sonic-date language="en" now></sonic-date>
-    <br>
-    <b>zh : </b>
-    <sonic-date language="zh" now></sonic-date>
-    <br>
-    <b>ja : </b>
-    <sonic-date language="ja" now></sonic-date>
-  </template>
-</sonic-code>
-
-## Time_zone
-
-For the list of supported timeZones, run <b class="text-info">Intl.supportedValuesOf('timeZone')</b> in the console
-
-<sonic-code>
-  <template>
-    <b>Europe/London : </b>
-    <sonic-date time_zone="Europe/London" now></sonic-date>
-    <br>
-    <b>Europe/Paris : </b>
-    <sonic-date time_zone="Europe/Paris" now></sonic-date>
-    <br>
-    <b>America/Tijuana : </b>
-    <sonic-date time_zone="America/Tijuana" now></sonic-date>
-  </template>
-</sonic-code>
-
-## Era  
-
-<sonic-code>
-  <template>
-    <b>narrow : </b>
-    <sonic-date era="narrow" now></sonic-date>
-    <br>
-    <b>short : </b>
-    <sonic-date era="short" now></sonic-date>
-    <br>
-    <b>long : </b>
-    <sonic-date era="long" now></sonic-date>
-  </template>
-</sonic-code>
-
-## .renderIf  
-
-<sonic-alert status="error" background>Deprecated</sonic-alert>
-
-<sonic-code>
-  <template>
-    <b>True statement : </b>
-    <sonic-date data-bind ::render-if="|10>2" now></sonic-date>
-    <br>
-    <b>False statement : </b>
-    <sonic-date data-bind ::render-if="|10<2" now></sonic-date>
-  </template>
-</sonic-code>
-
-## DesignMode  
-
-<sonic-code>
-  <template>
-    <div class="relative max-w-lg rounded-lg overflow-hidden">
-      <div class="absolute top-0 h-1/2 w-full bg-gradient-to-b from-[rgba(0,0,10,.2)] z-10 "></div>
-      <sonic-date
-        designMode
-        noShadowDom
-        start_date= "1640265629"
-        end_date= "1640365629"
-        language= "fr"
-        wording_billet_periode_validite= "Du %s au %s"
-        year= "numeric"
-        month= "short"
-        weekday= "short"
-        hour= "2-digit"
-        minute= "2-digit"
-        class="py-4 drop-shadow-lg text-contrast-content p-4 inline-block text-center absolute left-0 z-20 text-sm"
-      >
-        <template data-value="weekday">
-          <span class="hidden"></span>
-        </template>
-        <template data-value="day">
-          <span class="text-4xl block uppercase leading-none font-bold"></span>
-        </template>
-        <template data-value="month">
-          <span class="text-xl block uppercase leading-tight font-bold"></span>
-        </template>
-        <template data-value="year">
-          <span class="text-lg  mb-1 font-bold  block uppercase leading-tight "></span>
-        </template>
-        <template data-value="to">
-          <span class="font-medium block my-1 text-3xl leading-none">↓</span>
-        </template>
-      </sonic-date>
-      <sonic-image 
-      ratio="1/1" src="https://picsum.photos/id/237/700/700">
-      </sonic-image>
-    </div>
-  </template>
-</sonic-code>
-

package/docs/src/core/components/functional/fetch/fetch.md

@@ -1,125 +0,0 @@
-# Fetch
-
-> **New apps:** prefer [@get](#docs/_decorators/get.md/get) for a typed GET on a component, or [List](#core/components/functional/list/list.md/list) / [Queue](#core/components/functional/queue/queue.md/queue) with `fetch` for collections. Use [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api) (`serviceURL="/docs-mock-api"`) to try examples offline.
-
-The **sonic-fetch** component requests and stores API data. It extends the Fetcher and [Subscriber](#docs/_core-concept/subscriber.md/subscriber) mixins.
-
-
-
-
-
-## Basic usage
-In order to work properly the <b>sonic-fetch</b> component needs at least the following attributes.  
-- **serviceURL** : A base service url. This attribute can be inherited from an ancestor.
-  *ex : /docs-mock-api*
-- **endPoint** : the specific location where requests for information are sent (see the api docs).  
-  *ex : api/users | api/users?page=2 | api/users/2*
-- **dataProvider *(Required)*** : An ID that is used as a reference to the object storing the data returned by the API.
-This attribute can be inherited from an ancestor.
-
-
-
-<sonic-code>
-  <template>
-    <sonic-fetch serviceURL="/docs-mock-api" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
-    <sonic-button dataProvider="myDataObj" debug>Hover to see the data</sonic-button>
-  </template>
-</sonic-code>
-
-## DataProvider as an endPoint
-If no **endPoint** is specified it will be filled by the **dataProvider ID** instead  
-
-<sonic-code>
-  <template>
-    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="api/users?page=2" ></sonic-fetch>
-    <sonic-button dataProvider="api/users?page=2" debug>Hover to see the data</sonic-button>
-  </template>
-</sonic-code>
-
-## HeadersDataProvider
-
-<sonic-alert status="error" background>Deprecated</sonic-alert>
-
-## Key
-When the **key** attribute is present, only a sub-part of the data received is injected into the **dataProvider**.
-We can use the dot syntax to target what we want to keep.
-
-For example if the data is `{my:{data:{a:1,b:2}}}` and the key is `key="my.data"`, the data available in the **dataProvider** will be `{a:1 , b:2}`
-
-<sonic-code>
-  <template>
-    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="api/users/2" ></sonic-fetch>
-    <sonic-button dataProvider="api/users/2" debug>dataProvider object</sonic-button>
-    <!-- Get the user ID -->
-    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="id" endPoint="api/users/2" key="data.id"></sonic-fetch>
-    <sonic-button dataProvider="id" debug>data.id</sonic-button>
-    <!-- Get the user First name -->
-    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="first_name" endPoint="api/users/2" key="data.first_name"></sonic-fetch>
-    <sonic-button dataProvider="first_name" debug>data.first_name</sonic-button>
-    <!-- Get the user Last name -->
-    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="last_name" endPoint="api/users/2" key="data.last_name"></sonic-fetch>
-    <sonic-button dataProvider="last_name" debug>data.last_name</sonic-button>
-    <!-- Get the user email -->
-    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="email" endPoint="api/users/2" key="data.email"></sonic-fetch>
-    <sonic-button dataProvider="email" debug>data.email</sonic-button>
-  </template>
-</sonic-code>
-
-## Text mode
-
-if the mime type of the content returned by the service begins with **text/**, then the dataProvider has a key named "text" which contains the text returned by the service.
-
-<sonic-code>
-  <template>
-    <sonic-fetch endPoint="README.md" dataProvider="fetchText"></sonic-fetch>
-    <sonic-button dataProvider="fetchText" debug>Hover to see the data</sonic-button>
-  </template>
-</sonic-code>
-
-## NoLoader
-
-The noLoader attribute disables display of the default loader
-
-<sonic-code>
-  <template>
-    <sonic-fetch noLoader serviceURL="/docs-mock-api" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
-    <sonic-button dataProvider="myDataObj" debug>Basic fetch with noLoader attribute</sonic-button>
-  </template>
-</sonic-code>
-
-
-
-
-<!--
- ## Summary
- Extends mixins : Fetcher, [Subscriber](#core/components/functional/subscriber/subscriber.md/subscriber)
- 
- ### Configuration via les attributs
-
-| nom          | sur quelle balise | Description | Exemple de valeur | défaut / requis |
-|-----|-----|---|---|---|
-| serviceURL   |Fetcher ou un de ses parents | URL de base des services. | http://la-billetterie.net/api/v2 | domain du site |
-| endpoint   |Fetcher | point d'accès d'un service | user/2 | valeur de l'attribut dataProvider |
-| dataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données, voir [subscriber](#core/components/functional/subscriber/subscriber.md/subscriber). | billetterie/user/2 | *REQUIS* |
-| headersDataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données destinées à être envoyées en entêtes de la requetes | MyCoockieHEaders | null |
-| key  |Fetcher  | extrait une sous propriété de la donnée chargée avant de l'assignée à son publisher | ma.data | null |
-
- *Si la données est `{ma:{data:{a:1,b:2}}}` et `key="ma.data"`, la données disponible dans le composant sera `{a:1, b:2}`*
- 
- ### Intégration auto de basic auth (pour tester une api qui nécessite une authentification) 
-
- Fetch utilise le service pour générer le token et l'ajoute au header de l'appel qui récupère les données.
-
-| nom           | sur quelle balise | Description | Exemple de valeur | défaut / requis |
-|-----|-----|---|---|---|
-| userName      | Fetcher ou un de ses parents | Nom de l'utilisateur | DjuDju | null |
-| password      | Fetcher ou un de ses parents | mot de passe | pom_549 | null |
-| tokenProvider | Fetcher ou un de ses parents | point d'accès du service fournissant le token | auth | null |
-| token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
-
- ### Autres choses utiles
- L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
- On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
- endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
--->
-

package/docs/src/core/components/functional/if/if.md

@@ -1,9 +0,0 @@
-# if
-
-The **sonic-if** component shows its slot when **`.condition`** is true. In Lit, bind `.condition` from store-driven state (`@subscribe` on a `formDataProvider` field) — live preview and **TypeScript source are the same file** (`docs-lit-demo`):
-
-<docs-lit-demo for="docs-toggle-if-demo"></docs-lit-demo>
-
-Plain HTML without Lit: [HTML integration](#docs/_misc/html-integration.md/html-integration).
-
-

package/docs/src/core/components/functional/jsonata/jsonata.md

@@ -1,56 +0,0 @@
-# Jsonata
-
-`sonic-jsonata` : **1 input → expression → 1 output** (readonly).
-
-Unidirectional (fetch → compute → display), unlike [`sonic-mix`](#core/components/functional/mix/mix.md/mix).
-
-> Offline : `serviceURL="/docs-mock-api"` — [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api).
-
-## Demos
-
-### Groupby + top N
-
-Change **Top N** → recalcul sans refetch.
-
-<docs-lit-demo for="docs-jsonata-space-cats-demo"></docs-lit-demo>
-
-### Totaux (somme + taxe)
-
-Change **Tax %** → même idée.
-
-<docs-lit-demo for="docs-jsonata-table-totals-demo"></docs-lit-demo>
-
-## Attributes
-
-| Attribute | Role |
-|-----------|------|
-| `inputProvider` | Entrée (`$input` dans l’expression) |
-| `outputProvider` | Sortie (readonly) |
-| `expression` | Expression JSONata |
-| `formDataProvider` | Form optionnel (`$top`, `$taxPercent`, …) — même id que le form |
-| `outputSchema` | Schéma léger optionnel (`type`, `required`) |
-
-## Helpers
-
-`$ucFirst` · `$currency` · `$percent` · `$date` · `$toChart(items, labelKey, valueKey, datasetLabel?)`
-
-Pas de DOM, pas de réseau, pas d’`eval`.
-
-## Markup
-
-<sonic-code language="html">
-  <template>
-&lt;sonic-jsonata
-  inputProvider="api/space-cats"
-  outputProvider="leaderboard"
-  formDataProvider="topForm"
-  expression='$input{name: $sum(points)} ~> $each(function($v,$k){{"name":$k,"points":$v}}) ^(>points)[[0..$number($top)-1]]'
-&gt;&lt;/sonic-jsonata&gt;
-  </template>
-</sonic-code>
-
-Pour du multi-entrées ou une fonction TS : primitive [`derive`](#docs/_core-concept/dataFlow.md/dataFlow).
-
-## States
-
-`{output}/_state_` → `{ status, error? }` (`loading` | `ready` | `error` | `empty`). Brancher avec `sonic-states`.

package/docs/src/core/components/functional/list/list.md

@@ -1,65 +0,0 @@
-# List
-
-> **Try offline:** `serviceURL="/docs-mock-api"` and `dataProvider="api/users"` with `key="data"` — see [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api). Recommended patterns: [Data flow](#docs/_core-concept/dataFlow.md/dataFlow).
-
-The **sonic-list** component renders one row per entry in **`props`** (array from fetch or set on the element).
-
-List extends [Subscriber](#docs/_core-concept/subscriber.md/subscriber) and **Fetcher**:
-* **Subscriber** — `props` + `dataProvider`
-* **Fetcher** — optional `fetch` + `serviceURL` / `key` (see [Fetch](#core/components/functional/fetch/fetch.md/fetch))
-
-## Row renderer (`items`) — recommended
-
-From a **Lit** parent, pass a function on the **`items`** property (`ListItems`). Each row is wrapped in a `sonic-subscriber` with `dataProvider="…/list-item/n"` (hover rows with `debug`).
-
-```typescript
-private items = ({ first_name, last_name, email, avatar }) => html`
-  <sonic-image src=${avatar} …></sonic-image>
-  <div>${first_name} <b>${last_name}</b></div>
-  <div>${email}</div>
-`;
-
-html`<sonic-list
-  fetch
-  dataProvider="api/users"
-  key="data"
-  serviceURL="/docs-mock-api"
-  .items=${this.items}
-></sonic-list>`;
-```
-
-Use **`.items=${fn}`** (property binding): Lit passes functions only as properties, not as HTML attributes — `@property({ type: Function })` does not change that. Same for **`.noItems`**, **`.separator`**, **`.skeleton`**. The callback receives each row object (replacing `data-bind` / `<sonic-value>` in a `<template>`).
-
-Live demo + TypeScript source (one file, no Markdown copy):
-
-<docs-lit-demo for="docs-users-list"></docs-lit-demo>
-
-Implementation: `src/docs/example/docs-users-list.ts` — row markup in the **`items`** callback (`item.first_name`, …), same idea as replacing `data-bind` / `<sonic-value>` in a `<template>`.
-
-## Alternating row layouts
-
-Use **`metadata`** (`even`, `odd`, `firstChild`, …) or fields on each item (e.g. `tpl` with `templateKey`):
-
-<docs-lit-demo for="docs-list-alternate-demo"></docs-lit-demo>
-
-<docs-lit-demo for="docs-list-template-key-demo"></docs-lit-demo>
-
-## Separator and empty list
-
-<docs-lit-demo for="docs-list-separator-demo"></docs-lit-demo>
-
-## Fetch + `extractValues`
-
-<docs-lit-demo for="docs-list-extract-values-demo"></docs-lit-demo>
-
-## HTML `<template>` children (integration without Lit)
-
-For **plain HTML** hosts, you can still declare **`<template>`** children (and `data-value` for `templateKey`, `separator`, `no-item`). That path is for [HTML integration](#docs/_misc/html-integration.md/html-integration) — not used in Concorde doc live demos.
-
-Each list row still gets `dataProvider="[list]/list-item/[index]"`.
-
-## Additionnal tips
-
-* If the request returns an object, it is wrapped in an array (unless `extractValues` is set).
-* Call **`invalidate()`** on the list publisher to reload fetch data.
-* Each row publisher exposes **`_parent_`** pointing at the list publisher.

package/docs/src/core/components/functional/mix/mix.md

@@ -1,41 +0,0 @@
-# Mix
-
-Mix allows you to mix several subsets of dataProvider in a new key/value structure which is itself associated with a new dataProvider. The data update is then bidirectional.
-
-Dot notation is supported to extract a sub-part of the data.
-
-For example, if we declare dataproviders as follows :
-<sonic-code>
-  <template>
-    <sonic-subscriber dataProvider="dataToMixA" props='{"foo":{"bar":2}}'></sonic-subscriber>
-    <sonic-subscriber dataProvider="dataToMixB" props='{"baz":3}'></sonic-subscriber>
-  </template>
-</sonic-code>
-We can rearrange the data as follows
-<sonic-code>
-  <template>
-    <sonic-mix dataProvider="mixedData" composition='{"either":"dataToMixB","orThat":"dataToMixA.foo.bar"}'>
-      <div>Value of dataToMixA.foo.bar and mixedData.orThat : <sonic-value key="orThat"></sonic-value></div>
-      <div>Value of dataToMixB.baz and mixedData.either.baz : <sonic-value key="either.baz"></sonic-value></div>
-    </sonic-mix>
-  </template>
-</sonic-code>
-Then we can change values in both dataProviders programaticaly this way, they will stay in sync
-<sonic-code language="javascript">
-  <template>
-  SonicPublisherManager.get("mixedData").either.baz=6;
-  SonicPublisherManager.get("dataToMixB").baz=8;
-  SonicPublisherManager.get("dataToMixA").foo.bar=8;
-  SonicPublisherManager.get("mixedData").orThat=6;
-  </template>
-</sonic-code>
-Or by using a form element
-<sonic-code>
-<template>
-<sonic-input label="mixedData.orThat" formDataProvider="mixedData" name="orThat"></sonic-input>
-</template>
-</sonic-code>
-
-
-
-

package/docs/src/core/components/functional/queue/queue.md

@@ -1,72 +0,0 @@
-# Queue
-
-> **Try offline:** `serviceURL="/docs-mock-api"` — see [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api). Row rendering: [Data flow](#docs/_core-concept/dataFlow.md/dataFlow) (`.items` property binding).
-
-**sonic-queue** loads data in **batches**. Each batch is an internal [List](#core/components/functional/list/list.md/list) with its own `dataProvider` (`…/list-item/0`, `…/1`, …).
-
-| Mechanism | Role |
-|-----------|------|
-| **`dataProviderExpression`** | API path template; `$offset` and `$limit` are replaced per batch |
-| **`lazyload`** | Load the next batch when the user scrolls near the end |
-| **`dataFilterProvider`** | Publisher id of a form (`formDataProvider`); field values are merged into the request query string |
-| **`filteredFields`** | Optional list of form field names to **exclude** from the query (space-separated) — omit when every field should be sent |
-| **`.items`**, **`.noItems`**, **`.separator`**, **`.skeleton`** | Lit callbacks forwarded to each batch list (use the **dot** — functions are properties, not attributes) |
-
-## Lazy load — `$offset` and `$limit`
-
-When the expression contains **`$offset`** and **`$limit`**, the queue:
-
-1. Fetches the first batch with `offset=0` (or the initial `offset` attribute) and `per_page=$limit`.
-2. On scroll, appends a batch with `offset` increased by the previous batch size.
-3. Stops when a batch returns fewer rows than `limit` (or none).
-
-The doc mock implements this on `GET /docs-mock-api/api/users?offset=…&per_page=…` (`paginateUsers` in `src/docs/mock-api/router.ts`).
-
-<docs-lit-demo for="docs-queue-users-demo"></docs-lit-demo>
-
-Wrap the queue in a **fixed height** with **`overflow-y-auto`** so lazy load triggers when scrolling inside the box (same layout as the [TS starter](https://github.com/supersoniks/create-concorde-ts-starter) `demo-queue-templates`).
-
-Try scrolling after load — batches of 4 users. Search e.g. `George`, `Bluth`, or `zzz` for empty results.
-
-### Expression example
-
-```typescript
-html`<sonic-queue
-  lazyload
-  serviceURL="/docs-mock-api"
-  dataProviderExpression="api/users?offset=$offset&limit=$limit"
-  key="data"
-  limit="4"
-  class="grid max-h-96 overflow-y-auto"
-  .items=${this.renderUser}
-></sonic-queue>`;
-```
-
-Without **`$offset`** in the expression, the queue behaves like a single list (one batch), e.g. geo communes below.
-
-## Filter — `dataFilterProvider` + `q`
-
-One search field (`name="q"`) on `formDataProvider="filter"`. The queue listens via **`dataFilterProvider="filter"`** and, on change:
-
-1. Resets loaded batches.
-2. Appends each non-empty form field to the query (here only **`q`** — no `filteredFields` needed).
-3. Fetches again from offset `0`.
-
-Use **`filteredFields`** only when the form has extra fields that must **not** be sent to the API (e.g. `filteredFields="rememberMe internalId"`).
-
-The mock API filters before pagination — same haystack logic as the starter (`filterDocsUsers` in `src/docs/mock-api/fixtures.ts`, used by `paginateUsers` in `router.ts` / Service Worker):
-
-```typescript
-const haystack = `${first_name} ${last_name} ${email}`.toLowerCase();
-return haystack.includes(q);
-```
-
-## Simple batch (no lazy scroll)
-
-Geo communes: expression uses **`$limit` only** (no `$offset`) — one request, one batch.
-
-<docs-lit-demo for="docs-queue-geo-demo"></docs-lit-demo>
-
-## HTML `<template>` children
-
-Optional for hosts without Lit — see [HTML integration](#docs/_misc/html-integration.md/html-integration).