fontdue-js 3.2.6 → 3.4.0

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/Tracking/index.js

@@ -4,6 +4,7 @@ import { useContext, useEffect } from 'react';
 import ConfigContext from '../ConfigContext.js';
 import { useFontdueUrl } from '../UrlContext.js';
 import { hasConsent, onConsent, setClientAnonymousId, setEntryAttribution } from '../ConsentBanner/consent.js';
+import { trackRouteChanges } from './routeChanges.js';
 function getCampaignDataFromUrl() {
   const urlParams = new URLSearchParams(window.location.search);
   const campaign = {};
@@ -155,26 +156,17 @@ const Tracking = () => {
     }
 
     // Track client-side route changes
-    const originalPushState = history.pushState.bind(history);
-    const originalReplaceState = history.replaceState.bind(history);
-    const handleRouteChange = () => {
-      // Defer slightly to let document.title update
-      setTimeout(() => sendPageView(url), 0);
-    };
-    history.pushState = function () {
-      originalPushState(...arguments);
-      handleRouteChange();
-    };
-    history.replaceState = function () {
-      originalReplaceState(...arguments);
-      handleRouteChange();
-    };
-    window.addEventListener('popstate', handleRouteChange);
+    const untrackRouteChanges = trackRouteChanges({
+      history,
+      window,
+      currentUrl: () => window.location.href,
+      onNavigate: () => {
+        sendPageView(url);
+      }
+    });
     return () => {
       var _consentCleanup;
-      history.pushState = originalPushState;
-      history.replaceState = originalReplaceState;
-      window.removeEventListener('popstate', handleRouteChange);
+      untrackRouteChanges();
       (_consentCleanup = consentCleanup) === null || _consentCleanup === void 0 ? void 0 : _consentCleanup();
     };
   }, []);

package/dist/components/Tracking/routeChanges.d.ts

@@ -0,0 +1,19 @@
+type HistoryLike = Pick<History, 'pushState' | 'replaceState'>;
+type WindowLike = Pick<Window, 'addEventListener' | 'removeEventListener'>;
+export type RouteChangeOptions = {
+    history: HistoryLike;
+    window: WindowLike;
+    /** The URL as it stands right now, e.g. `() => window.location.href`. */
+    currentUrl: () => string;
+    /** Called once per navigation to a URL different from the previous one. */
+    onNavigate: () => void;
+    /** Overridable so tests can run the check synchronously. */
+    defer?: (callback: () => void) => void;
+};
+/**
+ * Wrap `pushState`/`replaceState` and call `onNavigate` when the URL changes.
+ *
+ * Returns a cleanup function that restores the original History methods.
+ */
+export declare function trackRouteChanges({ history, window: windowLike, currentUrl, onNavigate, defer, }: RouteChangeOptions): () => void;
+export {};

package/dist/components/Tracking/routeChanges.js

@@ -0,0 +1,62 @@
+// Client-side route-change detection for the Tracking component.
+//
+// There is no navigation event a page can listen to for SPA routing, so the
+// only way to notice one is to wrap the History API and watch for the URL
+// changing underneath us. Kept in its own module — and taking its history,
+// window and clock as arguments — so the wrapping and the de-duplication can
+// be tested without a DOM.
+
+/**
+ * Wrap `pushState`/`replaceState` and call `onNavigate` when the URL changes.
+ *
+ * Returns a cleanup function that restores the original History methods.
+ */
+export function trackRouteChanges(_ref) {
+  let {
+    history,
+    window: windowLike,
+    currentUrl,
+    onNavigate,
+    defer = callback => {
+      setTimeout(callback, 0);
+    }
+  } = _ref;
+  // The caller has already reported the URL we start on, so it is the first
+  // thing we compare against.
+  let lastUrl = currentUrl();
+  const handleRouteChange = () => {
+    // Defer slightly to let document.title update
+    defer(() => {
+      const url = currentUrl();
+
+      // A history entry gets rewritten in place for all sorts of reasons that
+      // are not navigation: saving scroll position, stashing UI state, marking
+      // how the entry was reached. Phoenix LiveView, for one, calls
+      // `history.replaceState(state, "", window.location.href)` 100ms after
+      // every scroll stop to remember the scroll offset — which billed a page
+      // view per scroll pause on the site of anyone running LiveView. Only a
+      // URL that actually differs from the last one we reported can be a new
+      // page view. Note this compares against the *previous* URL rather than
+      // every URL seen, so A → B → A is three page views, as it should be.
+      if (url === lastUrl) return;
+      lastUrl = url;
+      onNavigate();
+    });
+  };
+  const originalPushState = history.pushState.bind(history);
+  const originalReplaceState = history.replaceState.bind(history);
+  history.pushState = function () {
+    originalPushState(...arguments);
+    handleRouteChange();
+  };
+  history.replaceState = function () {
+    originalReplaceState(...arguments);
+    handleRouteChange();
+  };
+  windowLike.addEventListener('popstate', handleRouteChange);
+  return () => {
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    windowLike.removeEventListener('popstate', handleRouteChange);
+  };
+}

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/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/useFeaturesData.d.ts

@@ -1,18 +1,18 @@
 import { useFeaturesData_fontStyle$key } from '__generated__/useFeaturesData_fontStyle.graphql.js';
 interface useFeatures_props {
-    fontStyle: useFeaturesData_fontStyle$key;
+    fontStyle: useFeaturesData_fontStyle$key | null | undefined;
 }
+export type FeatureNames = {
+    [feature: string]: string;
+};
 declare const useFeaturesData: ({ fontStyle }: useFeatures_props) => {
-    featureNames: {
-        [feature: string]: string;
-    };
     fontFeatures: {
-        readonly stylisticSetNames: ReadonlyArray<{
-            readonly featureName: string;
-            readonly humanName: string;
+        readonly featureNames: ReadonlyArray<{
+            readonly name: string;
+            readonly tag: string;
         }>;
         readonly supportedFeatures: ReadonlyArray<string>;
-    };
-    " $fragmentType": "useFeaturesData_fontStyle";
+    } | null;
+    featureNames: FeatureNames;
 };
 export default useFeaturesData;