fontdue-js 3.9.0 → 3.10.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 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. The checkbox size and this fix ship as stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+
 ## 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.

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__/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/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/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.0";

package/package.json

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