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

package/src/core/utils/dismissed.ts

@@ -0,0 +1,22 @@
+function readDismissed(storageKey: string): Record<string, boolean> {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(storageKey) || "{}");
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+export function isDismissed(storageKey: string, id: string | number): boolean {
+  return !!readDismissed(storageKey)[id];
+}
+
+export function markDismissed(storageKey: string, id: string | number): void {
+  const dismissed = readDismissed(storageKey);
+  dismissed[id] = true;
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(dismissed));
+  } catch {
+    // stockage indisponible (mode privé, quota)
+  }
+}

package/src/core/utils/positioning.spec.ts

@@ -0,0 +1,208 @@
+import { describe, it, expect } from "vitest";
+import {
+  computeFloatingPosition,
+  FloatingBounds,
+  FloatingSide,
+  parsePlacement,
+} from "./positioning";
+
+type Rect = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+};
+type Size = { width: number; height: number };
+
+const rect = (left: number, top: number, width: number, height: number) => ({
+  left,
+  top,
+  width,
+  height,
+  right: left + width,
+  bottom: top + height,
+});
+
+/**
+ * Ancien Pop.computePosition, étape par étape, sur un contenu simulé dont
+ * chaque déplacement appliqué se retrouve tel quel dans la mesure suivante.
+ */
+function legacyPopPosition(
+  thisRect: Rect,
+  size: Size,
+  placement: string,
+  { minX, minY, maxX, maxY }: FloatingBounds,
+) {
+  const [placementBase, placementSec] = placement.split(" ");
+  const x0 = thisRect.left;
+  const y0 = thisRect.top;
+  let x = x0,
+    y = y0;
+  const yTop = y0 - size.height;
+  const xLeft = x0 - size.width;
+  const xRight = x0 + thisRect.width;
+  const yBottom = y0 + thisRect.height;
+  const xCenter = x0 + (thisRect.width - size.width) * 0.5;
+  const yCenter = y0 + (thisRect.height - size.height) * 0.5;
+  switch (placementBase) {
+    case "bottom":
+      y = yBottom;
+      if (placementSec == "center") x = xCenter;
+      break;
+    case "top":
+      y = yTop;
+      if (placementSec == "center") x = xCenter;
+      break;
+    case "left":
+      x = xLeft;
+      if (placementSec == "center") y = yCenter;
+      break;
+    case "right":
+      x = xRight;
+      if (placementSec == "center") y = yCenter;
+      break;
+  }
+
+  let contentX = x;
+  let contentY = y;
+  if (contentX < minX && placementBase == "left") x = xRight;
+  if (contentY < minY && placementBase == "top") y = yBottom;
+  if (contentX + size.width > maxX && placementBase == "right") x = xLeft;
+  if (contentY + size.height > maxY && placementBase == "bottom") y = yTop;
+
+  contentX = x;
+  contentY = y;
+  if (contentX < minX) contentX = minX;
+  if (contentY < minY) contentY = minY;
+  if (contentX + size.width > maxX) contentX = maxX - size.width;
+  if (contentY + size.height > maxY) contentY = maxY - size.height;
+
+  return { x: contentX, y: contentY };
+}
+
+function popPosition(
+  anchor: Rect,
+  floating: Size,
+  placement: string,
+  bounds: FloatingBounds,
+) {
+  const [side, secondary] = placement.split(" ");
+  const { x, y } = computeFloatingPosition({
+    anchor,
+    floating,
+    side: side as FloatingSide,
+    align: secondary == "center" ? "center" : "start",
+    bounds,
+  });
+  return { x, y };
+}
+
+const bounds: FloatingBounds = { minX: 5, minY: 5, maxX: 795, maxY: 595 };
+
+describe("computeFloatingPosition", () => {
+  describe("reproduit l'ancien positionnement de sonic-pop", () => {
+    const placements = [
+      "bottom",
+      "top",
+      "right",
+      "left",
+      "bottom center",
+      "top center",
+      "right center",
+      "left center",
+      "unknown",
+    ];
+    const anchors = {
+      "au centre": rect(380, 280, 40, 30),
+      "coin haut gauche": rect(0, 0, 40, 30),
+      "coin bas droit": rect(760, 570, 40, 30),
+      "bord gauche": rect(2, 300, 40, 30),
+      "bord droit": rect(780, 300, 40, 30),
+      "bord haut": rect(400, 2, 40, 30),
+      "bord bas": rect(400, 590, 40, 30),
+    };
+    const sizes = {
+      petit: { width: 120, height: 80 },
+      "plus grand que la zone": { width: 900, height: 700 },
+    };
+
+    for (const placement of placements) {
+      for (const [anchorName, anchor] of Object.entries(anchors)) {
+        for (const [sizeName, size] of Object.entries(sizes)) {
+          it(`${placement} / ${anchorName} / contenu ${sizeName}`, () => {
+            expect(popPosition(anchor, size, placement, bounds)).toEqual(
+              legacyPopPosition(anchor, size, placement, bounds),
+            );
+          });
+        }
+      }
+    }
+  });
+
+  describe("placements du tooltip", () => {
+    const anchor = rect(380, 280, 40, 30);
+    const floating = { width: 100, height: 20 };
+    const place = (side: FloatingSide, align?: "start" | "center" | "end") =>
+      computeFloatingPosition({
+        anchor,
+        floating,
+        side,
+        align,
+        gap: 4,
+        bounds,
+      });
+
+    it("centre par défaut", () => {
+      expect(place("top")).toEqual({ side: "top", x: 350, y: 256 });
+      expect(place("right")).toEqual({ side: "right", x: 424, y: 285 });
+    });
+
+    it("aligne start / end", () => {
+      expect(place("bottom", "start")).toMatchObject({ x: 380, y: 314 });
+      expect(place("bottom", "end")).toMatchObject({ x: 320, y: 314 });
+      expect(place("left", "end")).toMatchObject({ x: 276, y: 290 });
+    });
+
+    it("bascule sur le côté opposé quand il déborde", () => {
+      const nearTop = rect(380, 10, 40, 30);
+      expect(
+        computeFloatingPosition({
+          anchor: nearTop,
+          floating,
+          side: "top",
+          gap: 4,
+          bounds,
+        }),
+      ).toEqual({ side: "bottom", x: 350, y: 44 });
+    });
+  });
+});
+
+describe("parsePlacement", () => {
+  it("lit côté et alignement", () => {
+    expect(parsePlacement("left-end", "bottom", "start")).toEqual({
+      side: "left",
+      align: "end",
+    });
+  });
+
+  it("applique l'alignement par défaut quand il est absent", () => {
+    expect(parsePlacement("top", "bottom", "start")).toEqual({
+      side: "top",
+      align: "start",
+    });
+  });
+
+  it("retombe sur les défauts pour une valeur inconnue", () => {
+    expect(parsePlacement("foo-bar", "top", "center")).toEqual({
+      side: "top",
+      align: "center",
+    });
+    expect(parsePlacement(undefined, "top", "center")).toEqual({
+      side: "top",
+      align: "center",
+    });
+  });
+});

package/src/core/utils/positioning.ts

@@ -0,0 +1,183 @@
+import HTML, { SearchableDomElement } from "./HTML";
+
+export type FloatingSide = "top" | "right" | "bottom" | "left";
+export type FloatingAlign = "start" | "center" | "end";
+export type FloatingPlacement =
+  | FloatingSide
+  | `${FloatingSide}-${FloatingAlign}`;
+
+const SIDES: readonly string[] = ["top", "right", "bottom", "left"];
+const ALIGNS: readonly string[] = ["start", "center", "end"];
+
+/** Découpe `"côté-alignement"` ; une valeur inconnue retombe sur le défaut. */
+export function parsePlacement(
+  placement: string | undefined,
+  defaultSide: FloatingSide,
+  defaultAlign: FloatingAlign,
+): { side: FloatingSide; align: FloatingAlign } {
+  const [side, align] = (placement ?? "").split("-");
+  return {
+    side: SIDES.includes(side) ? (side as FloatingSide) : defaultSide,
+    align: ALIGNS.includes(align) ? (align as FloatingAlign) : defaultAlign,
+  };
+}
+
+export type FloatingBounds = {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+};
+
+type Rect = Pick<DOMRect, "left" | "top" | "right" | "bottom" | "width" | "height">;
+type Size = Pick<DOMRect, "width" | "height">;
+
+export const supportsPopover = "popover" in HTMLElement.prototype;
+
+const OPPOSITE_SIDE: Record<FloatingSide, FloatingSide> = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left",
+};
+
+/**
+ * Zone dans laquelle un élément flottant doit rester visible :
+ * le viewport, restreint par le premier ancêtre qui scrolle ou clippe `node`.
+ */
+export function getFloatingBounds(
+  node: SearchableDomElement,
+  padding = 0,
+): FloatingBounds {
+  const clipRect = (
+    HTML.getScrollableAncestor(node) as HTMLElement | null
+  )?.getBoundingClientRect();
+
+  // `||` et non `??` : un bord à 0 (ancêtre non rendu) retombe sur le viewport, comme historiquement dans sonic-pop.
+  return {
+    minX: Math.max(0, clipRect?.left || 0) + padding,
+    minY: Math.max(0, clipRect?.top || 0) + padding,
+    maxX:
+      Math.min(window.innerWidth, clipRect?.right || window.innerWidth) -
+      padding,
+    maxY:
+      Math.min(window.innerHeight, clipRect?.bottom || window.innerHeight) -
+      padding,
+  };
+}
+
+function alignOnAxis(
+  start: number,
+  length: number,
+  floatingLength: number,
+  align: FloatingAlign,
+) {
+  if (align === "start") return start;
+  if (align === "end") return start + length - floatingLength;
+  return start + (length - floatingLength) / 2;
+}
+
+function placeOnSide(
+  anchor: Rect,
+  floating: Size,
+  side: FloatingSide,
+  align: FloatingAlign,
+  gap: number,
+) {
+  switch (side) {
+    case "top":
+      return {
+        x: alignOnAxis(anchor.left, anchor.width, floating.width, align),
+        y: anchor.top - floating.height - gap,
+      };
+    case "bottom":
+      return {
+        x: alignOnAxis(anchor.left, anchor.width, floating.width, align),
+        y: anchor.bottom + gap,
+      };
+    case "left":
+      return {
+        x: anchor.left - floating.width - gap,
+        y: alignOnAxis(anchor.top, anchor.height, floating.height, align),
+      };
+    case "right":
+      return {
+        x: anchor.right + gap,
+        y: alignOnAxis(anchor.top, anchor.height, floating.height, align),
+      };
+    default:
+      return { x: anchor.left, y: anchor.top };
+  }
+}
+
+function overflowsSide(
+  position: { x: number; y: number },
+  floating: Size,
+  side: FloatingSide,
+  bounds: FloatingBounds,
+) {
+  switch (side) {
+    case "top":
+      return position.y < bounds.minY;
+    case "bottom":
+      return position.y + floating.height > bounds.maxY;
+    case "left":
+      return position.x < bounds.minX;
+    case "right":
+      return position.x + floating.width > bounds.maxX;
+    default:
+      return false;
+  }
+}
+
+/**
+ * Position (coordonnées viewport) d'un élément flottant accolé à `anchor` :
+ * bascule sur le côté opposé s'il déborde, puis le contraint dans `bounds`.
+ * S'il est plus grand que `bounds`, c'est le bord bas / droit qui l'emporte.
+ */
+export function computeFloatingPosition({
+  anchor,
+  floating,
+  side,
+  align = "center",
+  gap = 0,
+  bounds,
+}: {
+  anchor: Rect;
+  floating: Size;
+  side: FloatingSide;
+  align?: FloatingAlign;
+  gap?: number;
+  bounds: FloatingBounds;
+}) {
+  let placedSide = side;
+  let position = placeOnSide(anchor, floating, placedSide, align, gap);
+
+  if (overflowsSide(position, floating, placedSide, bounds)) {
+    placedSide = OPPOSITE_SIDE[placedSide];
+    position = placeOnSide(anchor, floating, placedSide, align, gap);
+  }
+
+  return {
+    side: placedSide,
+    x: Math.min(
+      Math.max(position.x, bounds.minX),
+      bounds.maxX - floating.width,
+    ),
+    y: Math.min(
+      Math.max(position.y, bounds.minY),
+      bounds.maxY - floating.height,
+    ),
+  };
+}
+
+/** Appelle `callback` à chaque frame ; renvoie la fonction d'arrêt. */
+export function startFrameLoop(callback: () => void) {
+  let frame = 0;
+  const tick = () => {
+    callback();
+    frame = requestAnimationFrame(tick);
+  };
+  tick();
+  return () => cancelAnimationFrame(frame);
+}

package/src/directives.ts

@@ -1,6 +1,5 @@
 import * as directives from "@supersoniks/concorde/core/directives/DataProvider";
 import {dp as pubDp, dataProvider as pubDataProvider, get as pubGet, set as pubSet} from "@supersoniks/concorde/core/utils/PublisherProxy";
-import type {DirectiveResult} from "lit/async-directive.js";
 
 import {ConcordeWindow} from "./core/_types/types";
 /**
@@ -11,8 +10,7 @@ export const dp = pubDp;
  * @deprecated @see pubDataProvider
  */
 export const dataProvider = pubDataProvider;
-export const subscribe = directives.subscribe as DirectiveResult;
-export const sub = directives.sub as DirectiveResult;
+export { subscribe, sub } from "@supersoniks/concorde/core/directives/DataProvider";
 
 /**
  * @deprecated @see pubGet

package/src/docs/_core-concept/dataFlow.md

@@ -15,7 +15,7 @@ Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, d
 | HTTP GET | `@get` + `Endpoint`, or `sonic-list` / `sonic-queue` with `fetch` |
 | HTTP POST (body from store) | `@post` + `Endpoint` + body `DataProviderKey` |
 | HTTP PUT / PATCH (body from store) | `@put` / `@patch` — same model as `@post` |
-| Forms | `formDataProvider` + `name` on fields |
+| Forms | `formDataProvider` + `name` on fields (no Subscriber on form elements) |
 | Derived / aggregate (JSONata) | `derive()` or `sonic-jsonata` — [Jsonata](#core/components/functional/jsonata/jsonata.md/jsonata) |
 | Offline doc demos | `serviceURL="/docs-mock-api"` — [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api) |
 

package/src/docs/_decorators/ancestor-attribute.md

@@ -69,8 +69,9 @@ This decorator is particularly useful for:
 - By default (`dynamic: false`), the value is read once at connect time and is not updated afterward
 - With `{ dynamic: true }`, the property stays in sync when:
   - an ancestor **changes** the attribute value
-  - a **closer** ancestor **gains** the attribute (that value wins)
-  - the **nearest** ancestor **loses** the attribute (falls back to the next one up, or `null`)
+  - a **closer** ancestor **gains** / **loses** the attribute (fallback / `null`)
+  - the component is **reparented** (no extra opt-in) — parent `childList` only reacts if *this* node moves
+- Observers are **shared** (one per ancestor attribute / one per parent) so large lists of `sonic-icon` stay cheap on Firefox.
 - When `dynamic` is enabled, updates also propagate to `@subscribe` / `@bind` paths that depend on the decorated property (e.g. `${dataProvider}`)
 
 ### Dynamic mode

package/src/docs/_getting-started/concorde-outside.md

@@ -1,8 +1,8 @@
 # Installation
 
-<sonic-alert status="success" label="Recommended — use the starter" size="xl" background>
-  <p><strong>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a>.</strong></p>
-  <p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="#docs/_getting-started/ai-agents.md/ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
+<sonic-alert status="info" label="Recommended — use the starter" background>
+<p>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a></p>
+<p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="#docs/_getting-started/ai-agents.md/ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
 </sonic-alert>
 
 ## Starter

package/src/docs/_misc/formelement-subscriber-removal.md

@@ -0,0 +1,115 @@
+# FormElement without Subscriber (REDMINE-79569)
+
+Form fields (`sonic-input`, `textarea`, `select`, `checkbox`, `radio`, `switch`, `button`, `input-autocomplete`) no longer inherit the **Subscriber** mixin.
+
+## Behaviour now
+
+| Before | After |
+|--------|--------|
+| Dual channel `dataProvider` (autofill) + `formDataProvider` | **`formDataProvider` + `name` only** |
+| Ancestor `dataProvider` auto-filled field props | Ignored by form fields |
+| `noAutoFill` on fields/buttons inside a `dataProvider` tree | Dead on form fields (attribute harmless; can be cleaned in apps) |
+
+Preview pattern still valid: form writes via `formDataProvider`, display card reads via `dataProvider` on a **Subscriber** (or `@subscribe`) sibling — not on the fields themselves.
+
+## Migration checklist (apps)
+
+1. Prefer `formDataProvider` alone on forms / fieldsets.
+2. Drop redundant `dataProvider={sameKey}` on form containers when it only existed for field autofill.
+3. Prefill edit forms with `set(formKey, row)` / `dp(formKey.field).set(...)` before mount — not field `dataProvider`.
+4. Remove `noAutoFill` on `sonic-button` / fields when it only blocked Subscriber autofill.
+5. `initFromPublisher` still works (form publisher only).
+
+## Billetterie collect — dual-channel risk
+
+Files under `la-billetterie/concorde` that mention both `formDataProvider` and `dataProvider=` (review; many are filter+queue, not field autofill):
+
+### High priority (same key on form container)
+
+- `la-billetterie/components/reservation-request/atoms/request-event-form.ts` — `form` / `fieldset` with both attrs equal
+- `la-billetterie/components/reservation/atoms/new-quote-form.ts`
+- `la-billetterie/components/stats/sales-summary/sales-summary.ts`
+- `la-billetterie/components/product/price-selection-form/price-selection-form.ts` — `formDataProvider` + `dataProvider="cart/editForm"`
+- `la-billetterie/components/user/account/link-ticket/link-ticket.ts` — distinct keys (API vs form) — keep `dataProvider` only if used by fetch/submit siblings
+
+### Filters + queue (usually OK)
+
+`formDataProvider` on filter bar, `dataProvider` on `sonic-queue` / list — no field autofill dependency:
+
+- `access-control/components/event/list/index.ts`
+- `access-control/components/control/search/views/list.ts`
+- `la-billetterie/components/event/form-event-filter/form-event-filter.ts`
+- `la-billetterie/components/counter/*` (agenda, store, reservation-request-treatment, …)
+- `widgets/agenda/agenda.ts`
+- … see full dual list in ticket notes / grep below
+
+### Full dual-channel file list (55)
+
+```
+concorde/src/access-control/components/control/search/views/list.ts
+concorde/src/access-control/components/event/list/index.ts
+concorde/src/la-billetterie/components/access-control-mobile/access-controller-picker.ts
+concorde/src/la-billetterie/components/accreditations-directory/accreditations-directory.ts
+concorde/src/la-billetterie/components/address/address-suggestion.ts
+concorde/src/la-billetterie/components/bulk/bulk.ts
+concorde/src/la-billetterie/components/campaign/campaign-content.ts
+concorde/src/la-billetterie/components/counter/agenda/agenda.ts
+concorde/src/la-billetterie/components/counter/event-selector/event-selector.ts
+concorde/src/la-billetterie/components/counter/order-validation/order-validation-settings.ts
+concorde/src/la-billetterie/components/counter/print/format-menu.ts
+concorde/src/la-billetterie/components/counter/reservation-request-treatment/reservation-request-treatment.ts
+concorde/src/la-billetterie/components/counter/store/counter-store.ts
+concorde/src/la-billetterie/components/counter/widgets-settings/widgets-settings-page.ts
+concorde/src/la-billetterie/components/custom-list/custom-list.ts
+concorde/src/la-billetterie/components/event/agenda/agenda.ts
+concorde/src/la-billetterie/components/event/atoms/buy-event-block/buy-event-block.ts
+concorde/src/la-billetterie/components/event/atoms/categorizedPrices/categorizedPrices.ts
+concorde/src/la-billetterie/components/event/event-store/event-store-content.ts
+concorde/src/la-billetterie/components/event/form-event-filter/form-event-filter.ts
+concorde/src/la-billetterie/components/form/event-selection/event-selection-filters.ts
+concorde/src/la-billetterie/components/form/event-selection/event-selection.ts
+concorde/src/la-billetterie/components/giftcards/giftcard-link.ts
+concorde/src/la-billetterie/components/layout/header.ts
+concorde/src/la-billetterie/components/orders/recover/recover.ts
+concorde/src/la-billetterie/components/placing/atoms/placement-choice/placement-choice.ts
+concorde/src/la-billetterie/components/placing/seatmap-view/seatmap-view.ts
+concorde/src/la-billetterie/components/product/price-selection-form/price-selection-form.ts
+concorde/src/la-billetterie/components/product/prices-form/price-button/price-button.ts
+concorde/src/la-billetterie/components/purchase/purchase-summary/complementary-info/complementary-info.ts
+concorde/src/la-billetterie/components/reservation-request/atoms/request-event-form.ts
+concorde/src/la-billetterie/components/reservation/atoms/new-quote-form.ts
+concorde/src/la-billetterie/components/reservation/reservation-content.ts
+concorde/src/la-billetterie/components/seatmap/seatmap.ts
+concorde/src/la-billetterie/components/shop/shop.ts
+concorde/src/la-billetterie/components/stats/dashboard/dashboard.ts
+concorde/src/la-billetterie/components/stats/event/event-stats-check.ts
+concorde/src/la-billetterie/components/stats/sales-summary/sales-summary.ts
+concorde/src/la-billetterie/components/subscription/atoms/quick-select-display-toggle/quick-select-display-toggle.ts
+concorde/src/la-billetterie/components/subscription/cart-quick-select.ts
+concorde/src/la-billetterie/components/subscription/edit/subscription-renew-form.ts
+concorde/src/la-billetterie/components/ticket/ticket-freeup.ts
+concorde/src/la-billetterie/components/tickets-app/default-router.ts
+concorde/src/la-billetterie/components/user/account/account-purchases.ts
+concorde/src/la-billetterie/components/user/account/account-tickets.ts
+concorde/src/la-billetterie/components/user/account/link-ticket/link-ticket.ts
+concorde/src/la-billetterie/components/user/form/login.ts
+concorde/src/la-billetterie/components/user/user-attach/buyer-attach-form.ts
+concorde/src/la-billetterie/components/user/user-attach/buyer-attach.ts
+concorde/src/la-billetterie/components/user/user-attach/owner-attach-form.ts
+concorde/src/la-billetterie/components/user/user-attach/subscription-attach-form.ts
+concorde/src/la-billetterie/components/user/user-attach/subscription-selector.ts
+concorde/src/la-billetterie/components/user/user-selector/user-selector.ts
+concorde/src/la-billetterie/components/user/user-suggest/user-suggest.ts
+concorde/src/widgets/agenda/agenda.ts
+```
+
+Re-run audit:
+
+```bash
+# from la-billetterie
+rg -l 'formDataProvider' concorde/src | while read f; do rg -q 'dataProvider\s*=' "$f" && echo "$f"; done
+```
+
+## Non-regression (Concorde docs)
+
+Smoke form demos: input, textarea, select, checkbox (incl. check-all), radio, switch, button form modes, queue + `dataFilterProvider`, submit, validation / sameValueAs, input-autocomplete.

package/src/docs/_misc/html-integration.md

@@ -2,6 +2,8 @@
 
 Some hosts (legacy PHP pages, static HTML) embed Concorde components **without** a Lit build step. They can use HTML attributes such as **`data-bind`**, **`dataProvider`**, and **`formDataProvider`** on tags directly in the page.
 
+**Form fields** (`sonic-input`, checkbox, select, …) bind only via **`formDataProvider` + `name`**. They do not autofill from ancestor `dataProvider` (Subscriber was removed from FormElement — see [FormElement without Subscriber](#docs/_misc/formelement-subscriber-removal.md/formelement-subscriber-removal)).
+
 That style is **not** what we demonstrate in this doc site: live examples are **Lit components** under `src/docs/example/`, registered once and reused from Markdown via tags like `<docs-joke-search-demo>`.
 
 | Goal | Use |

package/src/docs/code.ts

@@ -36,6 +36,8 @@ export class DocsCode extends LitElement {
       pre {
         font-size: 13px !important;
         padding-right: 5rem !important;
+        border: 1px solid var(--sc-base-200);
+        border-radius: var(--sc-rounded);
       }
       .custom-scroll {
         overflow: auto !important;
@@ -239,7 +241,7 @@ export class DocsCode extends LitElement {
     return html`
       <div
         class="relative ${this.language === "markup"
-          ? "border border-neutral-100 p-4 rounded-md"
+          ? "rounded-md border border-neutral-200 bg-neutral-50/80 dark:border-neutral-700/80 dark:bg-neutral-900/40 p-4"
           : ""}"
       >
         ${this.language === "markup" && !this.noOutput