fontdue-js 3.9.0 → 3.10.1

package/CHANGELOG.md

@@ -1,6 +1,16 @@
+## 3.10.1
+
+- Fixed the `TypeTester`, `FeatureTesters`, `CharacterViewer` and `StoreModal` never rendering a font in some Safari versions when its family or style name contains punctuation, such as an apostrophe, or starts with a digit.
+
+## 3.10.0
+
+- The `StoreModal`’s browse page leaves out an unlisted family, and lists an unlisted superfamily’s families in its place, each opening the superfamily’s page. Unlisted font packs are left out of the browse page too.
+- Checkboxes are 20px by default, down from 40px on the `TestFontsForm`, `NewsletterSignup` and license agreement checkboxes. Set `--checkbox-size: 40px` and `--checkbox-margin: 20px` to keep the larger box.
+- Fixed a type tester with a `truncate` line cap cutting through a line, or showing one line too few, in Safari before 26.1.
+
 ## 3.9.0
 
-- `TestFontsForm` can let the visitor choose which families to download. With *Customer’s choice* set under *Settings → Test fonts* – or `testFonts: { familySelection: "choice" }` in the config, or the `familySelection` prop (`family-selection` on `<fontdue-test-fonts-form>`) – the form lists the families with a checkbox each plus *Select all*, and the download holds only the ticked ones. Ships new stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+- `TestFontsForm` can let the visitor choose which families to download. With *Customer’s choice* set under *Settings → Test fonts* – or `testFonts: { familySelection: "choice" }` in the config, or the `familySelection` prop (`family-selection` on `<fontdue-test-fonts-form>`) – the form lists the families with a checkbox each plus *Select all*, and the download holds only the ticked ones.
 - `TestFontsForm` takes `collectionSlug` or `collectionId` (`collection-slug` / `collection-id`, comma-separated for several) to offer just those families, with no checkboxes – for a form on a family’s own page. When preloading, pass the same value to `loadTestFontsFormQuery({ collectionSlug })`; the old options-only call still works.
 
 ## 3.8.0
@@ -23,7 +33,7 @@
 - A product route takes a collection's slug as well as its ID, so `?store=product/example-sans` works alongside the base64 form. `fontdue-store-route="product/<slug>"` takes a slug now too – previously a slug there either did nothing (if it contained a hyphen) or loaded a broken product page.
 - `TypeTester` and `TypeTesters` take a `truncate` prop, and `<fontdue-type-tester>` and `<fontdue-type-testers>` take a `truncate` attribute, so each tester can cap its paragraph at its own number of lines instead of every tester on a site sharing one value. A per-tester value overrides the `truncate` UI config.
 - Fixed a type tester leaving a blank gap where its variable-axis sliders would go, on a static style or when none of the requested axes are in the font. The toolbar, features panel and dropdown placements were all affected.
-- A numeric `truncate` cap now stays in place while a visitor edits the text, instead of the paragraph jumping to full height on click and back on blur. `truncate: true` is unchanged and still opens to the full paragraph when clicked; pass `{ lines: 20, expandOnFocus: true }` if you want a line count to behave the old way. On the custom elements that object is a second word in the attribute – `truncate="20 expandable"`, or `truncate="20 fixed"` to spell out the default. Ships new stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+- A numeric `truncate` cap now stays in place while a visitor edits the text, instead of the paragraph jumping to full height on click and back on blur. `truncate: true` is unchanged and still opens to the full paragraph when clicked; pass `{ lines: 20, expandOnFocus: true }` if you want a line count to behave the old way. On the custom elements that object is a second word in the attribute – `truncate="20 expandable"`, or `truncate="20 fixed"` to spell out the default.
 - Fixed a type tester opening at a size outside the range its size slider spans. A seeded size below `typeTester.size.min` (or above `max`) rendered at that size with the slider handle drawn off the end of its track; it is clamped into range now.
 - `NewsletterSignup` and `TestFontsForm` now name which form a submission came from, so Fontdue records each as its own event rather than as a checkout contact step.
 - Fixed the Store Modal’s Checkout button doing nothing on a store using Stripe Tax, and the Cart’s Next button on the billing and licensee steps. Stripe.js now throws “Unable to select session” when asked to validate a form that has no payment in it yet; the address fields are validated on their own in that case, with the same inline errors.
@@ -41,7 +51,7 @@
 ## 3.4.1
 
 - Fixed the standalone type tester dropping an axis slider when its `variable-settings` starting value is negative. `variable-settings="slnt -11"` was rejected as unparseable, so no slant slider appeared and nothing in the markup explained why. Any axis with a negative range was affected. Extra spaces between an axis and its value are tolerated now too.
-- Fixed the `FeatureTesters` switch knob rendering stretched in Safari 18 and earlier. The fix is in `dist/fontdue.css`.
+- Fixed the `FeatureTesters` switch knob rendering stretched in Safari 18 and earlier.
 
 ## 3.4.0
 
@@ -68,7 +78,7 @@
 
 ## 3.2.3
 
-- Fixed `TypeTester` text drifting out of alignment. Centred, right-aligned and RTL testers sat off-centre once the font was small enough for the text to flow into columns, and centred testers were slightly off at every size. Ships new stylesheet rules, so take `fontdue-js/dist/fontdue.css` from this version alongside the JS.
+- Fixed `TypeTester` text drifting out of alignment. Centred, right-aligned and RTL testers sat off-centre once the font was small enough for the text to flow into columns, and centred testers were slightly off at every size.
 - The collapsed `FontdueAdminToolbar` pill now carries the Fontdue wordmark — Fontdue, Fontdue · Previewing hidden fonts, Fontdue · Preview expired. If you style the toolbar yourself, `__mark` has left `__button` and the expired suffix is a new `__expired-suffix` span.
 
 ## 3.2.2

package/dist/__generated__/StoreModalIndexItem_fontCollection.graphql.d.ts

@@ -1,14 +1,22 @@
 /**
- * @generated SignedSource<<9634241d4df0b0b783ac8e970e99b739>>
+ * @generated SignedSource<<82fd75aeba65ed2ecef2a5bb7ff865dc>>
  * @lightSyntaxTransform
  * @nogrep
  */
 import { ReaderFragment } from 'relay-runtime';
+export type Visibility = "HIDDEN" | "UNLISTED" | "VISIBLE" | "%future added value";
 import { FragmentRefs } from "relay-runtime";
 export type StoreModalIndexItem_fontCollection$data = {
     readonly children: ReadonlyArray<{
+        readonly featureStyle: {
+            readonly supportedLanguages: ReadonlyArray<string> | null;
+            readonly " $fragmentSpreads": FragmentRefs<"FontStyle_fontStyle">;
+        } | null;
+        readonly id: string;
         readonly isVariableFont: boolean;
+        readonly name: string;
         readonly totalStyles: number | null;
+        readonly visibility: Visibility;
     }> | null;
     readonly collectionType: string;
     readonly featureStyle: {
@@ -19,6 +27,7 @@ export type StoreModalIndexItem_fontCollection$data = {
     readonly isVariableFont: boolean;
     readonly name: string;
     readonly totalStyles: number | null;
+    readonly visibility: Visibility;
     readonly " $fragmentSpreads": FragmentRefs<"useTotalStyles_fontCollection">;
     readonly " $fragmentType": "StoreModalIndexItem_fontCollection";
 };

package/dist/__generated__/StoreModalIndexItem_fontCollection.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<9634241d4df0b0b783ac8e970e99b739>>
+ * @generated SignedSource<<82fd75aeba65ed2ecef2a5bb7ff865dc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -13,57 +13,38 @@ const node = function () {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "totalStyles",
+      "name": "id",
       "storageKey": null
     },
     v1 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "isVariableFont",
+      "name": "name",
       "storageKey": null
-    };
-  return {
-    "argumentDefinitions": [],
-    "kind": "Fragment",
-    "metadata": null,
-    "name": "StoreModalIndexItem_fontCollection",
-    "selections": [{
-      "args": null,
-      "kind": "FragmentSpread",
-      "name": "useTotalStyles_fontCollection"
-    }, {
+    },
+    v2 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "id",
+      "name": "visibility",
       "storageKey": null
-    }, {
+    },
+    v3 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "name",
+      "name": "totalStyles",
       "storageKey": null
-    }, v0 /*: any*/, v1 /*: any*/, {
-      "alias": null,
-      "args": [{
-        "kind": "Literal",
-        "name": "collectionTypes",
-        "value": ["FAMILY"]
-      }],
-      "concreteType": "FontCollection",
-      "kind": "LinkedField",
-      "name": "children",
-      "plural": true,
-      "selections": [v1 /*: any*/, v0 /*: any*/],
-      "storageKey": "children(collectionTypes:[\"FAMILY\"])"
-    }, {
+    },
+    v4 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "collectionType",
+      "name": "isVariableFont",
       "storageKey": null
-    }, {
+    },
+    v5 = {
       "alias": null,
       "args": null,
       "concreteType": "FontStyle",
@@ -82,10 +63,39 @@ const node = function () {
         "storageKey": null
       }],
       "storageKey": null
-    }],
+    };
+  return {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StoreModalIndexItem_fontCollection",
+    "selections": [{
+      "args": null,
+      "kind": "FragmentSpread",
+      "name": "useTotalStyles_fontCollection"
+    }, v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, v4 /*: any*/, {
+      "alias": null,
+      "args": [{
+        "kind": "Literal",
+        "name": "collectionTypes",
+        "value": ["FAMILY"]
+      }],
+      "concreteType": "FontCollection",
+      "kind": "LinkedField",
+      "name": "children",
+      "plural": true,
+      "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v4 /*: any*/, v3 /*: any*/, v5 /*: any*/],
+      "storageKey": "children(collectionTypes:[\"FAMILY\"])"
+    }, {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "collectionType",
+      "storageKey": null
+    }, v5 /*: any*/],
     "type": "FontCollection",
     "abstractKey": null
   };
 }();
-node.hash = "8a990fad8dc50c9f00b391902e9bc482";
+node.hash = "46573dcfb540ddfba2e28144704bd554";
 export default node;

package/dist/__generated__/StoreModalIndexPaginationQuery.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<b1b0a9eafb6bdfcac8c3a24fa8fe27cc>>
+ * @generated SignedSource<<b055d86d719cd9b0a3437468710929c0>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalIndexPaginationQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<b1b0a9eafb6bdfcac8c3a24fa8fe27cc>>
+ * @generated SignedSource<<b055d86d719cd9b0a3437468710929c0>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -67,6 +67,101 @@ const node = function () {
       "kind": "ScalarField",
       "name": "name",
       "storageKey": null
+    },
+    v7 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "visibility",
+      "storageKey": null
+    },
+    v8 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "featureStyle",
+      "plural": false,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cssFamily",
+        "storageKey": null
+      }, v6 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "concreteType": "WebfontSource",
+        "kind": "LinkedField",
+        "name": "webfontSources",
+        "plural": true,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "url",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "format",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "tech",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "concreteType": "VerticalMetrics",
+        "kind": "LinkedField",
+        "name": "verticalMetrics",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "unitsPerEm",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "ascender",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "descender",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "lineGap",
+          "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "avgCharWidth",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "supportedLanguages",
+        "storageKey": null
+      }, v3 /*: any*/],
+      "storageKey": null
     };
   return {
     "fragment": {
@@ -143,102 +238,15 @@ const node = function () {
                 "kind": "LinkedField",
                 "name": "children",
                 "plural": true,
-                "selections": [v4 /*: any*/, v5 /*: any*/, v3 /*: any*/],
+                "selections": [v4 /*: any*/, v5 /*: any*/, v3 /*: any*/, v6 /*: any*/, v7 /*: any*/, v8 /*: any*/],
                 "storageKey": "children(collectionTypes:[\"FAMILY\"])"
-              }, v6 /*: any*/, {
+              }, v6 /*: any*/, v7 /*: any*/, {
                 "alias": null,
                 "args": null,
                 "kind": "ScalarField",
                 "name": "collectionType",
                 "storageKey": null
-              }, {
-                "alias": null,
-                "args": null,
-                "concreteType": "FontStyle",
-                "kind": "LinkedField",
-                "name": "featureStyle",
-                "plural": false,
-                "selections": [{
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "cssFamily",
-                  "storageKey": null
-                }, v6 /*: any*/, {
-                  "alias": null,
-                  "args": null,
-                  "concreteType": "WebfontSource",
-                  "kind": "LinkedField",
-                  "name": "webfontSources",
-                  "plural": true,
-                  "selections": [{
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "url",
-                    "storageKey": null
-                  }, {
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "format",
-                    "storageKey": null
-                  }, {
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "tech",
-                    "storageKey": null
-                  }],
-                  "storageKey": null
-                }, {
-                  "alias": null,
-                  "args": null,
-                  "concreteType": "VerticalMetrics",
-                  "kind": "LinkedField",
-                  "name": "verticalMetrics",
-                  "plural": false,
-                  "selections": [{
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "unitsPerEm",
-                    "storageKey": null
-                  }, {
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "ascender",
-                    "storageKey": null
-                  }, {
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "descender",
-                    "storageKey": null
-                  }, {
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "lineGap",
-                    "storageKey": null
-                  }, {
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "avgCharWidth",
-                    "storageKey": null
-                  }],
-                  "storageKey": null
-                }, {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "supportedLanguages",
-                  "storageKey": null
-                }, v3 /*: any*/],
-                "storageKey": null
-              }, {
+              }, v8 /*: any*/, {
                 "alias": null,
                 "args": null,
                 "kind": "ScalarField",
@@ -290,12 +298,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "822799800d507e869328896c0b5a1845",
+      "cacheID": "cf465f13ec74bf1c500a9104871c2cd5",
       "id": null,
       "metadata": {},
       "name": "StoreModalIndexPaginationQuery",
       "operationKind": "query",
-      "text": "query StoreModalIndexPaginationQuery(\n  $count: Int = 25\n  $cursor: String = null\n  $excludeTags: [String!] = null\n) {\n  viewer {\n    ...StoreModalIndex_viewer_3217ho\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment StoreModalIndexItem_fontCollection on FontCollection {\n  ...useTotalStyles_fontCollection\n  id\n  name\n  totalStyles\n  isVariableFont\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n  collectionType\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n}\n\nfragment StoreModalIndex_viewer_3217ho on Viewer {\n  rootCollections: fontCollections(onlyRoots: true, first: $count, after: $cursor, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        ...StoreModalIndexItem_fontCollection\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
+      "text": "query StoreModalIndexPaginationQuery(\n  $count: Int = 25\n  $cursor: String = null\n  $excludeTags: [String!] = null\n) {\n  viewer {\n    ...StoreModalIndex_viewer_3217ho\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment StoreModalIndexItem_fontCollection on FontCollection {\n  ...useTotalStyles_fontCollection\n  id\n  name\n  visibility\n  totalStyles\n  isVariableFont\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    visibility\n    isVariableFont\n    totalStyles\n    featureStyle {\n      ...FontStyle_fontStyle\n      supportedLanguages\n      id\n    }\n  }\n  collectionType\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n}\n\nfragment StoreModalIndex_viewer_3217ho on Viewer {\n  rootCollections: fontCollections(onlyRoots: true, first: $count, after: $cursor, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        ...StoreModalIndexItem_fontCollection\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
     }
   };
 }();

package/dist/__generated__/StoreModalIndexQuery.graphql.d.ts

@@ -1,10 +1,11 @@
 /**
- * @generated SignedSource<<5499691b7a86b4a28f1caa8d610d54fe>>
+ * @generated SignedSource<<c20392d6b43531f66af4e1a04ca5bc39>>
  * @lightSyntaxTransform
  * @nogrep
  */
 import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
+export type Visibility = "HIDDEN" | "UNLISTED" | "VISIBLE" | "%future added value";
 export type StoreModalIndexQuery$variables = {
     count?: number | null;
     cursor?: string | null;
@@ -16,6 +17,7 @@ export type StoreModalIndexQuery$data = {
             readonly edges: ReadonlyArray<{
                 readonly node: {
                     readonly id: string;
+                    readonly visibility: Visibility;
                     readonly " $fragmentSpreads": FragmentRefs<"StoreModalIndexPackItem_fontPack">;
                 } | null;
             } | null> | null;

package/dist/__generated__/StoreModalIndexQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<5499691b7a86b4a28f1caa8d610d54fe>>
+ * @generated SignedSource<<c20392d6b43531f66af4e1a04ca5bc39>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -45,17 +45,24 @@ const node = function () {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "name",
+      "name": "visibility",
       "storageKey": null
     },
     v7 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "totalStyles",
+      "name": "name",
       "storageKey": null
     },
     v8 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "totalStyles",
+      "storageKey": null
+    },
+    v9 = {
       "alias": null,
       "args": null,
       "concreteType": "FontStyle",
@@ -68,7 +75,7 @@ const node = function () {
         "kind": "ScalarField",
         "name": "cssFamily",
         "storageKey": null
-      }, v6 /*: any*/, {
+      }, v7 /*: any*/, {
         "alias": null,
         "args": null,
         "concreteType": "WebfontSource",
@@ -143,7 +150,7 @@ const node = function () {
       }, v5 /*: any*/],
       "storageKey": null
     },
-    v9 = [{
+    v10 = [{
       "kind": "Variable",
       "name": "after",
       "variableName": "cursor"
@@ -156,7 +163,7 @@ const node = function () {
       "name": "onlyRoots",
       "value": true
     }],
-    v10 = {
+    v11 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
@@ -197,7 +204,7 @@ const node = function () {
               "kind": "LinkedField",
               "name": "node",
               "plural": false,
-              "selections": [v5 /*: any*/, {
+              "selections": [v5 /*: any*/, v6 /*: any*/, {
                 "args": null,
                 "kind": "FragmentSpread",
                 "name": "StoreModalIndexPackItem_fontPack"
@@ -258,7 +265,7 @@ const node = function () {
               "kind": "LinkedField",
               "name": "node",
               "plural": false,
-              "selections": [v5 /*: any*/, v6 /*: any*/, v7 /*: any*/, v8 /*: any*/],
+              "selections": [v5 /*: any*/, v6 /*: any*/, v7 /*: any*/, v8 /*: any*/, v9 /*: any*/],
               "storageKey": null
             }],
             "storageKey": null
@@ -266,7 +273,7 @@ const node = function () {
           "storageKey": null
         }, {
           "alias": "rootCollections",
-          "args": v9 /*: any*/,
+          "args": v10 /*: any*/,
           "concreteType": "FontCollectionConnection",
           "kind": "LinkedField",
           "name": "fontCollections",
@@ -285,7 +292,7 @@ const node = function () {
               "kind": "LinkedField",
               "name": "node",
               "plural": false,
-              "selections": [v5 /*: any*/, v10 /*: any*/, v7 /*: any*/, {
+              "selections": [v5 /*: any*/, v11 /*: any*/, v8 /*: any*/, {
                 "alias": null,
                 "args": [{
                   "kind": "Literal",
@@ -296,15 +303,15 @@ const node = function () {
                 "kind": "LinkedField",
                 "name": "children",
                 "plural": true,
-                "selections": [v10 /*: any*/, v7 /*: any*/, v5 /*: any*/],
+                "selections": [v11 /*: any*/, v8 /*: any*/, v5 /*: any*/, v7 /*: any*/, v6 /*: any*/, v9 /*: any*/],
                 "storageKey": "children(collectionTypes:[\"FAMILY\"])"
-              }, v6 /*: any*/, {
+              }, v7 /*: any*/, v6 /*: any*/, {
                 "alias": null,
                 "args": null,
                 "kind": "ScalarField",
                 "name": "collectionType",
                 "storageKey": null
-              }, v8 /*: any*/, {
+              }, v9 /*: any*/, {
                 "alias": null,
                 "args": null,
                 "kind": "ScalarField",
@@ -345,7 +352,7 @@ const node = function () {
           "storageKey": null
         }, {
           "alias": "rootCollections",
-          "args": v9 /*: any*/,
+          "args": v10 /*: any*/,
           "filters": ["onlyRoots", "excludeTags"],
           "handle": "connection",
           "key": "StoreModalIndex_rootCollections",
@@ -356,14 +363,14 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "fc6c3c60269ac58d7204476de4bae67b",
+      "cacheID": "176244d6e8b7a3a3ac4e184b362e4e85",
       "id": null,
       "metadata": {},
       "name": "StoreModalIndexQuery",
       "operationKind": "query",
-      "text": "query StoreModalIndexQuery(\n  $excludeTags: [String!]\n  $count: Int = 25\n  $cursor: String\n) {\n  viewer {\n    fontPacks(first: 9999, excludeTags: $excludeTags) {\n      edges {\n        node {\n          id\n          ...StoreModalIndexPackItem_fontPack\n        }\n      }\n    }\n    ...StoreModalIndex_viewer_3217ho\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment StoreModalIndexItem_fontCollection on FontCollection {\n  ...useTotalStyles_fontCollection\n  id\n  name\n  totalStyles\n  isVariableFont\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n  collectionType\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n}\n\nfragment StoreModalIndexPackItem_fontPack on FontPack {\n  id\n  name\n  totalStyles\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n}\n\nfragment StoreModalIndex_viewer_3217ho on Viewer {\n  rootCollections: fontCollections(onlyRoots: true, first: $count, after: $cursor, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        ...StoreModalIndexItem_fontCollection\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
+      "text": "query StoreModalIndexQuery(\n  $excludeTags: [String!]\n  $count: Int = 25\n  $cursor: String\n) {\n  viewer {\n    fontPacks(first: 9999, excludeTags: $excludeTags) {\n      edges {\n        node {\n          id\n          visibility\n          ...StoreModalIndexPackItem_fontPack\n        }\n      }\n    }\n    ...StoreModalIndex_viewer_3217ho\n    id\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  ...useFontStyle_fontStyle\n}\n\nfragment StoreModalIndexItem_fontCollection on FontCollection {\n  ...useTotalStyles_fontCollection\n  id\n  name\n  visibility\n  totalStyles\n  isVariableFont\n  children(collectionTypes: [FAMILY]) {\n    id\n    name\n    visibility\n    isVariableFont\n    totalStyles\n    featureStyle {\n      ...FontStyle_fontStyle\n      supportedLanguages\n      id\n    }\n  }\n  collectionType\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n}\n\nfragment StoreModalIndexPackItem_fontPack on FontPack {\n  id\n  name\n  totalStyles\n  featureStyle {\n    ...FontStyle_fontStyle\n    supportedLanguages\n    id\n  }\n}\n\nfragment StoreModalIndex_viewer_3217ho on Viewer {\n  rootCollections: fontCollections(onlyRoots: true, first: $count, after: $cursor, excludeTags: $excludeTags) {\n    edges {\n      node {\n        id\n        ...StoreModalIndexItem_fontCollection\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n\nfragment useFontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n  webfontSources {\n    url\n    format\n    tech\n  }\n  verticalMetrics {\n    unitsPerEm\n    ascender\n    descender\n    lineGap\n    avgCharWidth\n  }\n}\n\nfragment useTotalStyles_fontCollection on FontCollection {\n  isVariableFont\n  totalStyles\n  children(collectionTypes: [FAMILY]) {\n    isVariableFont\n    totalStyles\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "cea53722e4ce3c40a68997218f7e979f";
+node.hash = "13fce0376ef1b098e7f1f34dfdc7dad4";
 export default node;

package/dist/__tests__/fontLoader.test.js

@@ -1,5 +1,37 @@
 import { describe, it, expect } from 'vitest';
-import { selectFontSource } from "../fontLoader.js";
+import { selectFontSource, fontStyleFamily } from "../fontLoader.js";
+describe('fontStyleFamily', () => {
+  it('joins family and style unchanged when both are plain identifiers', () => {
+    expect(fontStyleFamily('Vain', 'Regular')).toBe('Vain Regular');
+    expect(fontStyleFamily('Sweet Lily', 'Bold Italic')).toBe('Sweet Lily Bold Italic');
+  });
+  it("escapes an apostrophe, which some Safari builds reject in a FontFace family", () => {
+    expect(fontStyleFamily("Hell's Gate", 'fairypools')).toBe('Hell_27s Gate fairypools');
+  });
+  it('escapes other ASCII punctuation instead of dropping it, so names stay distinct', () => {
+    expect(fontStyleFamily('A&B', 'Regular')).toBe('A_26B Regular');
+    expect(fontStyleFamily('A "B"', 'Regular')).toBe('A _22B_22 Regular');
+    expect(fontStyleFamily("Hell's Gate", 'Regular')).not.toBe(fontStyleFamily('Hells Gate', 'Regular'));
+  });
+  it('prefixes words CSS cannot parse unquoted: leading digits and reserved words', () => {
+    expect(fontStyleFamily('0712', 'Regular')).toBe('_0712 Regular');
+    expect(fontStyleFamily('Grotesk', '-5 Light')).toBe('Grotesk _-5 Light');
+    expect(fontStyleFamily('Initial', 'Bold')).toBe('_Initial Bold');
+    expect(fontStyleFamily('Default', 'Regular')).toBe('_Default Regular');
+  });
+  it('keeps non-ASCII letters, hyphens and underscores, and collapses whitespace', () => {
+    expect(fontStyleFamily('Généreuse  Sans', 'Extra-Bold_2')).toBe('Généreuse Sans Extra-Bold_2');
+    expect(fontStyleFamily(' 游明朝 ', ' W3 ')).toBe('游明朝 W3');
+  });
+  it('only yields CSS identifiers', () => {
+    const names = [fontStyleFamily("Hell's Gate", 'fairypools'), fontStyleFamily('0712', '1'), fontStyleFamily('(Test) / 50%', 'Regular!'), fontStyleFamily('--x', 'y')];
+    for (const name of names) {
+      for (const word of name.split(' ')) {
+        expect(word).toMatch(/^(?:[A-Za-z_\u0080-￿]|-[A-Za-z_\u0080-￿])[\w\u0080-￿-]*$/);
+      }
+    }
+  });
+});
 describe('selectFontSource', () => {
   const woff2 = function () {
     let extra = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/__tests__/storeModalIndexUnlisted.test.js

@@ -0,0 +1,71 @@
+// @vitest-environment happy-dom
+
+// The index lists root collections. An unlisted one isn't offered on its own
+// (FD-1239): an unlisted family drops out, and an unlisted superfamily is
+// replaced by its listed families, each opening the superfamily's page so a
+// selection there still upgrades to it.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+
+// The fragment reader hands back the data it was given.
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  useFragment: (_fragment, key) => key
+}));
+
+// Each entry renders what it links to, so the markup shows the navigation.
+vi.mock('../components/StoreModal/StoreModalIndexEntry.js', () => ({
+  default: _ref => {
+    let {
+      productId,
+      name,
+      label
+    } = _ref;
+    return /*#__PURE__*/React.createElement("li", {
+      "data-product": productId
+    }, name, " (", label, ")");
+  }
+}));
+import StoreModalIndexItem from '../components/StoreModal/StoreModalIndexItem.js';
+const family = function (name, visibility) {
+  let totalStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 4;
+  let isVariableFont = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  return {
+    id: `collection:${name}`,
+    name,
+    visibility,
+    collectionType: 'FAMILY',
+    isVariableFont,
+    totalStyles,
+    featureStyle: null,
+    children: []
+  };
+};
+const superfamily = (visibility, children) => ({
+  id: 'collection:Super',
+  name: 'Super',
+  visibility,
+  collectionType: 'SUPERFAMILY',
+  isVariableFont: false,
+  totalStyles: 10,
+  featureStyle: null,
+  children
+});
+const markup = collection => renderToStaticMarkup( /*#__PURE__*/React.createElement(StoreModalIndexItem, {
+  collection: collection
+}));
+describe('StoreModalIndexItem visibility', () => {
+  it('lists a visible superfamily as one entry', () => {
+    const html = markup(superfamily('VISIBLE', [family('Sans', 'VISIBLE')]));
+    expect(html).toBe('<li data-product="collection:Super">Super (10 styles)</li>');
+  });
+  it('leaves out an unlisted root family', () => {
+    expect(markup(family('Sans', 'UNLISTED'))).toBe('');
+  });
+  it('replaces an unlisted superfamily with its listed families, each opening the superfamily', () => {
+    const html = markup(superfamily('UNLISTED', [family('Sans', 'VISIBLE'), family('Serif', 'VISIBLE', 6), family('Sans Variable', 'UNLISTED', 2, true), family('Mono Variable', 'VISIBLE', 1, true)]));
+    expect(html).toBe('<li data-product="collection:Super">Sans (4 styles)</li>' + '<li data-product="collection:Super">Serif (6 styles)</li>' + '<li data-product="collection:Super">Mono Variable (1 variable font)</li>');
+  });
+});

package/dist/__tests__/typeTesterTruncate.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { normalizeTruncate, parseTruncateAttribute, shouldTruncate } from "../components/TypeTester/truncate.js";
+import { normalizeTruncate, parseTruncateAttribute, shouldTruncate, truncateColumnStyle } from "../components/TypeTester/truncate.js";
 import { mergeConfig } from "../components/ConfigContext.js";
 describe('normalizeTruncate', () => {
   it('is off when unset or false', () => {
@@ -215,4 +215,74 @@ describe('mergeConfig with the object truncate form', () => {
     });
     expect((_merged$typeTester2 = merged.typeTester) === null || _merged$typeTester2 === void 0 ? void 0 : _merged$typeTester2.truncate).toBe(20);
   });
+});
+
+// The stylesheet carries the column-width that WebKit before Safari 26.1 needs
+// to build a single column (FD-191); these pin what the inline style leaves
+// for it to reach, and what it must never touch.
+describe('truncateColumnStyle', () => {
+  it('is the bare single column with columns off', () => {
+    expect(truncateColumnStyle(false)).toEqual({
+      columnCount: 1
+    });
+  });
+  it('writes configured columns as they are', () => {
+    expect(truncateColumnStyle({
+      count: 3,
+      width: '20ch',
+      gap: '1em'
+    })).toEqual({
+      columnCount: 3,
+      columnWidth: '20ch',
+      columnGap: '1em'
+    });
+    expect(truncateColumnStyle({
+      count: 'auto',
+      width: '40ch',
+      gap: '1em'
+    })).toEqual({
+      columnCount: 'auto',
+      columnWidth: '40ch',
+      columnGap: '1em'
+    });
+  });
+  it('leaves the width off a configured single column with an auto width', () => {
+    expect(truncateColumnStyle({
+      count: 1,
+      width: 'auto',
+      gap: '1em'
+    })).toEqual({
+      columnCount: 1,
+      columnGap: '1em'
+    });
+  });
+
+  // A script-tag config is untyped JSON, so the count can arrive as a string
+  // and the width as an empty string.
+  it('reads a loosely typed single column the same way', () => {
+    const loose = {
+      count: '1',
+      width: '',
+      gap: '1em'
+    };
+    expect(truncateColumnStyle(loose)).toEqual({
+      columnCount: 1,
+      columnGap: '1em'
+    });
+  });
+
+  // With `column-count: auto` a 1px column-width would mean one column per
+  // pixel, so an auto count keeps its inline auto width, which the stylesheet
+  // cannot override.
+  it('keeps the auto width of an auto column count', () => {
+    expect(truncateColumnStyle({
+      count: 'auto',
+      width: 'auto',
+      gap: '1em'
+    })).toEqual({
+      columnCount: 'auto',
+      columnWidth: 'auto',
+      columnGap: '1em'
+    });
+  });
 });

package/dist/components/FeatureTester/FeatureTesterCard.js

@@ -7,6 +7,7 @@ import { graphql, useFragment } from 'react-relay';
 import FontStyle from '../FontStyle/index.js';
 import useFeaturesData from '../TypeTester/useFeaturesData.js';
 import useFeatureTesterAutofit from '../../hooks/useFeatureTesterAutofit.js';
+import { fontStyleFamily } from '../../fontLoader.js';
 import { sensitiveStringsForFeature, computeSensitivityFlags, segmentByFlags } from './highlight.js';
 const fragment = (_FeatureTesterCard_fontStyle.hash && _FeatureTesterCard_fontStyle.hash !== "687d8afca93d615ed0794f963702d082" && console.error("The definition of 'FeatureTesterCard_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FeatureTesterCard_fontStyle);
 export default function FeatureTesterCard(_ref) {
@@ -88,7 +89,7 @@ export default function FeatureTesterCard(_ref) {
   } = useFeatureTesterAutofit({
     enabled: autofit,
     text: content,
-    fontFamily: `${data.cssFamily} ${data.name}`,
+    fontFamily: fontStyleFamily(data.cssFamily, data.name),
     feature,
     fontSize: fontSize ?? 72,
     letterSpacing: letterSpacing ?? 0,

package/dist/components/StoreModal/StoreModalContainer.js

@@ -6,6 +6,7 @@ import { useLazyLoadQuery, graphql } from 'react-relay';
 import StoreModalCheckoutContext from './StoreModalCheckoutContext.js';
 import CheckoutSteps from '../Cart/CheckoutSteps.js';
 import useFontStyle from '../useFontStyle.js';
+import { fontStyleFamily } from '../../fontLoader.js';
 import StoreModalLoadingScreen from '../elements/StoreModalLoadingScreen/index.js';
 import ConfigContext from '../ConfigContext.js';
 const getPageTitle = name => {
@@ -89,8 +90,8 @@ const StoreModalContainer = _ref => {
   };
   const [checkoutStep, setCheckoutStep] = useState(CheckoutSteps.Customer);
   const [checkoutError, setCheckoutError] = useState(null);
-  const regularName = uiFontStyle ? `${uiFontStyle.cssFamily} ${uiFontStyle.name}` : null;
-  const boldName = uiFontStyleBold ? `${uiFontStyleBold.cssFamily} ${uiFontStyleBold.name}` : null;
+  const regularName = uiFontStyle ? fontStyleFamily(uiFontStyle.cssFamily, uiFontStyle.name) : null;
+  const boldName = uiFontStyleBold ? fontStyleFamily(uiFontStyleBold.cssFamily, uiFontStyleBold.name) : null;
   return /*#__PURE__*/React.createElement(StoreModalCheckoutContext.Provider, {
     value: {
       checkoutStep,

package/dist/components/StoreModal/StoreModalIndex.js

@@ -29,7 +29,7 @@ const StoreModalIndex = _ref => {
   let {
     prepared
   } = _ref;
-  const queryData = usePreloadedQuery((_StoreModalIndexQuery.hash && _StoreModalIndexQuery.hash !== "cea53722e4ce3c40a68997218f7e979f" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery), prepared.indexQuery);
+  const queryData = usePreloadedQuery((_StoreModalIndexQuery.hash && _StoreModalIndexQuery.hash !== "13fce0376ef1b098e7f1f34dfdc7dad4" && console.error("The definition of 'StoreModalIndexQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexQuery), prepared.indexQuery);
 
   // The query type only carries the fragment spread, not its data type, so
   // both sides are named explicitly for `data` to be typed.
@@ -53,7 +53,13 @@ const StoreModalIndex = _ref => {
     rootRef: scrollContainer,
     rootMargin: LOAD_MORE_MARGIN
   });
-  const packEdges = ((_queryData$viewer = queryData.viewer) === null || _queryData$viewer === void 0 ? void 0 : (_queryData$viewer$fon = _queryData$viewer.fontPacks) === null || _queryData$viewer$fon === void 0 ? void 0 : _queryData$viewer$fon.edges) ?? [];
+
+  // An unlisted pack is sold through its own Buy Button or page, not offered
+  // in the index; the API returns it so a site can build that page.
+  const packEdges = (((_queryData$viewer = queryData.viewer) === null || _queryData$viewer === void 0 ? void 0 : (_queryData$viewer$fon = _queryData$viewer.fontPacks) === null || _queryData$viewer$fon === void 0 ? void 0 : _queryData$viewer$fon.edges) ?? []).filter(edge => {
+    var _edge$node;
+    return (edge === null || edge === void 0 ? void 0 : (_edge$node = edge.node) === null || _edge$node === void 0 ? void 0 : _edge$node.visibility) !== 'UNLISTED';
+  });
   const edges = (data === null || data === void 0 ? void 0 : (_data$rootCollections = data.rootCollections) === null || _data$rootCollections === void 0 ? void 0 : _data$rootCollections.edges) ?? [];
   return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
     body: /*#__PURE__*/React.createElement(React.Fragment, null, packEdges.map(edge => /*#__PURE__*/React.createElement(StoreModalIndexPackItem, {

package/dist/components/StoreModal/StoreModalIndexItem.d.ts

@@ -3,5 +3,5 @@ import { StoreModalIndexItem_fontCollection$key } from '__generated__/StoreModal
 interface StoreModalIndexItem_props {
     collection: StoreModalIndexItem_fontCollection$key;
 }
-declare const StoreModalIndexItem: ({ collection }: StoreModalIndexItem_props) => React.JSX.Element;
+declare const StoreModalIndexItem: ({ collection }: StoreModalIndexItem_props) => React.JSX.Element | null;
 export default StoreModalIndexItem;

package/dist/components/StoreModal/StoreModalIndexItem.js

@@ -4,29 +4,47 @@ import { graphql, useFragment } from 'react-relay';
 import StoreModalIndexEntry from './StoreModalIndexEntry.js';
 import useTotalStyles from '../useTotalStyles.js';
 import { pluralize } from '../../utils.js';
+const styleLabel = (totalStyles, variableFonts) => {
+  const label = [];
+  if (totalStyles > 0) label.push(pluralize(totalStyles, 'style'));
+  if (variableFonts > 0) label.push(pluralize(variableFonts, 'variable font'));
+  return label.join(', ');
+};
+
+// One root collection on the index page. An unlisted collection isn't offered
+// on its own (FD-1239), so it has no entry of its own here either: an unlisted
+// family drops out, and an unlisted superfamily is replaced by its listed
+// families. Those still open the superfamily's page, where selecting them
+// upgrades to the superfamily.
 const StoreModalIndexItem = _ref => {
   let {
     collection
   } = _ref;
-  const data = useFragment((_StoreModalIndexItem_fontCollection.hash && _StoreModalIndexItem_fontCollection.hash !== "8a990fad8dc50c9f00b391902e9bc482" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection), collection);
+  const data = useFragment((_StoreModalIndexItem_fontCollection.hash && _StoreModalIndexItem_fontCollection.hash !== "46573dcfb540ddfba2e28144704bd554" && console.error("The definition of 'StoreModalIndexItem_fontCollection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalIndexItem_fontCollection), collection);
   const {
     totalStyles,
     variableFonts
   } = useTotalStyles({
     fontCollection: data
   });
-  let label = [];
-  if (totalStyles > 0) {
-    label.push(pluralize(totalStyles, 'style'));
-  }
-  if (variableFonts > 0) {
-    label.push(pluralize(variableFonts, 'variable font'));
+  if (data.visibility === 'UNLISTED') {
+    if (data.collectionType === 'FAMILY') return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, (data.children ?? []).filter(family => family.visibility !== 'UNLISTED').map(family => {
+      const styles = family.totalStyles ?? 0;
+      return /*#__PURE__*/React.createElement(StoreModalIndexEntry, {
+        key: family.id,
+        productId: data.id,
+        name: family.name,
+        featureStyle: family.featureStyle,
+        label: family.isVariableFont ? styleLabel(0, styles) : styleLabel(styles, 0)
+      });
+    }));
   }
   return /*#__PURE__*/React.createElement(StoreModalIndexEntry, {
     productId: data.id,
     name: data.name,
     featureStyle: data.featureStyle,
-    label: label.join(', ')
+    label: styleLabel(totalStyles, variableFonts)
   });
 };
 export default StoreModalIndexItem;

package/dist/components/TypeTester/truncate.d.ts

@@ -10,3 +10,13 @@ export interface ResolvedTruncate {
 export declare const normalizeTruncate: (value?: TruncateOption) => ResolvedTruncate;
 export declare const shouldTruncate: ({ lines, expandOnFocus }: ResolvedTruncate, focused: boolean) => boolean;
 export declare const parseTruncateAttribute: (input: string | undefined, elementName: string) => TruncateOption | undefined;
+export type ColumnsConfig = false | {
+    count: 'auto' | number;
+    width: string;
+    gap: string;
+};
+export declare const truncateColumnStyle: (columns: ColumnsConfig) => {
+    columnCount: "auto" | number;
+    columnWidth?: string;
+    columnGap?: string;
+};

package/dist/components/TypeTester/truncate.js

@@ -92,4 +92,35 @@ export const parseTruncateAttribute = (input, elementName) => {
     lines,
     expandOnFocus
   };
+};
+// The column declarations of a capped paragraph. Truncation lays the paragraph
+// out as a single column whose overflow flows sideways, into clipped columns.
+// With columns off that is a bare `column-count: 1`; WebKit before Safari 26.1
+// builds no column for it, so the stylesheet adds the column-width those builds
+// need (`[data-truncated]` in _type-tester.scss, FD-191). A configured single
+// column with an auto width is written without its width for the same reason,
+// so the stylesheet can reach it; the count is read loosely because a
+// script-tag config arrives untyped. Everything else is written as configured,
+// and an auto count keeps its auto width: 1px there would mean one column per
+// pixel.
+export const truncateColumnStyle = columns => {
+  if (!columns) return {
+    columnCount: 1
+  };
+  const {
+    count,
+    width,
+    gap
+  } = columns;
+  if (Number(count) === 1 && (!width || width === 'auto')) {
+    return {
+      columnCount: 1,
+      columnGap: gap
+    };
+  }
+  return {
+    columnCount: count,
+    columnWidth: width,
+    columnGap: gap
+  };
 };

package/dist/components/TypeTester/useTypeTesterStyler.d.ts

@@ -2,12 +2,7 @@ import { EditorState } from 'draft-js';
 import { Alignment } from './types.js';
 import { VariableSettings } from '../../utils.js';
 import { VerticalMetrics } from '../useFontStyle.js';
-import { TruncateOption } from './truncate.js';
-export type ColumnsConfig = false | {
-    count: 'auto' | number;
-    width: string;
-    gap: string;
-};
+import { ColumnsConfig, TruncateOption } from './truncate.js';
 export interface UseTypeTesterStylerProps {
     autofit: boolean;
     autofitOnChange: boolean;

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -1,7 +1,7 @@
 import "../../global-shim.js";
 import { useLayoutEffect } from 'react';
 import useAutofit from '../../hooks/useAutofit.js';
-import { normalizeTruncate, shouldTruncate as resolveShouldTruncate } from './truncate.js';
+import { normalizeTruncate, shouldTruncate as resolveShouldTruncate, truncateColumnStyle } from './truncate.js';
 const useTypeTesterStyler = _ref => {
   let {
     size,
@@ -86,12 +86,9 @@ const useTypeTesterStyler = _ref => {
   // is what lets the metric padding reveal descenders/ascenders cleanly, and it
   // means a multi-column tester (e.g. a 3-column specimen) truncates to
   // `truncateLines` lines *per column*. When truncating with columns disabled we
-  // still establish a single column so the clipped overflow behaves the same way.
-  const columnStyle = columns ? {
-    columnCount: columns.count,
-    columnWidth: columns.width,
-    columnGap: columns.gap
-  } : undefined;
+  // still establish a single column so the clipped overflow behaves the same way
+  // (truncateColumnStyle; WebKit before Safari 26.1 needs a stylesheet nudge to
+  // build that column, see `[data-truncated]` in _type-tester.scss, FD-191).
 
   // Outside truncation the columns apply to Draft's `[data-contents]` block
   // (via _type-tester.scss), which shrink-wraps — on the full-width container,
@@ -126,23 +123,35 @@ const useTypeTesterStyler = _ref => {
       // out to N lines of whitespace. Columns send the clipped overflow
       // sideways (into off-screen columns) rather than below, so the last
       // visible line of every column is never partially covered by the next
-      // one. That lets the symmetric `lineOverflowEm` padding fully reveal the
-      // first line's ascenders/accents and the last line's descenders at any
-      // line-height; the negative margins cancel that padding in layout so a
+      // one. That lets a `lineOverflowEm` allowance above the first line and
+      // below the last fully reveal ascenders/accents and descenders at any
+      // line-height; the negative margins cancel both in layout so a
       // collapsed paragraph still occupies exactly its line count.
       //
+      // Where the two allowances go depends on the engine, so the stylesheet
+      // places them from the custom property below (`[data-truncated]` in
+      // _type-tester.scss); nothing here writes a padding inline, so those
+      // rules win. Chromium and Firefox fit a line into a column by its line
+      // box, so the column must span exactly N line boxes and the allowances
+      // are this box's own top and bottom padding, outside the column.
+      // WebKit fits a line by its inline box extent (the font's ascent plus
+      // descent): the Nth line would overhang such a column and move to the
+      // hidden one, and a line pushed into a later column gets a strut that
+      // starts it one allowance down. So for WebKit both allowances are
+      // padding on Draft's content block, inside the column, and every
+      // column holds the same N lines (FD-191).
+      //
       // Everything is in `em` so it tracks the rendered font-size (including
       // the mobile `--type-tester--adjustment`); the `+ 2px` is slack that
       // keeps sub-pixel rounding from dropping the Nth line (the extra never
       // reveals line N+1 because that line is clipped out to the side).
       boxSizing: 'border-box',
       maxHeight: `calc(${truncateLines * lineHeight + 2 * lineOverflowEm}em + 2px)`,
-      paddingTop: `${lineOverflowEm}em`,
-      paddingBottom: `${lineOverflowEm}em`,
       paddingLeft: sideBearing,
       paddingRight: sideBearing,
       marginTop: `${-lineOverflowEm}em`,
       marginBottom: `${-lineOverflowEm}em`,
+      '--type-tester--line-overflow': `${lineOverflowEm}em`,
       // `clip`, not `hidden`, once the cap outlives focus. A hidden box is
       // still a scroll container, so the browser scrolls it to chase a
       // caret past line N, and the offset is unrecoverable because there is
@@ -167,9 +176,7 @@ const useTypeTesterStyler = _ref => {
       columnFill: 'auto',
       widows: 1,
       orphans: 1,
-      ...(columnStyle ?? {
-        columnCount: 1
-      })
+      ...truncateColumnStyle(columns)
     } : {
       height: 'auto',
       overflow: 'visible',

package/dist/components/useFontStyle.js

@@ -1,7 +1,7 @@
 import _useFontStyle_fontStyle from "../__generated__/useFontStyle_fontStyle.graphql.js";
 import { useState, useRef, useEffect } from 'react';
 import { graphql, useFragment } from 'react-relay';
-import { loadFont, isFontLoaded } from '../fontLoader.js';
+import { loadFont, isFontLoaded, fontStyleFamily } from '../fontLoader.js';
 import { ensureMetricFallback, metricFallbackFamily } from '../metricFallback.js';
 const FALLBACK_FAMILY = 'Fallback';
 const useFontStyle = _ref => {
@@ -9,7 +9,7 @@ const useFontStyle = _ref => {
     fontStyle: fontStyleKey
   } = _ref;
   const fontStyle = useFragment((_useFontStyle_fontStyle.hash && _useFontStyle_fontStyle.hash !== "171c546f40909692656c5e143a98d8a3" && console.error("The definition of 'useFontStyle_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFontStyle_fontStyle), fontStyleKey ?? null);
-  const fontFamily = fontStyle ? `${fontStyle.cssFamily} ${fontStyle.name}` : null;
+  const fontFamily = fontStyle ? fontStyleFamily(fontStyle.cssFamily, fontStyle.name) : null;
   const sources = fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.webfontSources;
   const verticalMetrics = fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.verticalMetrics;
 

package/dist/fontLoader.d.ts

@@ -9,6 +9,30 @@ interface VerticalMetrics {
     readonly descender: number;
     readonly lineGap: number | null;
 }
+/**
+ * The family name a font style's FontFace is registered under, and the name
+ * CSS must use to render it: `"<cssFamily> <styleName>"`, made safe to parse
+ * as an unquoted CSS font-family.
+ *
+ * Some Safari builds parse the FontFace family argument as CSS, so a name
+ * like "Hell's Gate fairypools" (the apostrophe opens an unterminated string)
+ * or "0712 Regular" (an identifier can't start with a digit) makes `load()`
+ * reject with "SyntaxError: The string did not match the expected pattern."
+ * and the style never renders, while Chrome and other WebKit builds take the
+ * argument literally. A name that is valid either way works everywhere:
+ *
+ * - an ASCII character other than a letter, digit, `-` or `_` is escaped as
+ *   `_<hex code>` (`'` → `_27`), so distinct names stay distinct;
+ * - a word starting with a digit, `-<digit>` or `--`, or matching a reserved
+ *   word, gets a leading `_`.
+ *
+ * Non-ASCII characters are valid identifier characters and are kept.
+ *
+ * @example
+ *   fontStyleFamily("Hell's Gate", 'fairypools') // => 'Hell_27s Gate fairypools'
+ *   fontStyleFamily('0712', 'Regular')           // => '_0712 Regular'
+ */
+export declare function fontStyleFamily(cssFamily: string | null | undefined, styleName: string): string;
 export declare function isFontLoaded(fontFamily: string): boolean;
 export declare function loadFont(fontFamily: string, sources: ReadonlyArray<FontSource | null>, verticalMetrics?: VerticalMetrics | null): Promise<FontFace | null>;
 /**

package/dist/fontLoader.js

@@ -1,3 +1,38 @@
+// Words CSS refuses as an unquoted font-family identifier (the CSS-wide
+// keywords plus `default`), compared case-insensitively.
+const RESERVED_FAMILY_WORDS = new Set(['inherit', 'initial', 'unset', 'revert', 'revert-layer', 'default']);
+
+/**
+ * The family name a font style's FontFace is registered under, and the name
+ * CSS must use to render it: `"<cssFamily> <styleName>"`, made safe to parse
+ * as an unquoted CSS font-family.
+ *
+ * Some Safari builds parse the FontFace family argument as CSS, so a name
+ * like "Hell's Gate fairypools" (the apostrophe opens an unterminated string)
+ * or "0712 Regular" (an identifier can't start with a digit) makes `load()`
+ * reject with "SyntaxError: The string did not match the expected pattern."
+ * and the style never renders, while Chrome and other WebKit builds take the
+ * argument literally. A name that is valid either way works everywhere:
+ *
+ * - an ASCII character other than a letter, digit, `-` or `_` is escaped as
+ *   `_<hex code>` (`'` → `_27`), so distinct names stay distinct;
+ * - a word starting with a digit, `-<digit>` or `--`, or matching a reserved
+ *   word, gets a leading `_`.
+ *
+ * Non-ASCII characters are valid identifier characters and are kept.
+ *
+ * @example
+ *   fontStyleFamily("Hell's Gate", 'fairypools') // => 'Hell_27s Gate fairypools'
+ *   fontStyleFamily('0712', 'Regular')           // => '_0712 Regular'
+ */
+export function fontStyleFamily(cssFamily, styleName) {
+  return `${cssFamily ?? ''} ${styleName}`.split(/\s+/).filter(word => word.length > 0).map(cssIdentifierWord).join(' ');
+}
+function cssIdentifierWord(word) {
+  const escaped = word.replace(/[\x00-\x7f]/g, char => /[A-Za-z0-9_-]/.test(char) ? char : `_${char.charCodeAt(0).toString(16)}`);
+  const unparseable = /^(?:[0-9]|-[0-9]|--|-$)/.test(escaped);
+  return unparseable || RESERVED_FAMILY_WORDS.has(escaped.toLowerCase()) ? `_${escaped}` : escaped;
+}
 const cache = new Map();
 const loaded = new Set();
 export function isFontLoaded(fontFamily) {

package/dist/fontdue.css

@@ -182,10 +182,6 @@
 .test-fonts__checkbox-field label p {
   margin: 0;
 }
-.test-fonts__families {
-  --checkbox-size: 20px;
-  --checkbox-margin: 10px;
-}
 .test-fonts__families .test-fonts__checkbox-field {
   margin-bottom: 10px;
 }
@@ -728,8 +724,6 @@ fontdue-type-tester {
 }
 .type-tester__features__button {
   display: flex;
-  --checkbox-size: 20px;
-  --checkbox-margin: 10px;
 }
 .type-tester__features[data-selection-style=checkbox] .type-tester__features__button {
   margin-bottom: 5px;
@@ -896,6 +890,19 @@ fontdue-type-tester {
 }
 .type-tester__text__container[data-truncated] {
   overflow: hidden;
+  padding-top: var(--type-tester--line-overflow, 0);
+  padding-bottom: var(--type-tester--line-overflow, 0);
+}
+@supports (font: -apple-system-body) or (-webkit-hyphenate-limit-lines: 1) {
+  .type-tester__text__container[data-truncated] {
+    column-width: 1px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .type-tester__text__container[data-truncated] [data-contents=true] {
+    padding-top: var(--type-tester--line-overflow, 0);
+    padding-bottom: var(--type-tester--line-overflow, 0);
+  }
 }
 .type-tester__text__container [data-contents=true] {
   column-count: var(--type-tester--column-count, auto);
@@ -1300,8 +1307,6 @@ fontdue-feature-testers {
   grid-template-columns: max-content auto;
   grid-column-gap: 20px;
   line-height: 1.6;
-  --checkbox-size: 20px;
-  --checkbox-margin: 10px;
 }
 .character-viewer__monitor__details > span {
   white-space: nowrap;
@@ -1382,10 +1387,10 @@ fontdue-feature-testers {
 .checkbox {
   position: relative;
   flex-shrink: 0;
-  margin-right: var(--checkbox-margin, 20px);
-  width: var(--checkbox-size, 40px);
-  height: var(--checkbox-size, 40px);
-  font-size: calc(var(--checkbox-size, 40px) * 0.8);
+  margin-right: var(--checkbox-margin, 10px);
+  width: var(--checkbox-size, 20px);
+  height: var(--checkbox-size, 20px);
+  font-size: calc(var(--checkbox-size, 20px) * 0.8);
 }
 .checkbox input {
   background: none;
@@ -1409,8 +1414,8 @@ fontdue-feature-testers {
 .checkbox input {
   -webkit-appearance: none;
   vertical-align: top;
-  width: var(--checkbox-size, 40px);
-  height: var(--checkbox-size, 40px);
+  width: var(--checkbox-size, 20px);
+  height: var(--checkbox-size, 20px);
   border: 1px solid var(--checkbox-color, currentcolor);
 }
 .checkbox__icon {

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.9.0";
+export const version = "3.10.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.9.0",
+  "version": "3.10.1",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",