fontdue-js 3.10.1 → 3.11.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 3.11.0
+
+- `TestFontsForm` can group its family checkboxes by superfamily. With *Family list* set to *Grouped by superfamily* under *Settings → Test fonts* – or `testFonts: { familyGrouping: "superfamily" }` in the config, or the `familyGrouping` prop (`family-grouping` on `<fontdue-test-fonts-form>`) – each superfamily gets a checkbox that ticks all of its families, listed beneath it in `.test-fonts__family-group__families`.
+
 ## 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.

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<47f718aeae16846330759690c693dce6>>
+ * @generated SignedSource<<0a0e4ebec2aeeb79d7f6e04437e7b7cc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -12,6 +12,7 @@ export type TestFontsForm_Query$data = {
     readonly viewer: {
         readonly fontdueConfig: {
             readonly testFonts: {
+                readonly familyGrouping: string;
                 readonly familySelection: string;
             };
         } | null;
@@ -26,6 +27,10 @@ export type TestFontsForm_Query$data = {
             readonly families: ReadonlyArray<{
                 readonly id: string;
                 readonly name: string;
+                readonly parent: {
+                    readonly id: string;
+                    readonly name: string;
+                } | null;
             }>;
         } | null;
     };

package/dist/__generated__/TestFontsForm_Query.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<47f718aeae16846330759690c693dce6>>
+ * @generated SignedSource<<0a0e4ebec2aeeb79d7f6e04437e7b7cc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -77,6 +77,12 @@ const node = function () {
           "kind": "ScalarField",
           "name": "familySelection",
           "storageKey": null
+        }, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "familyGrouping",
+          "storageKey": null
         }],
         "storageKey": null
       }],
@@ -90,6 +96,13 @@ const node = function () {
       "storageKey": null
     },
     v5 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v6 = {
       "alias": null,
       "args": [{
         "kind": "Variable",
@@ -117,11 +130,14 @@ const node = function () {
         "kind": "LinkedField",
         "name": "families",
         "plural": true,
-        "selections": [v4 /*: any*/, {
+        "selections": [v4 /*: any*/, v5 /*: any*/, {
           "alias": null,
           "args": null,
-          "kind": "ScalarField",
-          "name": "name",
+          "concreteType": "FontCollection",
+          "kind": "LinkedField",
+          "name": "parent",
+          "plural": false,
+          "selections": [v4 /*: any*/, v5 /*: any*/],
           "storageKey": null
         }],
         "storageKey": null
@@ -141,7 +157,7 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/],
+        "selections": [v2 /*: any*/, v3 /*: any*/, v6 /*: any*/],
         "storageKey": null
       }],
       "type": "RootQueryType",
@@ -159,19 +175,19 @@ const node = function () {
         "kind": "LinkedField",
         "name": "viewer",
         "plural": false,
-        "selections": [v2 /*: any*/, v3 /*: any*/, v5 /*: any*/, v4 /*: any*/],
+        "selections": [v2 /*: any*/, v3 /*: any*/, v6 /*: any*/, v4 /*: any*/],
         "storageKey": null
       }]
     },
     "params": {
-      "cacheID": "42a58842afe113b89a0bc969738246a8",
+      "cacheID": "f0d8dba45eec4868101fe71af251133a",
       "id": null,
       "metadata": {},
       "name": "TestFontsForm_Query",
       "operationKind": "query",
-      "text": "query TestFontsForm_Query(\n  $collectionIds: [ID!]\n  $collectionSlugs: [String!]\n) {\n  viewer {\n    settings {\n      eulaAgreementLabel(format: HTML)\n      newsletterOptInLabel(format: HTML)\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    fontdueConfig {\n      testFonts {\n        familySelection\n      }\n    }\n    testFonts(collectionIds: $collectionIds, collectionSlugs: $collectionSlugs) {\n      archiveUrl\n      families {\n        id\n        name\n      }\n    }\n    id\n  }\n}\n"
+      "text": "query TestFontsForm_Query(\n  $collectionIds: [ID!]\n  $collectionSlugs: [String!]\n) {\n  viewer {\n    settings {\n      eulaAgreementLabel(format: HTML)\n      newsletterOptInLabel(format: HTML)\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    fontdueConfig {\n      testFonts {\n        familySelection\n        familyGrouping\n      }\n    }\n    testFonts(collectionIds: $collectionIds, collectionSlugs: $collectionSlugs) {\n      archiveUrl\n      families {\n        id\n        name\n        parent {\n          id\n          name\n        }\n      }\n    }\n    id\n  }\n}\n"
     }
   };
 }();
-node.hash = "da75e312a602ac0ee2dfb79271299c77";
+node.hash = "9ef2c42a7043469fec07a31649623766";
 export default node;

package/dist/__tests__/testFontsFamilyChoice.test.js

@@ -51,6 +51,7 @@ const families = [{
 }];
 const viewer = function (familySelection) {
   let list = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : families;
+  let familyGrouping = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'flat';
   return {
     viewer: {
       settings: {
@@ -61,7 +62,8 @@ const viewer = function (familySelection) {
       },
       fontdueConfig: {
         testFonts: {
-          familySelection
+          familySelection,
+          familyGrouping
         }
       },
       testFonts: {
@@ -147,4 +149,75 @@ describe('TestFontsForm family choice', () => {
     expect(container.querySelector('form')).toBeNull();
     expect(container.textContent).toContain('Test fonts aren’t available for this family.');
   });
+});
+describe('TestFontsForm family grouping', () => {
+  const sans = {
+    id: 'U3VwZXI6MQ==',
+    name: 'Example'
+  };
+  const grouped = [{
+    id: 'RmFtaWx5OjE=',
+    name: 'Example Sans',
+    parent: sans
+  }, {
+    id: 'RmFtaWx5OjI=',
+    name: 'Solo',
+    parent: null
+  }, {
+    id: 'RmFtaWx5OjM=',
+    name: 'Example Serif',
+    parent: sans
+  },
+  // The only family offered from its superfamily: listed on its own.
+  {
+    id: 'RmFtaWx5OjQ=',
+    name: 'Lonely',
+    parent: {
+      id: 'U3VwZXI6Mg==',
+      name: 'Lonely Super'
+    }
+  }];
+  const superfamilyBoxes = () => [...container.querySelectorAll('.test-fonts__superfamily input')];
+  it('lists the families flat by default', () => {
+    queryRef.data = viewer('choice', grouped);
+    render();
+    expect(superfamilyBoxes()).toHaveLength(0);
+    expect(familyCheckboxes().map(box => box.value)).toEqual(grouped.map(f => f.id));
+  });
+  it('groups families under their superfamily, which ticks them all', () => {
+    queryRef.data = viewer('choice', grouped, 'superfamily');
+    render();
+    expect(superfamilyBoxes()).toHaveLength(1);
+    const group = container.querySelector('.test-fonts__family-group');
+    expect(group.textContent).toContain('Example');
+    expect([...group.querySelectorAll('.test-fonts__family input')].map(b => b.value)).toEqual(['RmFtaWx5OjE=', 'RmFtaWx5OjM=']);
+    // The group sits where its first family fell; the rest keep their order.
+    expect(familyCheckboxes().map(box => box.value)).toEqual(['RmFtaWx5OjE=', 'RmFtaWx5OjM=', 'RmFtaWx5OjI=', 'RmFtaWx5OjQ=']);
+    expect(container.textContent).not.toContain('Lonely Super');
+    act(() => superfamilyBoxes()[0].click());
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjE=', 'RmFtaWx5OjM=']);
+    expect(superfamilyBoxes()[0].checked).toBe(true);
+
+    // Unticking one family leaves the superfamily unticked.
+    act(() => familyCheckboxes()[1].click());
+    expect(hiddenIds()).toEqual(['RmFtaWx5OjE=']);
+    expect(superfamilyBoxes()[0].checked).toBe(false);
+    act(() => superfamilyBoxes()[0].click());
+    act(() => superfamilyBoxes()[0].click());
+    expect(hiddenIds()).toEqual([]);
+  });
+  it('lets the prop and code config override the dashboard grouping', () => {
+    queryRef.data = viewer('choice', grouped, 'superfamily');
+    render({}, {
+      testFonts: {
+        familyGrouping: 'flat'
+      }
+    });
+    expect(superfamilyBoxes()).toHaveLength(0);
+    queryRef.data = viewer('choice', grouped);
+    render({
+      familyGrouping: 'superfamily'
+    });
+    expect(superfamilyBoxes()).toHaveLength(1);
+  });
 });

package/dist/components/ConfigContext.d.ts

@@ -29,8 +29,10 @@ interface PreviewConfig {
     clientSide?: boolean;
 }
 export type TestFontsFamilySelection = 'all' | 'choice';
+export type TestFontsFamilyGrouping = 'flat' | 'superfamily';
 interface TestFontsConfig {
     familySelection?: TestFontsFamilySelection;
+    familyGrouping?: TestFontsFamilyGrouping;
 }
 export interface Config {
     form?: FormConfig;
@@ -101,6 +103,7 @@ export declare const makeConfig: (config?: Config) => {
     };
     testFonts: {
         familySelection: TestFontsFamilySelection | undefined;
+        familyGrouping: TestFontsFamilyGrouping | undefined;
     };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";
@@ -182,6 +185,7 @@ declare const _default: React.Context<{
     };
     testFonts: {
         familySelection: TestFontsFamilySelection | undefined;
+        familyGrouping: TestFontsFamilyGrouping | undefined;
     };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";

package/dist/components/ConfigContext.js

@@ -88,7 +88,7 @@ export const mergeConfig = (base, override) => {
   return deepMerge(base, override);
 };
 export const makeConfig = config => {
-  var _config$form, _config$testFonts, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
+  var _config$form, _config$testFonts, _config$testFonts2, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
@@ -98,7 +98,8 @@ export const makeConfig = config => {
       // Deliberately no default: the form falls back to the dashboard setting
       // it reads in its own query (the npm path never merges server config
       // into `children`'s context – see ServerConfigProvider).
-      familySelection: config === null || config === void 0 ? void 0 : (_config$testFonts = config.testFonts) === null || _config$testFonts === void 0 ? void 0 : _config$testFonts.familySelection
+      familySelection: config === null || config === void 0 ? void 0 : (_config$testFonts = config.testFonts) === null || _config$testFonts === void 0 ? void 0 : _config$testFonts.familySelection,
+      familyGrouping: config === null || config === void 0 ? void 0 : (_config$testFonts2 = config.testFonts) === null || _config$testFonts2 === void 0 ? void 0 : _config$testFonts2.familyGrouping
     },
     storeModal: {
       indexLayout: (config === null || config === void 0 ? void 0 : (_config$storeModal = config.storeModal) === null || _config$storeModal === void 0 ? void 0 : _config$storeModal.indexLayout) ?? 'styled-aa',

package/dist/components/TestFontsForm/TestFontsFormElement.d.ts

@@ -6,6 +6,7 @@ interface TestFontsFormElement_props {
     collectionId?: string;
     collectionSlug?: string;
     familySelection?: string;
+    familyGrouping?: string;
 }
-declare const TestFontsFormElement: ({ familySelection, ...props }: TestFontsFormElement_props) => React.JSX.Element;
+declare const TestFontsFormElement: ({ familySelection, familyGrouping, ...props }: TestFontsFormElement_props) => React.JSX.Element;
 export default TestFontsFormElement;

package/dist/components/TestFontsForm/TestFontsFormElement.js

@@ -2,12 +2,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import TestFontsFormFetcher from './index.js';
 const FAMILY_SELECTIONS = ['all', 'choice'];
+const FAMILY_GROUPINGS = ['flat', 'superfamily'];
 const TestFontsFormElement = _ref => {
   let {
     familySelection,
+    familyGrouping,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement(TestFontsFormFetcher, _extends({}, props, {
+    familyGrouping: familyGrouping && FAMILY_GROUPINGS.includes(familyGrouping) ? familyGrouping : undefined,
     familySelection: familySelection && FAMILY_SELECTIONS.includes(familySelection) ? familySelection : undefined,
     newsletterCheckboxChecked: props.newsletterCheckboxChecked === 'true' ? true : false
   }));

package/dist/components/TestFontsForm/familyGroups.d.ts

@@ -0,0 +1,16 @@
+import { TestFontsFamilyGrouping } from '../ConfigContext.js';
+interface Superfamily {
+    readonly id: string;
+    readonly name: string | null | undefined;
+}
+export interface TestFontsFamily {
+    readonly id: string;
+    readonly name: string | null | undefined;
+    readonly parent?: Superfamily | null;
+}
+export interface FamilyGroup<Family extends TestFontsFamily> {
+    superfamily: Superfamily | null;
+    families: Family[];
+}
+export declare function groupFamilies<Family extends TestFontsFamily>(families: readonly Family[], grouping: TestFontsFamilyGrouping): FamilyGroup<Family>[];
+export {};

package/dist/components/TestFontsForm/familyGroups.js

@@ -0,0 +1,34 @@
+// One row of the family checkboxes: a lone family (`superfamily` null), or a
+// superfamily with its families nested beneath it.
+
+// Lays the families out for the form's checkboxes, keeping their order: flat
+// lists each family on its own; 'superfamily' gathers families under their
+// superfamily, placed where its first family falls. A superfamily with only one
+// family to offer adds nothing over that family, so the family stands alone.
+export function groupFamilies(families, grouping) {
+  const alone = family => ({
+    superfamily: null,
+    families: [family]
+  });
+  if (grouping !== 'superfamily') return families.map(alone);
+  const groups = [];
+  const bySuperfamily = new Map();
+  for (const family of families) {
+    const superfamily = family.parent;
+    if (!superfamily) {
+      groups.push(alone(family));
+      continue;
+    }
+    let group = bySuperfamily.get(superfamily.id);
+    if (!group) {
+      group = {
+        superfamily,
+        families: []
+      };
+      bySuperfamily.set(superfamily.id, group);
+      groups.push(group);
+    }
+    group.families.push(family);
+  }
+  return groups.map(group => group.families.length > 1 ? group : alone(group.families[0]));
+}

package/dist/components/TestFontsForm/index.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
 import { TestFontsForm_Query } from '../../__generated__/TestFontsForm_Query.graphql.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
-import { Config, TestFontsFamilySelection } from '../ConfigContext.js';
+import { Config, TestFontsFamilyGrouping, TestFontsFamilySelection } from '../ConfigContext.js';
 import { TestFontsFormCollectionProps } from './variables.js';
 export interface TestFontsForm_props extends TestFontsFormCollectionProps {
     agreementLabel?: string;
     downloadLabel?: string;
     newsletterCheckboxChecked?: boolean;
     familySelection?: TestFontsFamilySelection;
+    familyGrouping?: TestFontsFamilyGrouping;
 }
 export type TestFontsFormPreloadedQuery = SerializablePreloadedQuery<TestFontsForm_Query>;
 export type LoadTestFontsFormQueryVariables = TestFontsFormCollectionProps;

package/dist/components/TestFontsForm/index.js

@@ -18,6 +18,7 @@ import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQ
 import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 import ConfigContext from '../ConfigContext.js';
 import { testFontsFormQueryVariables } from './variables.js';
+import { groupFamilies } from './familyGroups.js';
 import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation.hash && _TestFontsFormUpdateCustomerMutation.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation);
 // The archive endpoint's family filter: `collection_ids[]` narrows the ZIP to
@@ -41,7 +42,7 @@ const TestFontsDownloading = _ref => {
   }, "here"), ".")));
 };
 const TestFontsFormComponent = _ref2 => {
-  var _data$viewer$testFont, _data$viewer$fontdueC, _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont2;
+  var _data$viewer$testFont, _data$viewer$fontdueC, _data$viewer$fontdueC2, _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont2;
   let {
     data,
     agreementLabel,
@@ -49,7 +50,8 @@ const TestFontsFormComponent = _ref2 => {
     newsletterCheckboxChecked = false,
     collectionId,
     collectionSlug,
-    familySelection: familySelectionProp
+    familySelection: familySelectionProp,
+    familyGrouping: familyGroupingProp
   } = _ref2;
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
@@ -82,11 +84,30 @@ const TestFontsFormComponent = _ref2 => {
   // This form's prop, then code config (which, on the script-tag path, already
   // has the dashboard setting merged beneath it), then the dashboard setting.
   const familySelection = familySelectionProp ?? config.testFonts.familySelection ?? ((_data$viewer$fontdueC = data.viewer.fontdueConfig) === null || _data$viewer$fontdueC === void 0 ? void 0 : _data$viewer$fontdueC.testFonts.familySelection) ?? 'all';
+  // Resolved the same way as the family selection.
+  const familyGrouping = familyGroupingProp ?? config.testFonts.familyGrouping ?? ((_data$viewer$fontdueC2 = data.viewer.fontdueConfig) === null || _data$viewer$fontdueC2 === void 0 ? void 0 : _data$viewer$fontdueC2.testFonts.familyGrouping) ?? 'flat';
   // One family leaves nothing to choose.
   const choosing = !limited && familySelection === 'choice' && families.length > 1;
   const downloadIds = limited ? families.map(family => family.id) : choosing ? families.map(family => family.id).filter(id => chosenIds.includes(id)) : [];
-  const toggleFamily = (id, checked) => setChosenIds(ids => checked ? [...ids, id] : ids.filter(other => other !== id));
-  const allChosen = families.every(family => chosenIds.includes(family.id));
+
+  // Ticks or unticks families – one, or a superfamily's.
+  const toggleFamilies = (toggled, checked) => setChosenIds(ids => [...ids.filter(id => !toggled.includes(id)), ...(checked ? toggled : [])]);
+  const allChosen = list => list.every(family => chosenIds.includes(family.id));
+  const familyGroups = groupFamilies(families, familyGrouping);
+  const familyField = family => {
+    const fieldId = `${idPrefix}-family-${families.indexOf(family)}`;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__checkbox-field test-fonts__family",
+      key: family.id
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      id: fieldId,
+      value: family.id,
+      checked: chosenIds.includes(family.id),
+      onChange: event => toggleFamilies([family.id], event.target.checked)
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: fieldId
+    }, family.name));
+  };
   const recaptchaEnabled = ((_data$viewer$settings = data.viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_data$viewer$settings2 = data.viewer.settings) === null || _data$viewer$settings2 === void 0 ? void 0 : _data$viewer$settings2.recaptchaSiteKey;
   const submitForm = useCallback(token => {
@@ -212,21 +233,30 @@ const TestFontsFormComponent = _ref2 => {
     className: "test-fonts__checkbox-field test-fonts__families__all"
   }, /*#__PURE__*/React.createElement(Checkbox, {
     id: `${idPrefix}-families-all`,
-    checked: allChosen,
+    checked: allChosen(families),
     onChange: event => setChosenIds(event.target.checked ? families.map(family => family.id) : [])
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: `${idPrefix}-families-all`
-  }, "Select all")), families.map((family, index) => /*#__PURE__*/React.createElement("div", {
-    className: "test-fonts__checkbox-field test-fonts__family",
-    key: family.id
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    id: `${idPrefix}-family-${index}`,
-    value: family.id,
-    checked: chosenIds.includes(family.id),
-    onChange: event => toggleFamily(family.id, event.target.checked)
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: `${idPrefix}-family-${index}`
-  }, family.name)))), /*#__PURE__*/React.createElement("div", {
+  }, "Select all")), familyGroups.map((_ref4, groupIndex) => {
+    let {
+      superfamily,
+      families: grouped
+    } = _ref4;
+    return superfamily ? /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__family-group",
+      key: superfamily.id
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__checkbox-field test-fonts__superfamily"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      id: `${idPrefix}-superfamily-${groupIndex}`,
+      checked: allChosen(grouped),
+      onChange: event => toggleFamilies(grouped.map(family => family.id), event.target.checked)
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: `${idPrefix}-superfamily-${groupIndex}`
+    }, superfamily.name)), /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__family-group__families"
+    }, grouped.map(familyField))) : familyField(grouped[0]);
+  })), /*#__PURE__*/React.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/React.createElement(TextField, {
     label: "Name *",
@@ -289,7 +319,7 @@ const TestFontsFormComponent = _ref2 => {
     value: id
   }))));
 };
-const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "da75e312a602ac0ee2dfb79271299c77" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
+const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "9ef2c42a7043469fec07a31649623766" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
 // Pass the same `collectionId` / `collectionSlug` as the form's props.
 export async function loadTestFontsFormQuery(variables, options) {
   // Before the collection variables existed this took `options` alone.
@@ -298,11 +328,11 @@ export async function loadTestFontsFormQuery(variables, options) {
   }
   return loadSerializableQuery(TestFontsFormQueryNode, testFontsFormQueryVariables(variables ?? {}), options);
 }
-export function TestFontsFormPreloadedQueryRenderer(_ref4) {
+export function TestFontsFormPreloadedQueryRenderer(_ref5) {
   let {
     preloadedQuery,
     ...rest
-  } = _ref4;
+  } = _ref5;
   // The query node lets the hook commit the payload into the store, so
   // usePreloadedQuery resolves synchronously during SSR instead of
   // refetching (the response cache only exists in the browser).
@@ -322,11 +352,11 @@ function TestFontsFormLazyQueryRenderer(props) {
 // (server-side preload path) or fetches lazily on mount. `EnsureFontdueContext`
 // only self-wraps with `FontdueContextProvider` when no parent Fontdue
 // context is present, seeding it with `config`.
-export default function TestFontsForm(_ref5) {
+export default function TestFontsForm(_ref6) {
   let {
     config,
     ...props
-  } = _ref5;
+  } = _ref6;
   return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
     config: config
   }, props.preloadedQuery ? /*#__PURE__*/React.createElement(TestFontsFormPreloadedQueryRenderer, _extends({}, props, {

package/dist/fontLoader.d.ts

@@ -14,12 +14,14 @@ interface VerticalMetrics {
  * 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:
+ * Safari 26.0.x (macOS Tahoe / iOS 26 before their point updates) parses 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. Chrome and other Safari builds (17.3, 18.4, 26.4+, 27.0 were
+ * checked) 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;

package/dist/fontLoader.js

@@ -7,12 +7,14 @@ const RESERVED_FAMILY_WORDS = new Set(['inherit', 'initial', 'unset', 'revert',
  * 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:
+ * Safari 26.0.x (macOS Tahoe / iOS 26 before their point updates) parses 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. Chrome and other Safari builds (17.3, 18.4, 26.4+, 27.0 were
+ * checked) 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;

package/dist/fontdue.css

@@ -185,6 +185,9 @@
 .test-fonts__families .test-fonts__checkbox-field {
   margin-bottom: 10px;
 }
+.test-fonts__family-group__families {
+  padding-left: calc(var(--checkbox-size, 20px) + var(--checkbox-margin, 10px));
+}
 .test-fonts__agreement[data-highlighted=true] {
   color: red;
 }

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.10.1";
+export const version = "3.11.0";

package/package.json

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