@fusion.dev/helix-headless 0.47.0 → 0.47.1

package/custom-elements.json

@@ -9611,6 +9611,10 @@
               "description": "The size one pane is laid out at. A sheet sets it and the component measures the run with it.",
               "name": "--carousel-pane"
             },
+            {
+              "description": "How many slides go across, written onto the track by the component so a sheet divides the track by the same number the positions are counted from. Read it rather than selecting on `per-view`, which cannot be enumerated without a ceiling. See `perView`.",
+              "name": "--carousel-per-view"
+            },
             {
               "description": "How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`.",
               "name": "--carousel-run-end"
@@ -9806,10 +9810,20 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "How many slides are shown across the track at once. Absent shows one.\n\n**Here rather than on the styled tier, because it decides how many places\nthe track can stop.** From the stylesheet it looks like a width, one rule\nper value setting a custom property that the slides divide the track by.\nBut a carousel showing four of six slides has three positions, not six, and\neverything that counts positions is in this file. Declared up there, `goTo`\nclamps to the last *slide*, so three of the six indicators point at an\noffset the track has already reached: pressing next walks the dots to the\nend while the slides stop moving a third of the way through.\n\nNo default, because it reflects. A reflected property with a value writes\nits attribute on upgrade, and the host then carries something a consumer's\nserver markup never had, which React reports as a mismatch. The one-across\ncase is the absent attribute, and the styles read it that way.",
+              "description": "How many slides are shown across the track at once. Absent shows one.\n\n**Here rather than on the styled tier, because it decides how many places\nthe track can stop.** From the stylesheet it looks like a width, one rule\nper value setting a custom property that the slides divide the track by.\nBut a carousel showing four of six slides has three positions, not six, and\neverything that counts positions is in this file. Declared up there, `goTo`\nclamps to the last *slide*, so three of the six indicators point at an\noffset the track has already reached: pressing next walks the dots to the\nend while the slides stop moving a third of the way through.\n\n**The number is published to the styles rather than enumerated by them**,\nas `--carousel-per-view` on the track, which is what keeps a width and a\ncount from disagreeing. A sheet can only name a value it wrote a rule for,\nso the styled tier enumerated `per-view=\"2\"` through `5` and called five a\njudgment; above it the pane fell back to one across while this file went on\ncounting positions. Measured in Chromium over eight slides, six across gave\nthree dots, a pane taking the whole track and five slides reachable only by\ndragging. Written from here there is no ceiling to exceed, and a consumer's\nown sheet reads the same declaration the styled one does. `runEnd` publishes\nits correction the same way and for the same reason.\n\n**On the track and not on the host.** A custom property on the host is a\nreflected attribute by another name: it would arrive on upgrade, and a\nconsumer's server markup never had it. Inside the component's own shadow\nroot it serializes with the rest of the template on the server, and the\ntrack's own declaration beats anything a consumer inherits in, so the\nattribute is the one answer to how wide a pane is.\n\nA value the track cannot honor is taken to the nearest one it can, by\n`across`, and both tiers read that rather than this.\n\nNo default, because it reflects. A reflected property with a value writes\nits attribute on upgrade, and the host then carries something a consumer's\nserver markup never had, which React reports as a mismatch. The one-across\ncase is the absent attribute, and the styles read it that way.",
               "attribute": "per-view",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "across",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "`perView` as both tiers use it: a whole number of slides, one at least.\n\n**The clamp is here because the arithmetic is here**, and the two readers\nof this number have to be given the same one. A fraction is floored, since\na position is a whole slide along: one and a half across leaves a last\nposition the track runs out before reaching, which is the fault `goTo`\nalready carries a comment about. Zero and a negative divide the track into\nnothing and into a pane facing the wrong way, and a non-numeric attribute\nparses to `NaN`, which `Math.max` propagates: it counted `NaN` positions,\ndrew no indicators at all and left `index` at `NaN`. All of them read as\none across, which is what a carousel with nothing sayable asked for.\n\nNot clamped to the number of slides. Six across four slides is four panes\nat a sixth of the track each and the one place to stand, which is what was\nasked for as nearly as it can be had, and the slide count is a fact the\nserver does not have: clamping to it would draw one width there and another\non upgrade.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "positions",
@@ -10477,7 +10491,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "How many slides are shown across the track at once. Absent shows one.\n\n**Here rather than on the styled tier, because it decides how many places\nthe track can stop.** From the stylesheet it looks like a width, one rule\nper value setting a custom property that the slides divide the track by.\nBut a carousel showing four of six slides has three positions, not six, and\neverything that counts positions is in this file. Declared up there, `goTo`\nclamps to the last *slide*, so three of the six indicators point at an\noffset the track has already reached: pressing next walks the dots to the\nend while the slides stop moving a third of the way through.\n\nNo default, because it reflects. A reflected property with a value writes\nits attribute on upgrade, and the host then carries something a consumer's\nserver markup never had, which React reports as a mismatch. The one-across\ncase is the absent attribute, and the styles read it that way.",
+              "description": "How many slides are shown across the track at once. Absent shows one.\n\n**Here rather than on the styled tier, because it decides how many places\nthe track can stop.** From the stylesheet it looks like a width, one rule\nper value setting a custom property that the slides divide the track by.\nBut a carousel showing four of six slides has three positions, not six, and\neverything that counts positions is in this file. Declared up there, `goTo`\nclamps to the last *slide*, so three of the six indicators point at an\noffset the track has already reached: pressing next walks the dots to the\nend while the slides stop moving a third of the way through.\n\n**The number is published to the styles rather than enumerated by them**,\nas `--carousel-per-view` on the track, which is what keeps a width and a\ncount from disagreeing. A sheet can only name a value it wrote a rule for,\nso the styled tier enumerated `per-view=\"2\"` through `5` and called five a\njudgment; above it the pane fell back to one across while this file went on\ncounting positions. Measured in Chromium over eight slides, six across gave\nthree dots, a pane taking the whole track and five slides reachable only by\ndragging. Written from here there is no ceiling to exceed, and a consumer's\nown sheet reads the same declaration the styled one does. `runEnd` publishes\nits correction the same way and for the same reason.\n\n**On the track and not on the host.** A custom property on the host is a\nreflected attribute by another name: it would arrive on upgrade, and a\nconsumer's server markup never had it. Inside the component's own shadow\nroot it serializes with the rest of the template on the server, and the\ntrack's own declaration beats anything a consumer inherits in, so the\nattribute is the one answer to how wide a pane is.\n\nA value the track cannot honor is taken to the nearest one it can, by\n`across`, and both tiers read that rather than this.\n\nNo default, because it reflects. A reflected property with a value writes\nits attribute on upgrade, and the host then carries something a consumer's\nserver markup never had, which React reports as a mismatch. The one-across\ncase is the absent attribute, and the styles read it that way.",
               "fieldName": "perView"
             }
           ],

package/dist/carousel/root/carousel-root.d.ts

@@ -44,6 +44,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssproperty --carousel-gap - Space between slides. A sheet sets it and the component measures the run with it.
  * @cssproperty --carousel-pane - The size one pane is laid out at. A sheet sets it and the component measures the run with it.
+ * @cssproperty --carousel-per-view - How many slides go across, written onto the track by the component so a sheet divides the track by the same number the positions are counted from. Read it rather than selecting on `per-view`, which cannot be enumerated without a ceiling. See `perView`.
  * @cssproperty --carousel-run-end - How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`.
  */
 export declare class HelixHeadlessCarousel extends HelixElement {
@@ -161,12 +162,53 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * offset the track has already reached: pressing next walks the dots to the
      * end while the slides stop moving a third of the way through.
      *
+     * **The number is published to the styles rather than enumerated by them**,
+     * as `--carousel-per-view` on the track, which is what keeps a width and a
+     * count from disagreeing. A sheet can only name a value it wrote a rule for,
+     * so the styled tier enumerated `per-view="2"` through `5` and called five a
+     * judgment; above it the pane fell back to one across while this file went on
+     * counting positions. Measured in Chromium over eight slides, six across gave
+     * three dots, a pane taking the whole track and five slides reachable only by
+     * dragging. Written from here there is no ceiling to exceed, and a consumer's
+     * own sheet reads the same declaration the styled one does. `runEnd` publishes
+     * its correction the same way and for the same reason.
+     *
+     * **On the track and not on the host.** A custom property on the host is a
+     * reflected attribute by another name: it would arrive on upgrade, and a
+     * consumer's server markup never had it. Inside the component's own shadow
+     * root it serializes with the rest of the template on the server, and the
+     * track's own declaration beats anything a consumer inherits in, so the
+     * attribute is the one answer to how wide a pane is.
+     *
+     * A value the track cannot honor is taken to the nearest one it can, by
+     * `across`, and both tiers read that rather than this.
+     *
      * No default, because it reflects. A reflected property with a value writes
      * its attribute on upgrade, and the host then carries something a consumer's
      * server markup never had, which React reports as a mismatch. The one-across
      * case is the absent attribute, and the styles read it that way.
      */
     perView?: number;
+    /**
+     * `perView` as both tiers use it: a whole number of slides, one at least.
+     *
+     * **The clamp is here because the arithmetic is here**, and the two readers
+     * of this number have to be given the same one. A fraction is floored, since
+     * a position is a whole slide along: one and a half across leaves a last
+     * position the track runs out before reaching, which is the fault `goTo`
+     * already carries a comment about. Zero and a negative divide the track into
+     * nothing and into a pane facing the wrong way, and a non-numeric attribute
+     * parses to `NaN`, which `Math.max` propagates: it counted `NaN` positions,
+     * drew no indicators at all and left `index` at `NaN`. All of them read as
+     * one across, which is what a carousel with nothing sayable asked for.
+     *
+     * Not clamped to the number of slides. Six across four slides is four panes
+     * at a sixth of the track each and the one place to stand, which is what was
+     * asked for as nearly as it can be had, and the slide count is a fact the
+     * server does not have: clamping to it would draw one width there and another
+     * on upgrade.
+     */
+    private get across();
     /**
      * How many distinct views the track holds, which is what the indicators count.
      *

package/dist/carousel/root/carousel-root.js

@@ -95,9 +95,12 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.indexState = next;
         this.requestUpdate('index', previous);
     }
+    get across() {
+        const asked = this.perView ?? 1;
+        return Number.isFinite(asked) ? Math.max(1, Math.floor(asked)) : 1;
+    }
     get positions() {
-        const across = Math.max(1, Math.floor(this.perView ?? 1));
-        return Math.max(1, this.slides.length - across + 1);
+        return Math.max(1, this.slides.length - this.across + 1);
     }
     get panes() {
         return [...(this.renderRoot?.querySelectorAll?.('[part="slide"]') ?? [])];
@@ -305,6 +308,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
       <div
         data-scroller
         part="track"
+        style=${`--carousel-per-view: ${this.across}`}
         @scroll=${this.handleTrackScroll}
         @scrollend=${this.handleScroll}
         @pointerdown=${this.handleTake}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.47.0",
+  "version": "0.47.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.47.0",
-    "@fusion.dev/helix-icons": "0.47.0",
+    "@fusion.dev/helix-core": "0.47.1",
+    "@fusion.dev/helix-icons": "0.47.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.47.0",
-    "@fusion.dev/helix-testing": "0.47.0",
+    "@fusion.dev/helix-cem": "0.47.1",
+    "@fusion.dev/helix-testing": "0.47.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -1839,6 +1839,27 @@ clamps to the last *slide*, so three of the six indicators point at an
 offset the track has already reached: pressing next walks the dots to the
 end while the slides stop moving a third of the way through.
 
+**The number is published to the styles rather than enumerated by them**,
+as `--carousel-per-view` on the track, which is what keeps a width and a
+count from disagreeing. A sheet can only name a value it wrote a rule for,
+so the styled tier enumerated `per-view="2"` through `5` and called five a
+judgment; above it the pane fell back to one across while this file went on
+counting positions. Measured in Chromium over eight slides, six across gave
+three dots, a pane taking the whole track and five slides reachable only by
+dragging. Written from here there is no ceiling to exceed, and a consumer's
+own sheet reads the same declaration the styled one does. `runEnd` publishes
+its correction the same way and for the same reason.
+
+**On the track and not on the host.** A custom property on the host is a
+reflected attribute by another name: it would arrive on upgrade, and a
+consumer's server markup never had it. Inside the component's own shadow
+root it serializes with the rest of the template on the server, and the
+track's own declaration beats anything a consumer inherits in, so the
+attribute is the one answer to how wide a pane is.
+
+A value the track cannot honor is taken to the nearest one it can, by
+`across`, and both tiers read that rather than this.
+
 No default, because it reflects. A reflected property with a value writes
 its attribute on upgrade, and the host then carries something a consumer's
 server markup never had, which React reports as a mismatch. The one-across
@@ -1855,6 +1876,27 @@ clamps to the last *slide*, so three of the six indicators point at an
 offset the track has already reached: pressing next walks the dots to the
 end while the slides stop moving a third of the way through.
 
+**The number is published to the styles rather than enumerated by them**,
+as `--carousel-per-view` on the track, which is what keeps a width and a
+count from disagreeing. A sheet can only name a value it wrote a rule for,
+so the styled tier enumerated `per-view="2"` through `5` and called five a
+judgment; above it the pane fell back to one across while this file went on
+counting positions. Measured in Chromium over eight slides, six across gave
+three dots, a pane taking the whole track and five slides reachable only by
+dragging. Written from here there is no ceiling to exceed, and a consumer's
+own sheet reads the same declaration the styled one does. `runEnd` publishes
+its correction the same way and for the same reason.
+
+**On the track and not on the host.** A custom property on the host is a
+reflected attribute by another name: it would arrive on upgrade, and a
+consumer's server markup never had it. Inside the component's own shadow
+root it serializes with the rest of the template on the server, and the
+track's own declaration beats anything a consumer inherits in, so the
+attribute is the one answer to how wide a pane is.
+
+A value the track cannot honor is taken to the nearest one it can, by
+`across`, and both tiers read that rather than this.
+
 No default, because it reflects. A reflected property with a value writes
 its attribute on upgrade, and the host then carries something a consumer's
 server markup never had, which React reports as a mismatch. The one-across
@@ -1940,6 +1982,27 @@ clamps to the last *slide*, so three of the six indicators point at an
 offset the track has already reached: pressing next walks the dots to the
 end while the slides stop moving a third of the way through.
 
+**The number is published to the styles rather than enumerated by them**,
+as `--carousel-per-view` on the track, which is what keeps a width and a
+count from disagreeing. A sheet can only name a value it wrote a rule for,
+so the styled tier enumerated `per-view="2"` through `5` and called five a
+judgment; above it the pane fell back to one across while this file went on
+counting positions. Measured in Chromium over eight slides, six across gave
+three dots, a pane taking the whole track and five slides reachable only by
+dragging. Written from here there is no ceiling to exceed, and a consumer's
+own sheet reads the same declaration the styled one does. `runEnd` publishes
+its correction the same way and for the same reason.
+
+**On the track and not on the host.** A custom property on the host is a
+reflected attribute by another name: it would arrive on upgrade, and a
+consumer's server markup never had it. Inside the component's own shadow
+root it serializes with the rest of the template on the server, and the
+track's own declaration beats anything a consumer inherits in, so the
+attribute is the one answer to how wide a pane is.
+
+A value the track cannot honor is taken to the nearest one it can, by
+`across`, and both tiers read that rather than this.
+
 No default, because it reflects. A reflected property with a value writes
 its attribute on upgrade, and the host then carries something a consumer's
 server markup never had, which React reports as a mismatch. The one-across
@@ -1956,6 +2019,27 @@ clamps to the last *slide*, so three of the six indicators point at an
 offset the track has already reached: pressing next walks the dots to the
 end while the slides stop moving a third of the way through.
 
+**The number is published to the styles rather than enumerated by them**,
+as `--carousel-per-view` on the track, which is what keeps a width and a
+count from disagreeing. A sheet can only name a value it wrote a rule for,
+so the styled tier enumerated `per-view="2"` through `5` and called five a
+judgment; above it the pane fell back to one across while this file went on
+counting positions. Measured in Chromium over eight slides, six across gave
+three dots, a pane taking the whole track and five slides reachable only by
+dragging. Written from here there is no ceiling to exceed, and a consumer's
+own sheet reads the same declaration the styled one does. `runEnd` publishes
+its correction the same way and for the same reason.
+
+**On the track and not on the host.** A custom property on the host is a
+reflected attribute by another name: it would arrive on upgrade, and a
+consumer's server markup never had it. Inside the component's own shadow
+root it serializes with the rest of the template on the server, and the
+track's own declaration beats anything a consumer inherits in, so the
+attribute is the one answer to how wide a pane is.
+
+A value the track cannot honor is taken to the nearest one it can, by
+`across`, and both tiers read that rather than this.
+
 No default, because it reflects. A reflected property with a value writes
 its attribute on upgrade, and the host then carries something a consumer's
 server markup never had, which React reports as a mismatch. The one-across
@@ -19196,6 +19280,27 @@ export type CustomElements = {
    * offset the track has already reached: pressing next walks the dots to the
    * end while the slides stop moving a third of the way through.
    *
+   * **The number is published to the styles rather than enumerated by them**,
+   * as `--carousel-per-view` on the track, which is what keeps a width and a
+   * count from disagreeing. A sheet can only name a value it wrote a rule for,
+   * so the styled tier enumerated `per-view="2"` through `5` and called five a
+   * judgment; above it the pane fell back to one across while this file went on
+   * counting positions. Measured in Chromium over eight slides, six across gave
+   * three dots, a pane taking the whole track and five slides reachable only by
+   * dragging. Written from here there is no ceiling to exceed, and a consumer's
+   * own sheet reads the same declaration the styled one does. `runEnd` publishes
+   * its correction the same way and for the same reason.
+   *
+   * **On the track and not on the host.** A custom property on the host is a
+   * reflected attribute by another name: it would arrive on upgrade, and a
+   * consumer's server markup never had it. Inside the component's own shadow
+   * root it serializes with the rest of the template on the server, and the
+   * track's own declaration beats anything a consumer inherits in, so the
+   * attribute is the one answer to how wide a pane is.
+   *
+   * A value the track cannot honor is taken to the nearest one it can, by
+   * `across`, and both tiers read that rather than this.
+   *
    * No default, because it reflects. A reflected property with a value writes
    * its attribute on upgrade, and the host then carries something a consumer's
    * server markup never had, which React reports as a mismatch. The one-across
@@ -19252,6 +19357,7 @@ export type CustomElements = {
    *
    * - `--carousel-gap`: Space between slides. A sheet sets it and the component measures the run with it. (default: `undefined`)
    * - `--carousel-pane`: The size one pane is laid out at. A sheet sets it and the component measures the run with it. (default: `undefined`)
+   * - `--carousel-per-view`: How many slides go across, written onto the track by the component so a sheet divides the track by the same number the positions are counted from. Read it rather than selecting on `per-view`, which cannot be enumerated without a ceiling. See `perView`. (default: `undefined`)
    * - `--carousel-run-end`: How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`. (default: `undefined`)
    *
    * ## CSS Parts
@@ -36973,6 +37079,27 @@ export type CustomElementsSolidJs = {
    * offset the track has already reached: pressing next walks the dots to the
    * end while the slides stop moving a third of the way through.
    *
+   * **The number is published to the styles rather than enumerated by them**,
+   * as `--carousel-per-view` on the track, which is what keeps a width and a
+   * count from disagreeing. A sheet can only name a value it wrote a rule for,
+   * so the styled tier enumerated `per-view="2"` through `5` and called five a
+   * judgment; above it the pane fell back to one across while this file went on
+   * counting positions. Measured in Chromium over eight slides, six across gave
+   * three dots, a pane taking the whole track and five slides reachable only by
+   * dragging. Written from here there is no ceiling to exceed, and a consumer's
+   * own sheet reads the same declaration the styled one does. `runEnd` publishes
+   * its correction the same way and for the same reason.
+   *
+   * **On the track and not on the host.** A custom property on the host is a
+   * reflected attribute by another name: it would arrive on upgrade, and a
+   * consumer's server markup never had it. Inside the component's own shadow
+   * root it serializes with the rest of the template on the server, and the
+   * track's own declaration beats anything a consumer inherits in, so the
+   * attribute is the one answer to how wide a pane is.
+   *
+   * A value the track cannot honor is taken to the nearest one it can, by
+   * `across`, and both tiers read that rather than this.
+   *
    * No default, because it reflects. A reflected property with a value writes
    * its attribute on upgrade, and the host then carries something a consumer's
    * server markup never had, which React reports as a mismatch. The one-across
@@ -37029,6 +37156,7 @@ export type CustomElementsSolidJs = {
    *
    * - `--carousel-gap`: Space between slides. A sheet sets it and the component measures the run with it. (default: `undefined`)
    * - `--carousel-pane`: The size one pane is laid out at. A sheet sets it and the component measures the run with it. (default: `undefined`)
+   * - `--carousel-per-view`: How many slides go across, written onto the track by the component so a sheet divides the track by the same number the positions are counted from. Read it rather than selecting on `per-view`, which cannot be enumerated without a ceiling. See `perView`. (default: `undefined`)
    * - `--carousel-run-end`: How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`. (default: `undefined`)
    *
    * ## CSS Parts
@@ -53132,6 +53260,8 @@ export type CustomCssProperties = {
   "--carousel-gap"?: (string) | undefined;
   /** The size one pane is laid out at. A sheet sets it and the component measures the run with it. */
   "--carousel-pane"?: (string) | undefined;
+  /** How many slides go across, written onto the track by the component so a sheet divides the track by the same number the positions are counted from. Read it rather than selecting on `per-view`, which cannot be enumerated without a ceiling. See `perView`. */
+  "--carousel-per-view"?: (string) | undefined;
   /** How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`. */
   "--carousel-run-end"?: (string) | undefined;
   /** The chosen color, to paint over the transparency check. */

package/types/vue.d.ts

@@ -985,6 +985,27 @@ clamps to the last *slide*, so three of the six indicators point at an
 offset the track has already reached: pressing next walks the dots to the
 end while the slides stop moving a third of the way through.
 
+**The number is published to the styles rather than enumerated by them**,
+as `--carousel-per-view` on the track, which is what keeps a width and a
+count from disagreeing. A sheet can only name a value it wrote a rule for,
+so the styled tier enumerated `per-view="2"` through `5` and called five a
+judgment; above it the pane fell back to one across while this file went on
+counting positions. Measured in Chromium over eight slides, six across gave
+three dots, a pane taking the whole track and five slides reachable only by
+dragging. Written from here there is no ceiling to exceed, and a consumer's
+own sheet reads the same declaration the styled one does. `runEnd` publishes
+its correction the same way and for the same reason.
+
+**On the track and not on the host.** A custom property on the host is a
+reflected attribute by another name: it would arrive on upgrade, and a
+consumer's server markup never had it. Inside the component's own shadow
+root it serializes with the rest of the template on the server, and the
+track's own declaration beats anything a consumer inherits in, so the
+attribute is the one answer to how wide a pane is.
+
+A value the track cannot honor is taken to the nearest one it can, by
+`across`, and both tiers read that rather than this.
+
 No default, because it reflects. A reflected property with a value writes
 its attribute on upgrade, and the host then carries something a consumer's
 server markup never had, which React reports as a mismatch. The one-across
@@ -1001,6 +1022,27 @@ clamps to the last *slide*, so three of the six indicators point at an
 offset the track has already reached: pressing next walks the dots to the
 end while the slides stop moving a third of the way through.
 
+**The number is published to the styles rather than enumerated by them**,
+as `--carousel-per-view` on the track, which is what keeps a width and a
+count from disagreeing. A sheet can only name a value it wrote a rule for,
+so the styled tier enumerated `per-view="2"` through `5` and called five a
+judgment; above it the pane fell back to one across while this file went on
+counting positions. Measured in Chromium over eight slides, six across gave
+three dots, a pane taking the whole track and five slides reachable only by
+dragging. Written from here there is no ceiling to exceed, and a consumer's
+own sheet reads the same declaration the styled one does. `runEnd` publishes
+its correction the same way and for the same reason.
+
+**On the track and not on the host.** A custom property on the host is a
+reflected attribute by another name: it would arrive on upgrade, and a
+consumer's server markup never had it. Inside the component's own shadow
+root it serializes with the rest of the template on the server, and the
+track's own declaration beats anything a consumer inherits in, so the
+attribute is the one answer to how wide a pane is.
+
+A value the track cannot honor is taken to the nearest one it can, by
+`across`, and both tiers read that rather than this.
+
 No default, because it reflects. A reflected property with a value writes
 its attribute on upgrade, and the host then carries something a consumer's
 server markup never had, which React reports as a mismatch. The one-across
@@ -8914,6 +8956,8 @@ export type CustomCssProperties = {
   "--carousel-gap"?: (string) | undefined;
   /** The size one pane is laid out at. A sheet sets it and the component measures the run with it. */
   "--carousel-pane"?: (string) | undefined;
+  /** How many slides go across, written onto the track by the component so a sheet divides the track by the same number the positions are counted from. Read it rather than selecting on `per-view`, which cannot be enumerated without a ceiling. See `perView`. */
+  "--carousel-per-view"?: (string) | undefined;
   /** How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`. */
   "--carousel-run-end"?: (string) | undefined;
   /** The chosen color, to paint over the transparency check. */