@supersoniks/concorde 4.6.0 → 4.7.3

package/src/docs/example/docs-list-demos.ts

@@ -0,0 +1,179 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/list/list";
+import "../../core/components/ui/image/image";
+
+const GRID_PROPS = [
+  { id: "1" },
+  { id: "2" },
+  { id: "3" },
+  { id: "4" },
+  { id: "5" },
+  { id: "6" },
+  { id: "7" },
+  { id: "8" },
+  { id: "9" },
+];
+
+const TEMPLATE_KEY_PROPS = [
+  { id: "1", default: "The first template with no data-value is used" },
+  { id: "2", default: "The second template with no data-value is used" },
+  { id: "3", default: "Back to the first template with no data-value" },
+  { id: "4", tpl: "custom-tpl-danger" },
+  { id: "5", tpl: "custom-tpl-info" },
+  { id: "6", tpl: "custom-tpl-success" },
+  { id: "7", tpl: "Non-valid tpl name, Back to the first template with no data-value" },
+];
+
+const TPL_PARTS: Record<string, (item: { id: string }) => ReturnType<typeof html>> = {
+  "custom-tpl-danger": (item) => html`
+    <div class="rounded border border-danger p-2 text-danger">
+      ${item.id} :
+      data-value : <b>custom-tpl-danger</b>
+    </div>
+  `,
+  "custom-tpl-info": (item) => html`
+    <div class="rounded border border-info p-2 text-info">
+      ${item.id} :
+      data-value : <b>custom-tpl-info</b>
+    </div>
+  `,
+  "custom-tpl-success": (item) => html`
+    <div class="rounded border border-success p-2 text-success">
+      ${item.id} :
+      data-value : <b>custom-tpl-success</b>
+    </div>
+  `,
+};
+
+@customElement("docs-list-alternate-demo")
+export class DocsListAlternateDemo extends LitElement {
+  static styles = [tailwind];
+
+  private items = (item: { id: string }, meta: { even?: boolean }) =>
+    meta.even
+      ? html`<div class="bg-neutral-100 p-3 text-center">
+          ${item.id}
+          <div class="text-xs">1st template</div>
+        </div>`
+      : html`<div class="bg-neutral-100 p-3 text-center text-info">
+          ${item.id}
+          <div class="text-xs">2nd template</div>
+        </div>`;
+
+  render() {
+    return html`
+      <sonic-list
+        dataProvider="listTemplateExample"
+        class="grid grid-cols-3 gap-4"
+        .props=${GRID_PROPS}
+        .items=${this.items}
+        debug
+      ></sonic-list>
+    `;
+  }
+}
+
+@customElement("docs-list-template-key-demo")
+export class DocsListTemplateKeyDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    let counter = -1;
+    const items = (item: (typeof TEMPLATE_KEY_PROPS)[number]) => {
+      const tplName = item.tpl;
+      const part = tplName ? TPL_PARTS[tplName] : undefined;
+      if (part) {
+        counter = -1;
+        return part(item);
+      }
+      counter++;
+      return counter % 2 === 0
+        ? html`<div class="rounded border p-2 text-neutral-900">
+            ${item.id} :
+            <b>First</b> template with no <b>data-value</b> attribute
+          </div>`
+        : html`<div class="rounded border p-2 text-neutral-400">
+            ${item.id} :
+            <b>Second</b> template with no <b>data-value</b> attribute <br />
+            Used when it <b>follows</b> another row with <b>no tpl</b> in props
+          </div>`;
+    };
+
+    return html`
+      <sonic-list
+        templateKey="tpl"
+        class="grid gap-3"
+        dataProvider="TemplateKeyExample"
+        .props=${TEMPLATE_KEY_PROPS}
+        .items=${items}
+        debug
+      ></sonic-list>
+    `;
+  }
+}
+
+@customElement("docs-list-separator-demo")
+export class DocsListSeparatorDemo extends LitElement {
+  private items = (item: { id: string }) => html`${item.id}`;
+  private separator = () => html` 🤜 `;
+  private noItems = () =>
+    html`<p class="text-neutral-500">No items (noItems callback)</p>`;
+
+  render() {
+    return html`
+      <sonic-list
+        dataProvider="ListSeparatorDemo"
+        .props=${[{ id: "1" }, { id: "2" }, { id: "3" }]}
+        .items=${this.items}
+        .separator=${this.separator}
+        debug
+      ></sonic-list>
+      <hr class="my-6 border-neutral-200" />
+      <sonic-list
+        dataProvider="ListEmptyDemo"
+        .props=${[]}
+        .items=${this.items}
+        .noItems=${this.noItems}
+        debug
+      ></sonic-list>
+    `;
+  }
+}
+
+@customElement("docs-list-extract-values-demo")
+export class DocsListExtractValuesDemo extends LitElement {
+  static styles = [tailwind];
+
+  private items = (item: { key: string; value: string }) => html`
+    <div class="flex items-center gap-3">
+      <span class="w-24 font-bold">${item.key}</span>
+      <span>${item.value}</span>
+      ${item.key === "avatar"
+        ? html`<sonic-image
+            src=${item.value}
+            rounded="full"
+            ratio="1/1"
+            class="w-20 block"
+          ></sonic-image>`
+        : nothing}
+    </div>
+  `;
+
+  render() {
+    return html`
+      <sonic-list
+        debug
+        fetch
+        serviceURL="/docs-mock-api"
+        dataProvider="list-extract-values-test"
+        endPoint="api/users/2"
+        key="data"
+        extractValues
+        .items=${this.items}
+      ></sonic-list>
+    `;
+  }
+}

package/src/docs/example/docs-provider-keys.ts

@@ -0,0 +1,315 @@
+import type { APIConfiguration } from "@supersoniks/concorde/core/utils/api";
+import type { Message } from "@supersoniks/concorde/core/_types/types";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { set } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {
+  DOCS_MOCK_TOKEN_FRESH,
+  DOCS_MOCK_TOKEN_STALE,
+  DOCS_MOCK_TOKEN_VALID,
+} from "../mock-api/api-config-mock";
+import { DOCS_MOCK_API_BASE } from "../mock-api/urls";
+import type { DocsUserData } from "./users";
+
+type RegisterForm = { email?: string; password?: string };
+type RegisterResult = {
+  id?: number;
+  token?: string;
+  email?: string;
+  error?: string;
+  messages?: Message[];
+  method?: string;
+  query?: { email?: string; password?: string };
+  note?: string;
+};
+
+const apiConfigBase = (): APIConfiguration => ({
+  serviceURL: DOCS_MOCK_API_BASE,
+  token: null,
+  userName: null,
+  password: null,
+  authToken: null,
+  tokenProvider: null,
+});
+
+/** Submit demos — `path` values match former attribute strings */
+export const submitExampleFormKey = new DataProviderKey<RegisterForm>(
+  "submit-example",
+);
+export const submitExampleResultKey = new DataProviderKey<RegisterResult>(
+  "submit-example-result",
+);
+export const submitClearFormKey = new DataProviderKey<RegisterForm>(
+  "submit-clear-form",
+);
+export const submitNestedFormKey = new DataProviderKey<RegisterForm>(
+  "submit-nested-form",
+);
+export const submitNestedResultKey = new DataProviderKey<RegisterResult>(
+  "submit-nested-result",
+);
+export const submitFormDataFormKey = new DataProviderKey<RegisterForm>(
+  "submit-formdata-form",
+);
+export const submitFormDataResultKey = new DataProviderKey<RegisterResult>(
+  "submit-formdata-result",
+);
+export const submitGetFormKey = new DataProviderKey<RegisterForm>(
+  "submit-get-form",
+);
+export const submitGetResultKey = new DataProviderKey<RegisterResult>(
+  "submit-get-result",
+);
+export const submitNativeFormKey = new DataProviderKey<RegisterForm>(
+  "submit-native-form",
+);
+export const submitEventFormKey = new DataProviderKey<RegisterForm>(
+  "submit-event-form",
+);
+export const submitEndpointFormKey = new DataProviderKey<RegisterForm>(
+  "submit-endpoint-form",
+);
+export const submitEndpointResultKey = new DataProviderKey<RegisterResult>(
+  "submit-endpoint-result",
+);
+
+/** API configuration demos */
+export const docsApiConfBearerKey = new DataProviderKey<APIConfiguration>(
+  "docsApiConfBearer",
+);
+export const docsApiConfTokenProviderKey = new DataProviderKey<APIConfiguration>(
+  "docsApiConfTokenProvider",
+);
+export const docsApiConfStaleTokenKey = new DataProviderKey<APIConfiguration>(
+  "docsApiConfStaleToken",
+);
+export const docsApiConfWordingVersionKey = new DataProviderKey<number>(
+  "docsApiConfWordingVersion",
+);
+
+/** Joke / queue / toggle filters */
+export const docsJokeInputFilterKey = new DataProviderKey<{ contains?: string }>(
+  "input-filter",
+);
+export const docsJokeSelectFilterKey = new DataProviderKey<{ lang?: string }>(
+  "select-filter",
+);
+export const docsJokeCheckboxFilterKey = new DataProviderKey<{
+  blacklistFlags?: string;
+}>("jokeFilter");
+export const docsJokeRadioFilterKey = new DataProviderKey<{
+  blacklistFlags?: string;
+}>("jokeFilterRadio");
+export const docsJokeSwitchFilterKey = new DataProviderKey<{
+  blacklistFlags?: string;
+}>("jokeFilterswitch");
+export const docsQueueUsersFilterKey = new DataProviderKey<{ q?: string }>(
+  "filter",
+);
+export const docsToggleVisibilityKey = new DataProviderKey<{ togglePlan?: string }>(
+  "visibilitySettings",
+);
+export const docsToggleLoaderFormKey = new DataProviderKey<{ toggleLoader?: string }>(
+  "toggleLoaderForm",
+);
+
+/** User / preview scopes */
+export const docsUserScopeAKey = new DataProviderKey<DocsUserData>(
+  "docsUserScopeA",
+);
+export const docsUserScopeBKey = new DataProviderKey<DocsUserData>(
+  "docsUserScopeB",
+);
+export const docsUserPreviewKey = new DataProviderKey<DocsUserData>(
+  "docsUserPreview",
+);
+export const docsUserStaticKey = new DataProviderKey<DocsUserData>(
+  "docsUserStatic",
+);
+
+/** Decorator live demos (see decorators-demo-init) */
+export const demoDataKey = new DataProviderKey<{
+  title: string;
+  user: { name: string };
+  count: number;
+}>("demoData");
+export const demoUserKey = new DataProviderKey<{
+  name: string;
+  email: string;
+}>("demoUser");
+export const demoSettingsKey = new DataProviderKey<{
+  theme: string;
+  language: string;
+}>("demoSettings");
+export const demoUserSettingsKey = new DataProviderKey<{
+  theme: string;
+  language: string;
+}>("demoUserSettings");
+export const publishDemoKey = new DataProviderKey<{
+  email: string;
+  message: string;
+}>("publishDemo");
+export const waitAncestorDemoKey = new DataProviderKey<{ message: string }>(
+  "waitAncestorDemo",
+);
+export const autoValue1Key = new DataProviderKey<number>("autoValue1");
+export const autoValue2Key = new DataProviderKey<number>("autoValue2");
+export const bindReflectDemoKey = new DataProviderKey<{ count: number }>(
+  "bindReflectDemo",
+);
+export const demoUsersKey = new DataProviderKey<
+  Array<{
+    id: number;
+    firstName: string;
+    lastName: string;
+    email: string;
+  }>
+>("demoUsers");
+export const demoUsersAltKey = new DataProviderKey<
+  Array<{
+    id: number;
+    firstName: string;
+    lastName: string;
+    email: string;
+  }>
+>("demoUsersAlt");
+export const demoUsersSettingsKey = new DataProviderKey<
+  Array<{ theme: string; language: string }>
+>("demoUsersSettings");
+export const demoUsersAltSettingsKey = new DataProviderKey<
+  Array<{ theme: string; language: string }>
+>("demoUsersAltSettings");
+
+const defaultRegisterForm = (): RegisterForm => ({
+  email: "eve.holt@reqres.in",
+  password: "pistol",
+});
+
+export function initDocsProviderDefaults(): void {
+  set(submitExampleFormKey, defaultRegisterForm());
+  set(submitClearFormKey, defaultRegisterForm());
+  set(submitNestedFormKey, defaultRegisterForm());
+  set(submitFormDataFormKey, defaultRegisterForm());
+  set(submitGetFormKey, {
+    email: "demo@example.com",
+    password: "secret",
+  });
+  set(submitNativeFormKey, defaultRegisterForm());
+  set(submitEventFormKey, defaultRegisterForm());
+  set(submitEndpointFormKey, defaultRegisterForm());
+
+  set(docsApiConfBearerKey, {
+    ...apiConfigBase(),
+    token: DOCS_MOCK_TOKEN_VALID,
+  });
+  set(docsApiConfTokenProviderKey, {
+    ...apiConfigBase(),
+    userName: "demo",
+    password: "secret",
+    tokenProvider: "auth/token",
+  });
+  set(docsApiConfStaleTokenKey, {
+    ...apiConfigBase(),
+    token: DOCS_MOCK_TOKEN_STALE,
+    userName: "demo",
+    password: "secret",
+    tokenProvider: "auth/token",
+  });
+  set(docsApiConfWordingVersionKey, 1);
+
+  set(docsJokeInputFilterKey, { contains: "chien" });
+  set(docsJokeSelectFilterKey, { lang: "fr" });
+  set(docsQueueUsersFilterKey, { q: "" });
+
+  set(docsToggleVisibilityKey, { togglePlan: "true" });
+  set(docsToggleLoaderFormKey, { toggleLoader: "" });
+
+  set(docsUserScopeAKey, {
+    first_name: "Paul",
+    last_name: "Metrand",
+    email: "paul@example.com",
+    avatar: "https://i.pravatar.cc/150?u=paul",
+  });
+  set(docsUserScopeBKey, {
+    first_name: "Marie",
+    last_name: "Dupont",
+    email: "marie@example.com",
+    avatar: "https://i.pravatar.cc/150?u=marie",
+  });
+  set(docsUserPreviewKey, {
+    first_name: "Paul",
+    last_name: "Metrand",
+    email: "paul@example.com",
+    avatar: "https://i.pravatar.cc/150?u=paul",
+  });
+  set(docsUserStaticKey, {
+    first_name: "Paul",
+    last_name: "Metrand",
+    email: "paul@example.com",
+    avatar: "https://i.pravatar.cc/150?u=paul",
+  });
+
+  set(demoDataKey, {
+    title: "Initial Title",
+    user: { name: "Initial User" },
+    count: 0,
+  });
+  set(demoUserKey, { name: "Demo User", email: "demo@example.com" });
+  set(demoSettingsKey, { theme: "light", language: "en" });
+  set(demoUserSettingsKey, { theme: "light", language: "en" });
+  set(publishDemoKey, { email: "", message: "" });
+  set(waitAncestorDemoKey, { message: "Context from ancestor" });
+  set(autoValue1Key, 10);
+  set(autoValue2Key, 20);
+  set(bindReflectDemoKey, { count: 0 });
+
+  set(demoUsersKey, [
+    { id: 1, firstName: "Alice", lastName: "Smith", email: "alice.smith@example.com" },
+    { id: 2, firstName: "Bob", lastName: "Johnson", email: "bob.johnson@example.com" },
+    { id: 3, firstName: "Carol", lastName: "Williams", email: "carol.williams@example.com" },
+    { id: 4, firstName: "David", lastName: "Brown", email: "david.brown@example.com" },
+    { id: 5, firstName: "Eve", lastName: "Jones", email: "eve.jones@example.com" },
+    { id: 6, firstName: "Frank", lastName: "Garcia", email: "frank.garcia@example.com" },
+    { id: 7, firstName: "Grace", lastName: "Miller", email: "grace.miller@example.com" },
+    { id: 8, firstName: "Henry", lastName: "Davis", email: "henry.davis@example.com" },
+    { id: 9, firstName: "Ivy", lastName: "Martinez", email: "ivy.martinez@example.com" },
+    { id: 10, firstName: "Jack", lastName: "Taylor", email: "jack.taylor@example.com" },
+  ]);
+  set(demoUsersAltKey, [
+    { id: 11, firstName: "Sophie", lastName: "Lindquist", email: "sophie.lindquist@example.com" },
+    { id: 12, firstName: "Mateo", lastName: "Ortega", email: "mateo.ortega@example.com" },
+    { id: 13, firstName: "Jin", lastName: "Park", email: "jin.park@example.com" },
+    { id: 14, firstName: "Fatima", lastName: "El-Sayed", email: "fatima.el-sayed@example.com" },
+    { id: 15, firstName: "Lars", lastName: "Johansson", email: "lars.johansson@example.com" },
+    { id: 16, firstName: "Amara", lastName: "Singh", email: "amara.singh@example.com" },
+    { id: 17, firstName: "Zuri", lastName: "Okafor", email: "zuri.okafor@example.com" },
+    { id: 18, firstName: "Luca", lastName: "Rossi", email: "luca.rossi@example.com" },
+    { id: 19, firstName: "Ava", lastName: "Murphy", email: "ava.murphy@example.com" },
+    { id: 20, firstName: "Noah", lastName: "Keller", email: "noah.keller@example.com" },
+  ]);
+  set(demoUsersSettingsKey, [
+    { theme: "light", language: "en" },
+    { theme: "dark", language: "fr" },
+    { theme: "auto", language: "es" },
+    { theme: "light", language: "en" },
+    { theme: "dark", language: "fr" },
+    { theme: "auto", language: "es" },
+    { theme: "light", language: "en" },
+    { theme: "dark", language: "fr" },
+    { theme: "auto", language: "es" },
+    { theme: "light", language: "en" },
+  ]);
+  set(demoUsersAltSettingsKey, [
+    { theme: "dark", language: "de" },
+    { theme: "light", language: "it" },
+    { theme: "auto", language: "ja" },
+    { theme: "dark", language: "pt" },
+    { theme: "light", language: "ru" },
+    { theme: "auto", language: "zh" },
+    { theme: "dark", language: "ar" },
+    { theme: "light", language: "sv" },
+    { theme: "auto", language: "nl" },
+    { theme: "dark", language: "pl" },
+  ]);
+}
+
+initDocsProviderDefaults();

package/src/docs/example/docs-queue-demos.ts

@@ -0,0 +1,114 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import {
+  DOCS_MOCK_GEO_SERVICE,
+  DOCS_MOCK_REQRES_SERVICE,
+} from "../mock-api/urls";
+import { docsQueueUsersFilterKey } from "./docs-provider-keys";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/queue/queue";
+import "../../core/components/ui/image/image";
+import "../../core/components/ui/form/input/input";
+
+type CommuneRow = { nom: string; code?: string };
+
+type UserRow = {
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar: string;
+};
+
+const userRow = ({ first_name, last_name, email, avatar }: UserRow) =>
+  html`<div class="flex items-center gap-3 rounded-md p-2 hover:bg-neutral-50">
+    <sonic-image
+      src=${avatar}
+      rounded="md"
+      ratio="1/1"
+      class="w-12 block"
+    ></sonic-image>
+    <div>
+      <div>${first_name} <span class="font-bold">${last_name}</span></div>
+      <div class="text-sm text-neutral-500">${email}</div>
+    </div>
+  </div>`;
+
+/** Communes — one batch (`limit` only, no `$offset` in the expression). */
+@customElement("docs-queue-geo-demo")
+export class DocsQueueGeoDemo extends LitElement {
+  private items = (item: CommuneRow) =>
+    html`<div class="rounded bg-neutral-100 p-2 text-sm">
+      <div class="font-medium">${item.nom}</div>
+      ${item.code
+        ? html`<div class="text-neutral-500">${item.code}</div>`
+        : null}
+    </div>`;
+
+  render() {
+    return html`
+      <sonic-queue
+        class="grid grid-cols-3 gap-3"
+        dataProviderExpression="communes?limit=$limit"
+        limit="6"
+        serviceURL=${DOCS_MOCK_GEO_SERVICE}
+        .items=${this.items}
+        debug
+      ></sonic-queue>
+    `;
+  }
+}
+
+/**
+ * Users — lazy load + search (`q`), aligned with create-concorde-ts-starter demo-queue.
+ * Mock: `filterDocsUsers` + `paginateUsers` in `src/docs/mock-api/`.
+ */
+@customElement("docs-queue-users-demo")
+export class DocsQueueUsersDemo extends LitElement {
+  static styles = [tailwind];
+
+  private items = userRow;
+
+  private separator = () => html`
+    <div class="my-1 border-t border-dashed border-neutral-200"></div>
+  `;
+
+  private noItems = () => html`
+    <p class="p-4 text-center text-sm italic text-neutral-500">
+      No users — try another search (e.g. <code>zzz</code>)
+    </p>
+  `;
+
+  render() {
+    return html`
+      <div formDataProvider=${docsQueueUsersFilterKey.path} class="mb-3 max-w-md">
+        <sonic-input
+          name="q"
+          type="search"
+          label="Search"
+          placeholder="First name, last name, or email"
+          size="sm"
+        ></sonic-input>
+      </div>
+      <p class="mb-3 text-sm text-neutral-500">
+        Typing updates <code>?q=…</code> on each request. Scroll inside the box
+        to load the next batch (<code>offset</code> += <code>limit</code>).
+      </p>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="api/users?offset=$offset&limit=$limit"
+        dataFilterProvider="filter"
+        limit="4"
+        offset="0"
+        idKey="id"
+        serviceURL=${DOCS_MOCK_REQRES_SERVICE}
+        key="data"
+        class="grid max-h-96 max-w-md gap-2 overflow-y-auto"
+        .items=${this.items}
+        .separator=${this.separator}
+        .noItems=${this.noItems}
+        debug
+      ></sonic-queue>
+    `;
+  }
+}

package/src/docs/example/docs-router-demos.ts

@@ -0,0 +1,89 @@
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import { DOC_ROUTER_PAGE_HASH, setDocsDemoSubHash } from "../docs-location";
+
+import "../../core/components/functional/router/router";
+import "../../core/components/ui/button/button";
+
+const panel = (title: string, body?: string) => html`
+  <div
+    class="my-4 rounded border border-neutral-200 p-6 text-center text-2xl text-neutral-700"
+  >
+    ${title}
+    ${body ? html`<p class="mt-2 text-base text-neutral-500">${body}</p>` : null}
+  </div>
+`;
+
+function navButton(label: string, subRoute: string, variant?: string) {
+  const href = `${DOC_ROUTER_PAGE_HASH}#${subRoute.replace(/^#/, "")}`;
+  return html`<sonic-button
+    size="xs"
+    variant=${variant ?? "default"}
+    autoActive="strict"
+    href=${href}
+    @click=${(e: Event) => {
+      e.preventDefault();
+      setDocsDemoSubHash(subRoute, DOC_ROUTER_PAGE_HASH);
+    }}
+    >${label}</sonic-button
+  >`;
+}
+
+@customElement("docs-router-basic-demo")
+export class DocsRouterBasicDemo extends LitElement {
+  static styles = [tailwind];
+
+  @state()
+  private routes = {
+    "#home": () => panel("Home"),
+    "#about": () => panel("About"),
+    "#work": () => panel("Work"),
+    "#contact": () => panel("Contact"),
+    fallback: () =>
+      panel("404", "No route matched — `routes.fallback` is rendered."),
+  };
+
+  render() {
+    return html`
+      <div class="mb-4 flex flex-wrap gap-2">
+        ${navButton("Home", "home")}
+        ${navButton("About", "about")}
+        ${navButton("Work", "work")}
+        ${navButton("Contact", "contact")}
+        ${navButton("Unknown", "unknown", "outline")}
+      </div>
+      <sonic-router .routes=${this.routes}></sonic-router>
+    `;
+  }
+}
+
+@customElement("docs-router-params-demo")
+export class DocsRouterParamsDemo extends LitElement {
+  static styles = [tailwind];
+
+  @state()
+  private routes = {
+    "#couleur/:id": ({ id }: { id: string }) =>
+      panel("Url-pattern", `Param :id = ${id}`),
+    "#products/(\\d+)/(\\w+)": ([productId, slug]: [string, string]) =>
+      panel("RegExp", `productId = ${productId}, slug = ${slug}`),
+    fallback: () => panel("No match", "Try a link below."),
+  };
+
+  render() {
+    return html`
+      <p class="mb-3 text-sm text-neutral-500">
+        Dynamic segments are passed to the route function (object for
+        <code>url-pattern</code>, array for capturing groups). Navigation uses
+        <code>history.replaceState</code> with a second hash segment so the doc
+        page does not reload.
+      </p>
+      <div class="mb-4 flex flex-wrap gap-2">
+        ${navButton("#couleur/3", "couleur/3")}
+        ${navButton("#products/42/widget", "products/42/widget")}
+      </div>
+      <sonic-router .routes=${this.routes}></sonic-router>
+    `;
+  }
+}