@fusion.dev/helix 0.33.4 → 0.33.5

package/custom-elements.json

@@ -13154,8 +13154,28 @@
               "name": "--carousel-block-size"
             },
             {
-              "description": "Space between slides.",
-              "name": "--carousel-gap"
+              "description": "Space between slides. A sheet sets it and the component measures the run with it.",
+              "name": "--carousel-gap",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCarousel",
+                "module": "src/carousel/root/carousel-root.ts"
+              }
+            },
+            {
+              "description": "The size one pane is laid out at. A sheet sets it and the component measures the run with it.",
+              "name": "--carousel-pane",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCarousel",
+                "module": "src/carousel/root/carousel-root.ts"
+              }
+            },
+            {
+              "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",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCarousel",
+                "module": "src/carousel/root/carousel-root.ts"
+              }
             }
           ],
           "members": [
@@ -13726,6 +13746,21 @@
                 "module": "src/carousel/root/carousel-root.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "runEnd",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | typeof nothing"
+                }
+              },
+              "description": "How far short of a whole pixel the run of slides ends, for the last one.\n\n**The run has to end on a whole pixel, because a right-to-left track cannot\nreach a fraction.** Three across 692 makes the run 450.66 longer than the\ntrack. Chromium measures a right-to-left scroller from its far end and\nfloors that length, so the track stops at -450 where a left-to-right one\nrounds to 451, and two thirds of a pixel of the slide before stays at the\nleading edge. Ending on a whole pixel, the far end is one number both ways\nand the last place rests on it in both, so a swipe to the end stops there\ntoo.\n\n**Here rather than in a stylesheet, because the count is the component's.**\nThe arithmetic wants how many slides there are, and CSS can only ask\n`sibling-count()`, which is Chromium-only, evaluates to 0 through\n`::part()`, and needs a `:last-child` that `::part()` cannot carry either.\nSo the styled tier could correct its run and a consumer writing their own\nseveral-across sheet could not: measured in Chromium at three across, the\nheadless tier rested at 451 against -450 while the styled tier rested at\none number both ways. Published from here, one declaration reading this\ngets both tiers and any consumer to the same place.\n\n**WebKit takes the margin and does not need it**, which is the reason a\ncorrection written in CSS looked like enough. It has no `sibling-count()`\nat all, so nothing reached that engine, and its track rested on one number\nboth ways anyway. Measured with the margin in place, the same widths:\nevery resting place is the number it was without it.\n\n**On the last slide alone, which is what makes that one declaration\nenough.** A sheet writes `margin-inline-end: var(--carousel-run-end, 0px)`\nacross every pane and the fallback answers on all but the last, so nothing\nhas to select a slide by its position in the run.\n\n**A sheet says how wide a pane is and how far apart they sit, and this\nreads both back.** Set neither and the correction is invalid at\ncomputed-value time, which is the fallback rather than a broken margin. The\npercentage resolves where the value is used, on the last pane, so it is the\ntrack's content box and not the track's own containing block: the width the\nrun is actually measured against.\n\nHorizontal only. A vertical track scrolls the other axis, `scrollTop`\ncounts up from zero whatever the writing mode, and there is no far end to\nfloor.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCarousel",
+                "module": "src/carousel/root/carousel-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "tier",

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

@@ -2,13 +2,13 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));
 --_carousel-gap: var(--carousel-gap, var(--helix-space-md));
-
---_carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);
 --_carousel-per-view: 1;
 --_carousel-share: calc(
 (100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
 var(--_carousel-per-view)
 );
+
+--carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);
 }
 
 :host {
@@ -179,6 +179,8 @@ inline-size: 1em;
 }
 
 [part="track"] {
+
+--carousel-gap: var(--_carousel-gap);
 display: flex;
 gap: var(--_carousel-gap);
 overflow-x: auto;
@@ -204,21 +206,11 @@ scroll-snap-type: y mandatory;
 
 [part="slide"] {
 display: flex;
-flex: 0 0 var(--_carousel-pane);
+flex: 0 0 var(--carousel-pane);
+margin-inline-end: var(--carousel-run-end, 0px);
 scroll-snap-align: start;
 }
 
-:host(:not([orientation="vertical"])) [part="slide"]:last-child {
---_carousel-overrun: calc(
-sibling-count() *
-(var(--_carousel-pane) + var(--_carousel-gap)) -
-var(--_carousel-gap) -
-100%
-);
---_carousel-run-end: calc(round(var(--_carousel-overrun), 1px) - var(--_carousel-overrun));
-margin-inline-end: var(--_carousel-run-end);
-}
-
 [part="slide"] ::slotted(*) {
 flex: 1 1 0;
 min-block-size: 0;

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

@@ -22,7 +22,6 @@ import type { CSSResultGroup } from 'lit';
  * focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches
  * 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more.
  * @cssproperty --carousel-block-size - Height of a vertical track.
- * @cssproperty --carousel-gap - Space between slides.
  */
 export declare class HelixCarousel extends HelixHeadlessCarousel {
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.33.4",
+  "version": "0.33.5",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,14 +47,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.33.4",
-    "@fusion.dev/helix-headless": "0.33.4",
-    "@fusion.dev/helix-styles": "0.33.4"
+    "@fusion.dev/helix-core": "0.33.5",
+    "@fusion.dev/helix-headless": "0.33.5",
+    "@fusion.dev/helix-styles": "0.33.5"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.33.4",
-    "@fusion.dev/helix-testing": "0.33.4",
+    "@fusion.dev/helix-cem": "0.33.5",
+    "@fusion.dev/helix-testing": "0.33.5",
     "@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

@@ -22041,7 +22041,9 @@ export type CustomElements = {
    *
    * - `--carousel-bleed`: Room inside the scroller so a slide's own shadow, border or focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more. (default: `undefined`)
    * - `--carousel-block-size`: Height of a vertical track. (default: `undefined`)
-   * - `--carousel-gap`: Space between slides. (default: `undefined`)
+   * - `--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-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
    *
@@ -40862,7 +40864,9 @@ export type CustomElementsSolidJs = {
    *
    * - `--carousel-bleed`: Room inside the scroller so a slide's own shadow, border or focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more. (default: `undefined`)
    * - `--carousel-block-size`: Height of a vertical track. (default: `undefined`)
-   * - `--carousel-gap`: Space between slides. (default: `undefined`)
+   * - `--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-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
    *
@@ -57855,8 +57859,12 @@ export type CustomCssProperties = {
   "--carousel-bleed"?: (string) | undefined;
   /** Height of a vertical track. */
   "--carousel-block-size"?: (string) | undefined;
-  /** Space between slides. */
+  /** Space between slides. A sheet sets it and the component measures the run with it. */
   "--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 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;
   /** Fill behind the composer. */
   "--chat-composer-background-color"?: (string) | undefined;
   /** The composer's edge, so a theme can remove it. */

package/types/vue.d.ts

@@ -10277,8 +10277,12 @@ export type CustomCssProperties = {
   "--carousel-bleed"?: (string) | undefined;
   /** Height of a vertical track. */
   "--carousel-block-size"?: (string) | undefined;
-  /** Space between slides. */
+  /** Space between slides. A sheet sets it and the component measures the run with it. */
   "--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 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;
   /** Fill behind the composer. */
   "--chat-composer-background-color"?: (string) | undefined;
   /** The composer's edge, so a theme can remove it. */