fontdue-js 3.3.0 → 3.4.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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`.
+
+## 3.4.0
+
+- Added new `openTypeFeatures.interactionStyle: 'dropdown'` for type testers. The features button opens a compact single-column overlay instead of the panel.
+- Scripts gated with `data-consent-category` now activate on every page load where the visitor has already granted that category, not only the load where they accepted.
+
 ## 3.3.0
 
 - Fixed one page being counted as many pageviews. Sites that rewrite the URL without navigating — scroll restoration, shallow routing — counted a view per rewrite, inflating Pageviews and Top pages in your Fontdue dashboard. Only a change of URL counts now.

package/dist/__tests__/consentActivation.test.js

@@ -0,0 +1,85 @@
+// @vitest-environment happy-dom
+// @vitest-environment-options { "url": "https://store.example.com/" }
+
+// Consent-gated scripts (`<script type="text/plain" data-consent-category>`)
+// must activate both at the moment consent is granted and on every later page
+// load where consent is already stored — the accept-click only covers the page
+// load it happens on (FD-1088: a consented visitor's Meta pixel never fired
+// again after the banner was dismissed).
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import { activateConsentedScripts, getConsentedCategories, hasConsent, setConsent } from '../components/ConsentBanner/consent.js';
+function addGatedScript(category) {
+  let attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const script = document.createElement('script');
+  script.setAttribute('type', 'text/plain');
+  script.setAttribute('data-consent-category', category);
+  for (const [name, value] of Object.entries(attrs)) {
+    script.setAttribute(name, value);
+  }
+  script.textContent = `/* ${category} snippet */`;
+  document.head.appendChild(script);
+  return script;
+}
+function gatedScripts(category) {
+  return document.querySelectorAll(`script[type="text/plain"][data-consent-category="${category}"]`);
+}
+beforeEach(() => {
+  document.cookie = '_fontdue_cc=;path=/;max-age=0';
+  document.head.innerHTML = '';
+});
+describe('activateConsentedScripts', () => {
+  it('activates gated scripts for categories granted on a previous visit', () => {
+    document.cookie = '_fontdue_cc=necessary,analytics;path=/';
+    addGatedScript('analytics', {
+      'data-pixel': 'meta'
+    });
+    addGatedScript('marketing');
+    activateConsentedScripts();
+
+    // The analytics script is replaced by an executable copy that keeps its
+    // other attributes and content.
+    expect(gatedScripts('analytics')).toHaveLength(0);
+    const activated = document.querySelector('script[data-pixel="meta"]');
+    expect(activated).not.toBeNull();
+    expect(activated.getAttribute('type')).toBeNull();
+    expect(activated.getAttribute('data-consent-category')).toBeNull();
+    expect(activated.textContent).toBe('/* analytics snippet */');
+
+    // A category the visitor never granted stays inert.
+    expect(gatedScripts('marketing')).toHaveLength(1);
+  });
+  it('does nothing without a consent cookie', () => {
+    addGatedScript('analytics');
+    activateConsentedScripts();
+    expect(gatedScripts('analytics')).toHaveLength(1);
+  });
+});
+describe('setConsent', () => {
+  it('activates gated scripts for the granted categories', () => {
+    addGatedScript('analytics');
+    let eventCategories;
+    window.addEventListener('fontdue:consent', event => {
+      eventCategories = event.detail.categories;
+    });
+    setConsent(['necessary', 'analytics']);
+    expect(gatedScripts('analytics')).toHaveLength(0);
+    expect(hasConsent('analytics')).toBe(true);
+    expect(eventCategories).toEqual(['necessary', 'analytics']);
+  });
+  it('leaves scripts of ungranted categories inert', () => {
+    addGatedScript('analytics');
+    setConsent(['necessary']);
+    expect(gatedScripts('analytics')).toHaveLength(1);
+    expect(hasConsent('analytics')).toBe(false);
+  });
+});
+describe('getConsentedCategories', () => {
+  it('parses the cookie into categories', () => {
+    document.cookie = '_fontdue_cc=necessary,analytics;path=/';
+    expect(getConsentedCategories()).toEqual(['necessary', 'analytics']);
+  });
+  it('returns an empty list without a cookie', () => {
+    expect(getConsentedCategories()).toEqual([]);
+  });
+});

package/dist/__tests__/parseVariableSettings.test.js

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { parseVariableSettings } from '../components/TypeTester/parseVariableSettings.js';
+describe('parseVariableSettings', () => {
+  let warn;
+  beforeEach(() => {
+    warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    warn.mockRestore();
+  });
+  it('returns null when the attribute is absent or empty', () => {
+    expect(parseVariableSettings(undefined)).toBeNull();
+    expect(parseVariableSettings(null)).toBeNull();
+    expect(parseVariableSettings('')).toBeNull();
+  });
+  it('parses integer and decimal values', () => {
+    expect(parseVariableSettings('wdth 1000, ital 0.5')).toEqual([{
+      axis: 'wdth',
+      value: 1000
+    }, {
+      axis: 'ital',
+      value: 0.5
+    }]);
+    expect(warn).not.toHaveBeenCalled();
+  });
+  it('parses negative values, so axes like slnt keep their slider', () => {
+    expect(parseVariableSettings('slnt -11')).toEqual([{
+      axis: 'slnt',
+      value: -11
+    }]);
+    expect(parseVariableSettings('slnt -11.0')).toEqual([{
+      axis: 'slnt',
+      value: -11
+    }]);
+    expect(parseVariableSettings('ital -0.5')).toEqual([{
+      axis: 'ital',
+      value: -0.5
+    }]);
+    expect(warn).not.toHaveBeenCalled();
+  });
+  it('keeps the sibling axes of a negative setting', () => {
+    // Regression for FD-1137: a single unparsed setting used to be dropped, and
+    // with it the slider for that axis, leaving adjacent testers inconsistent.
+    expect(parseVariableSettings('slnt -11.0, wdth 50.0, wght 300.0')).toEqual([{
+      axis: 'slnt',
+      value: -11
+    }, {
+      axis: 'wdth',
+      value: 50
+    }, {
+      axis: 'wght',
+      value: 300
+    }]);
+    expect(warn).not.toHaveBeenCalled();
+  });
+  it('tolerates whitespace around the separator and between axis and value', () => {
+    expect(parseVariableSettings('  wght   300 ,  slnt -11  ')).toEqual([{
+      axis: 'wght',
+      value: 300
+    }, {
+      axis: 'slnt',
+      value: -11
+    }]);
+    expect(warn).not.toHaveBeenCalled();
+  });
+  it('warns about and drops malformed settings, keeping the valid ones', () => {
+    expect(parseVariableSettings('wght 300, nonsense, wdth abc, slnt -')).toEqual([{
+      axis: 'wght',
+      value: 300
+    }]);
+    expect(warn).toHaveBeenCalledTimes(3);
+  });
+});

package/dist/components/ConfigContext.d.ts

@@ -57,7 +57,7 @@ export declare const makeConfig: (config?: Config) => {
         bulletStyle: "round" | "square";
         openTypeFeatures: {
             buttonLabel: string;
-            interactionStyle: "select" | "panel";
+            interactionStyle: "select" | "panel" | "dropdown";
             columns: {
                 features: ({
                     code: string;
@@ -135,7 +135,7 @@ declare const _default: React.Context<{
         bulletStyle: "round" | "square";
         openTypeFeatures: {
             buttonLabel: string;
-            interactionStyle: "select" | "panel";
+            interactionStyle: "select" | "panel" | "dropdown";
             columns: {
                 features: ({
                     code: string;

package/dist/components/ConfigContext.js

@@ -9,6 +9,13 @@ const makeTypeTesterConfig = config => {
   if (shy === true) shy = 'hover';
   let toolsPosition = (config === null || config === void 0 ? void 0 : config.toolsPosition) ?? 'inline';
   if (shy !== 'focus') toolsPosition = 'inline';
+
+  // The dropdown features surface is built for the inline toolbar; inside the
+  // bottom-fixed floating toolbar it would open downward off-viewport. Fall
+  // back to the panel there, mirroring the toolsPosition rule above, so every
+  // consumer sees a coherent combination.
+  let featuresInteractionStyle = (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu = config.openTypeFeatures) === null || _config$openTypeFeatu === void 0 ? void 0 : _config$openTypeFeatu.interactionStyle) ?? 'panel';
+  if (featuresInteractionStyle === 'dropdown' && toolsPosition === 'floating') featuresInteractionStyle = 'panel';
   return {
     autofitOnChange: (config === null || config === void 0 ? void 0 : config.autofitOnChange) ?? false,
     truncate: (config === null || config === void 0 ? void 0 : config.truncate) ?? false,
@@ -25,8 +32,8 @@ const makeTypeTesterConfig = config => {
     groupEdit: (config === null || config === void 0 ? void 0 : config.groupEdit) ?? false,
     bulletStyle: (config === null || config === void 0 ? void 0 : config.bulletStyle) ?? 'square',
     openTypeFeatures: {
-      buttonLabel: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu = config.openTypeFeatures) === null || _config$openTypeFeatu === void 0 ? void 0 : _config$openTypeFeatu.buttonLabel) ?? 'OT Features',
-      interactionStyle: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu2 = config.openTypeFeatures) === null || _config$openTypeFeatu2 === void 0 ? void 0 : _config$openTypeFeatu2.interactionStyle) ?? 'panel',
+      buttonLabel: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu2 = config.openTypeFeatures) === null || _config$openTypeFeatu2 === void 0 ? void 0 : _config$openTypeFeatu2.buttonLabel) ?? 'OT Features',
+      interactionStyle: featuresInteractionStyle,
       columns: config === null || config === void 0 ? void 0 : (_config$openTypeFeatu3 = config.openTypeFeatures) === null || _config$openTypeFeatu3 === void 0 ? void 0 : _config$openTypeFeatu3.columns,
       selectionStyle: (config === null || config === void 0 ? void 0 : (_config$openTypeFeatu4 = config.openTypeFeatures) === null || _config$openTypeFeatu4 === void 0 ? void 0 : _config$openTypeFeatu4.selectionStyle) ?? 'bullet'
     },

package/dist/components/ConsentBanner/consent.d.ts

@@ -15,10 +15,19 @@ export type EntryAttribution = {
 };
 export declare function setEntryAttribution(body: EntryAttribution): void;
 export declare function getEntryAttribution(): EntryAttribution | undefined;
+/** Parse the _fontdue_cc cookie into the list of granted categories. */
+export declare function getConsentedCategories(): string[];
 /** Parse the _fontdue_cc cookie and check if it contains the given category. */
 export declare function hasConsent(category: string): boolean;
 /** Set the _fontdue_cc cookie with the given categories. */
 export declare function setConsent(categories: string[]): void;
+/**
+ * Activate gated scripts for every category the visitor has already granted.
+ * Must run on every page load: the accept-click only activates scripts on the
+ * page load it happens on, and once consent is stored the banner no longer
+ * appears to activate anything.
+ */
+export declare function activateConsentedScripts(): void;
 /**
  * Call callback when the given consent category is granted.
  * If already granted, calls immediately. Otherwise polls (500ms) and

package/dist/components/ConsentBanner/consent.js

@@ -29,16 +29,27 @@ export function getEntryAttribution() {
   return entryAttribution;
 }
 
+/** Parse the _fontdue_cc cookie into the list of granted categories. */
+export function getConsentedCategories() {
+  const match = document.cookie.match(new RegExp('(?:^|;\\s*)' + CONSENT_COOKIE + '=([^;]*)'));
+  if (!match) return [];
+  return match[1].split(',').filter(Boolean);
+}
+
 /** Parse the _fontdue_cc cookie and check if it contains the given category. */
 export function hasConsent(category) {
-  const match = document.cookie.match(new RegExp('(?:^|;\\s*)' + CONSENT_COOKIE + '=([^;]*)'));
-  if (!match) return false;
-  return match[1].split(',').includes(category);
+  return getConsentedCategories().includes(category);
 }
 
 /** Set the _fontdue_cc cookie with the given categories. */
 export function setConsent(categories) {
   document.cookie = CONSENT_COOKIE + '=' + categories.join(',') + ';path=/;max-age=' + MAX_AGE + ';SameSite=Lax;Secure';
+
+  // Granting a category activates its gated scripts, whichever UI called this
+  // — the bundled banner or a custom one built on these helpers.
+  for (const category of categories) {
+    activateScripts(category);
+  }
   window.dispatchEvent(new CustomEvent(CONSENT_EVENT, {
     detail: {
       categories
@@ -46,6 +57,18 @@ export function setConsent(categories) {
   }));
 }
 
+/**
+ * Activate gated scripts for every category the visitor has already granted.
+ * Must run on every page load: the accept-click only activates scripts on the
+ * page load it happens on, and once consent is stored the banner no longer
+ * appears to activate anything.
+ */
+export function activateConsentedScripts() {
+  for (const category of getConsentedCategories()) {
+    activateScripts(category);
+  }
+}
+
 /**
  * Call callback when the given consent category is granted.
  * If already granted, calls immediately. Otherwise polls (500ms) and

package/dist/components/ConsentBanner/index.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import ConfigContext from '../ConfigContext.js';
 import { useFontdueUrl } from '../UrlContext.js';
-import { setConsent, activateScripts, getClientAnonymousId, getEntryAttribution } from './consent.js';
+import { setConsent, activateConsentedScripts, getClientAnonymousId, getEntryAttribution } from './consent.js';
 const DEFAULT_MESSAGE = 'We use cookies to analyze site usage and improve your\u00A0experience.';
 const ConsentBanner = () => {
   const config = useContext(ConfigContext);
@@ -11,6 +11,10 @@ const ConsentBanner = () => {
   // Check on the client in useEffect.
   const [dismissed, setDismissed] = useState(true);
   useEffect(() => {
+    // Scripts gated on an already-granted category stay inert until something
+    // activates them, and the accept-click only covers the page load it
+    // happens on — so activation has to re-run on every mount.
+    activateConsentedScripts();
     if (!config.tracking.consentRequired) return;
     if (!document.cookie.includes('_fontdue_cc=')) {
       setDismissed(false);
@@ -47,9 +51,8 @@ const ConsentBanner = () => {
   };
   const handleAcceptAll = () => {
     // Write the consent cookie first, so the tracking request carries it and the
-    // server is permitted to forward.
+    // server is permitted to forward. setConsent also activates gated scripts.
     setConsent(['necessary', 'analytics']);
-    activateScripts('analytics');
     if (config.tracking.enabled) {
       sendConsentEvent(['necessary', 'analytics']);
     }

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

@@ -40,6 +40,7 @@ type TypeTesterContextAction = {
     type: 'TOGGLE_MODE';
 } | {
     type: 'TOGGLE_GLOBAL_FEATURES_OPEN';
+    value?: boolean;
 } | {
     type: 'SET_CONTENT';
     id: string;

package/dist/components/TypeTester/TypeTesterContext.js

@@ -65,7 +65,7 @@ const groupReducer = (state, action) => {
     case 'TOGGLE_GLOBAL_FEATURES_OPEN':
       return {
         ...state,
-        globalFeaturesOpen: !state.globalFeaturesOpen
+        globalFeaturesOpen: action.value ?? !state.globalFeaturesOpen
       };
     case 'SET_CONTENT':
       return updateTester(state, action.id, {

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

@@ -6,5 +6,5 @@ interface TypeTesterFeatures_props {
     features: ReadonlyArray<string> | null;
     axes: ReadonlyArray<string> | null | undefined;
 }
-export default function TypeTesterFeatures({ id, fontStyle: fontStyleKey, features: showFeatures, axes, }: TypeTesterFeatures_props): React.JSX.Element;
+export default function TypeTesterFeatures(props: TypeTesterFeatures_props): React.JSX.Element;
 export {};

package/dist/components/TypeTester/TypeTesterFeatures.js

@@ -1,5 +1,5 @@
 import _TypeTesterFeatures_fontStyle from "../../__generated__/TypeTesterFeatures_fontStyle.graphql.js";
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { graphql, useFragment } from 'react-relay';
 import Bullet from '../TypeTester/TypeTesterBullet.js';
 import useTypeTesterState from './TypeTesterState.js';
@@ -43,13 +43,18 @@ const shouldIncludeFeature = (supportedFeatures, feature) => {
   if (!supportedFeatures) return false;
   return supportedFeatures.indexOf(feature) >= 0;
 };
-export default function TypeTesterFeatures(_ref) {
-  var _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$openTypeFeatu4;
+const featureCode = feature => typeof feature === 'string' ? feature : feature.code;
+
+// The single support filter for a configured column, shared by the panel's
+// per-column rendering and the dropdown's flattened list so the two layouts
+// can't drift apart.
+const supportedColumnFeatures = (features, supportedFeatures) => features.filter(feature => shouldIncludeFeature(supportedFeatures, featureCode(feature)));
+// Data plumbing shared by both feature surfaces.
+function useFeaturesSurface(_ref) {
   let {
     id,
     fontStyle: fontStyleKey,
-    features: showFeatures,
-    axes
+    features: showFeatures
   } = _ref;
   const fontStyle = useFragment((_TypeTesterFeatures_fontStyle.hash && _TypeTesterFeatures_fontStyle.hash !== "d0c693dadaa9ae68f5295f3fc69a7578" && console.error("The definition of 'TypeTesterFeatures_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_fontStyle), fontStyleKey);
   const {
@@ -58,26 +63,34 @@ export default function TypeTesterFeatures(_ref) {
   const {
     features: selectedFeatures,
     toggleFeature,
-    featuresOpen
+    featuresOpen,
+    setFeaturesOpen
   } = useTypeTesterState({
     id
   });
-  const selectionStyle = config.openTypeFeatures.selectionStyle;
   const {
     featureNames,
     fontFeatures
   } = useFeaturesData({
     fontStyle
   });
+  const selectionStyle = config.openTypeFeatures.selectionStyle;
+  const supportedFeatures = (fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures) ?? null;
+  const expandedFeatures = useMemo(() => showFeatures !== null && showFeatures !== void 0 && showFeatures.includes('*') ? supportedFeatures ?? [] : (showFeatures ?? []).filter(feature => shouldIncludeFeature(supportedFeatures, feature)), [showFeatures, supportedFeatures]);
   const renderFeature = feature => {
-    const featureCode = typeof feature === 'string' ? feature : feature.code;
-    const featureName = typeof feature === 'string' ? featureNames[featureCode] : feature.name;
-    const checked = selectedFeatures.indexOf(featureCode) >= 0;
+    const code = featureCode(feature);
+    const featureName = typeof feature === 'string' ? featureNames[code] : feature.name;
+    const checked = selectedFeatures.indexOf(code) >= 0;
     return /*#__PURE__*/React.createElement("button", {
-      key: featureCode,
+      key: code,
       className: "type-tester__features__button",
-      type: "button",
-      onClick: () => toggleFeature(featureCode)
+      type: "button"
+      // The row button carries the checked state so site CSS can style the
+      // whole row. Unchecked rows render data-checked="false", so select
+      // with [data-checked='true'], not the bare [data-checked].
+      ,
+      "data-checked": checked,
+      onClick: () => toggleFeature(code)
     }, selectionStyle === 'bullet' && /*#__PURE__*/React.createElement(Bullet, {
       checked: checked,
       config: config
@@ -88,8 +101,168 @@ export default function TypeTesterFeatures(_ref) {
       className: "type-tester__features__name"
     }, featureName));
   };
+  return {
+    fontStyle,
+    config,
+    featuresOpen,
+    setFeaturesOpen,
+    selectionStyle,
+    supportedFeatures,
+    expandedFeatures,
+    renderFeature
+  };
+}
+function TypeTesterFeaturesDropdown(_ref2) {
+  var _config$openTypeFeatu;
+  let {
+    id,
+    fontStyle: fontStyleKey,
+    features,
+    axes
+  } = _ref2;
+  const {
+    fontStyle,
+    config,
+    featuresOpen,
+    setFeaturesOpen,
+    selectionStyle,
+    supportedFeatures,
+    expandedFeatures,
+    renderFeature
+  } = useFeaturesSurface({
+    id,
+    fontStyle: fontStyleKey,
+    features
+  });
+  const dropdownRef = useRef(null);
+
+  // Close on outside interaction and on Escape. Registered only while open.
+  // pointerdown rather than mousedown: iOS never synthesizes mouse events for
+  // taps on non-clickable page areas, which would leave the dropdown stuck
+  // open. composedPath keeps the inside/outside test working when a host site
+  // wraps the tester in a shadow root, where event.target retargets to the
+  // shadow host.
+  useEffect(() => {
+    if (!featuresOpen) return;
+    const resolveTarget = event => {
+      var _event$composedPath;
+      return ((_event$composedPath = event.composedPath) === null || _event$composedPath === void 0 ? void 0 : _event$composedPath.call(event)[0]) ?? event.target;
+    };
+    const handlePointerDown = event => {
+      var _dropdown$closest;
+      const target = resolveTarget(event);
+      const dropdown = dropdownRef.current;
+      if (!target || !dropdown) return;
+      if (dropdown.contains(target)) return;
+      // The features button toggles the dropdown itself; closing here as well
+      // would make the button's click handler immediately re-open it.
+      const button = (_dropdown$closest = dropdown.closest('.type-tester')) === null || _dropdown$closest === void 0 ? void 0 : _dropdown$closest.querySelector('.type-tester__features-button');
+      if (button !== null && button !== void 0 && button.contains(target)) return;
+      setFeaturesOpen(false);
+    };
+    const handleKeyDown = event => {
+      if (event.key !== 'Escape') return;
+      // The keypress belongs to an overlay above us, or to an in-progress IME
+      // composition being cancelled inside the editable tester.
+      if (event.defaultPrevented || event.isComposing) return;
+      setFeaturesOpen(false);
+    };
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [featuresOpen, setFeaturesOpen]);
+  const anchorMouseDown = event => {
+    var _target$classList;
+    // Keep the tester's contentEditable focused while interacting with the
+    // dropdown (same purpose as the panel container's handler below), except
+    // for a mousedown on the list's own vertical scrollbar: cancelling that
+    // aborts the scrollbar-thumb drag in browsers with classic scrollbars.
+    // A scrollbar hit lands on the scrollable element itself with offsetX
+    // beyond clientWidth (clientWidth excludes the scrollbar).
+    const target = event.target;
+    if ((_target$classList = target.classList) !== null && _target$classList !== void 0 && _target$classList.contains('type-tester__features-dropdown') && event.nativeEvent.offsetX >= target.clientWidth) {
+      return;
+    }
+    event.preventDefault();
+  };
+  if (!featuresOpen) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "type-tester__features-dropdown-anchor",
+      "data-open": false,
+      onMouseDown: anchorMouseDown
+    });
+  }
+
+  // A configured `columns` layout is flattened into the single scrolling
+  // column in order (a column's `range` has no meaning here), deduped by
+  // feature code: the panel may legitimately repeat a code across columns,
+  // but one flat list would hand React duplicate keys.
+  const columns = (_config$openTypeFeatu = config.openTypeFeatures) === null || _config$openTypeFeatu === void 0 ? void 0 : _config$openTypeFeatu.columns;
+  let dropdownFeatures;
+  if (columns !== null && columns !== void 0 && columns.length) {
+    const seen = new Set();
+    dropdownFeatures = columns.flatMap(columnConfig => supportedColumnFeatures(columnConfig.features, supportedFeatures)).filter(feature => {
+      const code = featureCode(feature);
+      if (seen.has(code)) return false;
+      seen.add(code);
+      return true;
+    });
+  } else {
+    dropdownFeatures = expandedFeatures;
+  }
+  const hasAxes = Boolean(axes && axes.length > 0);
+
+  // The anchor has no height of its own, so the open dropdown overlays the
+  // content below instead of pushing it down. With nothing to show (no
+  // supported features, no axes routed here) skip the overlay entirely:
+  // unlike the chromeless panel, an empty dropdown would be a visible box.
+  return /*#__PURE__*/React.createElement("div", {
+    className: "type-tester__features-dropdown-anchor",
+    "data-open": featuresOpen,
+    onMouseDown: anchorMouseDown
+  }, dropdownFeatures.length > 0 || hasAxes ? /*#__PURE__*/React.createElement("div", {
+    className: "type-tester__features-dropdown",
+    ref: dropdownRef
+  }, axes && axes.length > 0 ? /*#__PURE__*/React.createElement(TypeTesterVariableAxes, {
+    id: id,
+    axes: axes,
+    fontStyle: fontStyle
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: "type-tester__features",
+    "data-selection-style": selectionStyle,
+    "data-columns": "dropdown"
+  }, dropdownFeatures.map(renderFeature))) : null);
+}
+function TypeTesterFeaturesPanel(_ref3) {
+  var _config$openTypeFeatu2, _config$openTypeFeatu3, _config$openTypeFeatu4, _config$openTypeFeatu5;
+  let {
+    id,
+    fontStyle: fontStyleKey,
+    features,
+    axes
+  } = _ref3;
+  const {
+    fontStyle,
+    config,
+    featuresOpen,
+    selectionStyle,
+    supportedFeatures,
+    expandedFeatures,
+    renderFeature
+  } = useFeaturesSurface({
+    id,
+    fontStyle: fontStyleKey,
+    features
+  });
+  const {
+    height: featuresHeight,
+    contentRef: featuresContentRef
+  } = useHeightAnimation(featuresOpen, 300);
   let featuresColumns;
-  if ((_config$openTypeFeatu = config.openTypeFeatures) !== null && _config$openTypeFeatu !== void 0 && (_config$openTypeFeatu2 = _config$openTypeFeatu.columns) !== null && _config$openTypeFeatu2 !== void 0 && _config$openTypeFeatu2.length) {
+  if ((_config$openTypeFeatu2 = config.openTypeFeatures) !== null && _config$openTypeFeatu2 !== void 0 && (_config$openTypeFeatu3 = _config$openTypeFeatu2.columns) !== null && _config$openTypeFeatu3 !== void 0 && _config$openTypeFeatu3.length) {
     featuresColumns = /*#__PURE__*/React.createElement(React.Fragment, null, config.openTypeFeatures.columns.map((columnConfig, i) => /*#__PURE__*/React.createElement("div", {
       key: i,
       "data-range": columnConfig.range,
@@ -97,15 +270,10 @@ export default function TypeTesterFeatures(_ref) {
       style: {
         '--grid-range': columnConfig.range
       }
-    }, columnConfig.features.filter(feature => shouldIncludeFeature(fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures, typeof feature === 'string' ? feature : feature.code)).map(renderFeature))));
+    }, supportedColumnFeatures(columnConfig.features, supportedFeatures).map(renderFeature))));
   } else {
-    const expanded = showFeatures !== null && showFeatures !== void 0 && showFeatures.includes('*') ? (fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures) ?? [] : (showFeatures ?? []).filter(feature => shouldIncludeFeature(fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures, feature));
-    featuresColumns = /*#__PURE__*/React.createElement(React.Fragment, null, expanded.map(renderFeature));
+    featuresColumns = /*#__PURE__*/React.createElement(React.Fragment, null, expandedFeatures.map(renderFeature));
   }
-  const {
-    height: featuresHeight,
-    contentRef: featuresContentRef
-  } = useHeightAnimation(featuresOpen, 300);
   return /*#__PURE__*/React.createElement("div", {
     className: "type-tester__features-container",
     onMouseDown: e => e.preventDefault(),
@@ -124,6 +292,16 @@ export default function TypeTesterFeatures(_ref) {
   }) : null, /*#__PURE__*/React.createElement("div", {
     className: "type-tester__features",
     "data-selection-style": selectionStyle,
-    "data-columns": (_config$openTypeFeatu3 = config.openTypeFeatures) !== null && _config$openTypeFeatu3 !== void 0 && (_config$openTypeFeatu4 = _config$openTypeFeatu3.columns) !== null && _config$openTypeFeatu4 !== void 0 && _config$openTypeFeatu4.length ? 'set' : 'auto'
+    "data-columns": (_config$openTypeFeatu4 = config.openTypeFeatures) !== null && _config$openTypeFeatu4 !== void 0 && (_config$openTypeFeatu5 = _config$openTypeFeatu4.columns) !== null && _config$openTypeFeatu5 !== void 0 && _config$openTypeFeatu5.length ? 'set' : 'auto'
   }, featuresColumns)));
+}
+
+// Each surface owns its hooks (the panel's height animation, the dropdown's
+// document listeners), so a config change between renders remounts cleanly
+// instead of tripping over conditional hook order.
+export default function TypeTesterFeatures(props) {
+  const {
+    typeTester: config
+  } = useContext(ConfigContext);
+  return config.openTypeFeatures.interactionStyle === 'dropdown' ? /*#__PURE__*/React.createElement(TypeTesterFeaturesDropdown, props) : /*#__PURE__*/React.createElement(TypeTesterFeaturesPanel, props);
 }

package/dist/components/TypeTester/TypeTesterFeaturesButton.js

@@ -34,7 +34,10 @@ const TypeTesterFeaturesButton = _ref => {
     fontStyle
   });
   const effectiveFeatures = showFeatures !== null && showFeatures !== void 0 && showFeatures.includes('*') ? (fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures) ?? [] : showFeatures;
-  if (config.openTypeFeatures.interactionStyle === 'panel') {
+
+  // 'dropdown' uses the same toggle button as 'panel'; only the surface the
+  // toggle reveals differs (see TypeTesterFeatures).
+  if (config.openTypeFeatures.interactionStyle === 'panel' || config.openTypeFeatures.interactionStyle === 'dropdown') {
     return /*#__PURE__*/React.createElement("div", {
       className: "type-tester__features-button",
       "data-features-open": featuresOpen,

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import TypeTesterStandalone from './TypeTesterStandalone.js';
-import { notEmpty } from '../../utils.js';
+import { parseVariableSettings } from './parseVariableSettings.js';
 const isAlignment = str => {
   return str === 'left' || str === 'center' || str === 'right';
 };
@@ -14,23 +14,6 @@ const parseBool = input => input === 'true' ? true : false;
 // `axes="wght, opsz"` behaves the same as `axes="wght,opsz"` and a trailing
 // comma doesn't produce a bogus empty entry.
 const splitList = input => (input === null || input === void 0 ? void 0 : input.split(',').map(token => token.trim()).filter(Boolean)) ?? [];
-
-// parse a string like "wdth 1000, ital 0.5" into
-// [{ axis: "wdth", value: 1000 }, { axis: "ital", value: 0.5 }]
-function parseVariableSettings(input) {
-  if (!input) return null;
-  return input.split(/\s*,\s*/).map(settingString => {
-    const m = settingString.match(/^([A-Za-z0-9]{4}) (\d+(?:\.\d+)?)$/);
-    if (m && m.length > 2) {
-      return {
-        axis: m[1],
-        value: parseFloat(m[2])
-      };
-    } else {
-      console.warn(`fontdue-type-tester failed to parse variable-settings value: "${settingString}", ignoring`);
-    }
-  }).filter(notEmpty);
-}
 export const TypeTesterStandaloneElement = _ref => {
   let {
     lineHeight,

package/dist/components/TypeTester/TypeTesterState.js

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import { TypeTesterContext } from './TypeTesterContext.js';
 import ConfigContext from '../ConfigContext.js';
 const useTypeTesterState = _ref => {
@@ -12,6 +12,24 @@ const useTypeTesterState = _ref => {
     dispatch
   } = useContext(TypeTesterContext);
   const toolsPosition = config.typeTester.toolsPosition;
+
+  // In floating mode the flag consumers read is the global one (see
+  // featuresOpen below), so writes must land there too. Stable identity so
+  // effects can list it in their deps without re-registering per render.
+  const setFeaturesOpen = useCallback(value => {
+    if (toolsPosition === 'floating') {
+      dispatch({
+        type: 'TOGGLE_GLOBAL_FEATURES_OPEN',
+        value
+      });
+    } else {
+      dispatch({
+        type: 'SET_FEATURES_OPEN',
+        value,
+        id
+      });
+    }
+  }, [dispatch, id, toolsPosition]);
   const {
     content,
     contentEdited,
@@ -107,13 +125,7 @@ const useTypeTesterState = _ref => {
         });
       }
     },
-    setFeaturesOpen: value => {
-      dispatch({
-        type: 'SET_FEATURES_OPEN',
-        value,
-        id
-      });
-    },
+    setFeaturesOpen,
     variableSettings,
     setVariableSettings: value => dispatch({
       type: 'SET_VARIABLE_SETTINGS',

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

@@ -21,7 +21,7 @@ export interface TypeTesterConfig {
     autofitOnChange?: boolean;
     openTypeFeatures?: {
         buttonLabel?: string;
-        interactionStyle?: 'panel' | 'select';
+        interactionStyle?: 'panel' | 'select' | 'dropdown';
         columns?: {
             features: ({
                 code: string;

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

@@ -0,0 +1,21 @@
+/**
+ * Parse the `variable-settings` attribute of `<fontdue-type-tester>` into the
+ * axis/value pairs the tester expects.
+ *
+ * Whitespace around the commas and between an axis and its value is ignored, so
+ * `"wdth 1000,ital 0.5"` and `"wdth 1000, ital 0.5"` are equivalent, and a
+ * trailing comma is tolerated. Settings that don't parse are warned about and
+ * skipped, leaving their siblings intact.
+ *
+ * @example
+ * parseVariableSettings('wdth 1000, ital 0.5')
+ * // => [{ axis: 'wdth', value: 1000 }, { axis: 'ital', value: 0.5 }]
+ *
+ * parseVariableSettings('slnt -11.0')
+ * // => [{ axis: 'slnt', value: -11 }]
+ */
+export declare function parseVariableSettings(input: string | null | undefined): {
+    axis: string;
+    value: number;
+}[] | null;
+export default parseVariableSettings;

package/dist/components/TypeTester/parseVariableSettings.js

@@ -0,0 +1,41 @@
+import { notEmpty } from '../../utils.js';
+
+// Value group allows a leading minus: several registered OpenType axes are
+// conventionally negative (`slnt` runs about -20 to 0, `ital` can too), and a
+// custom axis can have any range. A setting that fails to parse is dropped, and
+// TypeTesterVariableAxes only renders a slider for an axis that has a value, so
+// rejecting a sign used to make the slider vanish with nothing in the markup to
+// explain it.
+const SETTING = /^([A-Za-z0-9]{4})\s+(-?\d+(?:\.\d+)?)$/;
+
+/**
+ * Parse the `variable-settings` attribute of `<fontdue-type-tester>` into the
+ * axis/value pairs the tester expects.
+ *
+ * Whitespace around the commas and between an axis and its value is ignored, so
+ * `"wdth 1000,ital 0.5"` and `"wdth 1000, ital 0.5"` are equivalent, and a
+ * trailing comma is tolerated. Settings that don't parse are warned about and
+ * skipped, leaving their siblings intact.
+ *
+ * @example
+ * parseVariableSettings('wdth 1000, ital 0.5')
+ * // => [{ axis: 'wdth', value: 1000 }, { axis: 'ital', value: 0.5 }]
+ *
+ * parseVariableSettings('slnt -11.0')
+ * // => [{ axis: 'slnt', value: -11 }]
+ */
+export function parseVariableSettings(input) {
+  if (!input) return null;
+  return input.split(',').map(settingString => settingString.trim()).filter(Boolean).map(settingString => {
+    const m = settingString.match(SETTING);
+    if (m && m.length > 2) {
+      return {
+        axis: m[1],
+        value: parseFloat(m[2])
+      };
+    } else {
+      console.warn(`fontdue-type-tester failed to parse variable-settings value: "${settingString}", ignoring`);
+    }
+  }).filter(notEmpty);
+}
+export default parseVariableSettings;

package/dist/fontdue.css

@@ -700,6 +700,68 @@ fontdue-type-tester {
 .type-tester__features[data-selection-style=checkbox] .type-tester__features__button {
   margin-bottom: 5px;
 }
+.type-tester__features-dropdown-anchor {
+  position: relative;
+  z-index: 3;
+}
+.type-tester__features-dropdown {
+  position: absolute;
+  top: 5px;
+  right: 0;
+  box-sizing: border-box;
+  width: 320px;
+  max-width: 100%;
+  max-height: 320px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 15px;
+  border: 1px solid var(--horizontal_rule_color);
+  background: var(--primary_background_color, canvas);
+  color: var(--primary_text_color);
+}
+.type-tester__features-dropdown .type-tester__features {
+  padding-bottom: 0;
+}
+.type-tester__features-dropdown .type-tester__features[data-columns=dropdown] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.type-tester__features-dropdown .type-tester__features__button {
+  min-width: 0;
+}
+.type-tester__features-dropdown .type-tester__features__button > :first-child {
+  flex-shrink: 0;
+}
+.type-tester__features-dropdown .type-tester__features__button:not(:last-child) {
+  margin-bottom: 5px;
+}
+.type-tester__features-dropdown .type-tester__features__name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.type-tester__features-dropdown .type-tester__variable-axes {
+  grid-template-columns: 1fr;
+  margin-bottom: 15px;
+}
+.type-tester__features-dropdown .type-tester__variable-axes__axis {
+  box-sizing: border-box;
+  border: 1px solid var(--horizontal_rule_color);
+  padding: 10px;
+  flex-wrap: wrap;
+}
+.type-tester__features-dropdown .type-tester__variable-axes__value {
+  margin-left: auto;
+  margin-right: 0;
+}
+.type-tester__features-dropdown .type-tester__variable-axes__slider {
+  flex-basis: 100%;
+  margin-top: 8px;
+}
+.type-tester__features-dropdown .type-tester__variable-axes__name {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
 .type-tester > .type-tester__variable-axes:first-child {
   margin-top: 10px;
 }
@@ -901,6 +963,7 @@ fontdue-feature-testers {
   --_sw-knob: var(--fontdue-feature-tester-switch-knob, var(--primary_background_color, canvas));
   --_sw-track: var(--fontdue-feature-tester-switch-track, transparent);
   --_sw-travel: calc(var(--_sw-w) - var(--_sw-h));
+  --_sw-knob-inset-right: calc(var(--_sw-w) - var(--_sw-h) + var(--_sw-p));
   position: relative;
   box-sizing: border-box;
   width: var(--_sw-w);
@@ -918,7 +981,7 @@ fontdue-feature-testers {
   top: var(--_sw-p);
   left: var(--_sw-p);
   bottom: var(--_sw-p);
-  aspect-ratio: 1;
+  right: var(--_sw-knob-inset-right);
   border: var(--_sw-b) solid var(--_sw-color);
   border-radius: var(--_sw-r);
   background: transparent;

package/dist/relay/environment.js

@@ -8,7 +8,7 @@ import { NODE_ACCESS_HEADER } from '../nodeAccess.js';
 // (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
 // Exported so UI (the admin toolbar) can surface it without re-reading the
 // build-time global in a 'use client' module.
-export const version = "3.3.0";
+export const version = "3.4.1";
 const IS_SERVER = typeof window === typeof undefined;
 
 // Opt server fetches into Next's data cache only in production; dev stays

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
@@ -57,6 +57,7 @@
     "@types/relay-runtime": "^19.0.0",
     "@types/uuid": "^8.3.3",
     "babel-plugin-relay": "^18.0.0",
+    "happy-dom": "^20.11.2",
     "npm-run-all": "^4.1.5",
     "prettier": "2.0.5",
     "react": "^19.0.0",