@hortonstudio/main 1.2.4 → 1.2.6

package/attributes-master/packages/mirrorinput/src/init.ts

@@ -0,0 +1,48 @@
+import {
+  addListener,
+  type FinsweetAttributeInit,
+  isElement,
+  isFormField,
+  isHTMLInputElement,
+  setFormFieldValue,
+} from '@finsweet/attributes-utils';
+
+import { getElementSelector, getInstance, queryElement } from './utils/selectors';
+
+/**
+ * Inits click events mirroring.
+ */
+export const init: FinsweetAttributeInit = () => {
+  const inputCleanup = addListener(window, 'input', ({ target }) => {
+    if (!isElement(target)) return;
+
+    const mirrorTrigger = target.closest(getElementSelector('trigger'));
+    if (!isFormField(mirrorTrigger)) return;
+
+    // Get the instance index
+    const instance = getInstance(mirrorTrigger);
+
+    const mirrorTarget = queryElement('target', { instance });
+    if (!isFormField(mirrorTarget) || mirrorTrigger.type !== mirrorTarget.type) return;
+
+    // If must update the `checked` property
+    if (
+      isHTMLInputElement(mirrorTarget) &&
+      (mirrorTarget.type === 'checkbox' || mirrorTarget.type === 'radio') &&
+      (mirrorTrigger as HTMLInputElement).checked !== mirrorTarget.checked
+    ) {
+      setFormFieldValue(mirrorTarget, !mirrorTarget.checked);
+
+      return;
+    }
+
+    // If must update the `value` property
+    setFormFieldValue(mirrorTarget, mirrorTrigger.value);
+  });
+
+  return {
+    destroy() {
+      inputCleanup();
+    },
+  };
+};

package/attributes-master/packages/mirrorinput/src/utils/constants.ts

@@ -0,0 +1,15 @@
+import { type AttributeElements, type AttributeSettings } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * Defines the element as the trigger of the event.
+   */
+  'trigger',
+
+  /**
+   * Defines the element as the target to mirror the fired event.
+   */
+  'target',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {} as const satisfies AttributeSettings;

package/attributes-master/packages/mirrorinput/src/utils/selectors.ts

@@ -0,0 +1,9 @@
+import { generateSelectors, MIRROR_INPUT_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+import { ELEMENTS, SETTINGS } from './constants';
+
+export const { getElementSelector, getInstance, queryElement } = generateSelectors(
+  MIRROR_INPUT_ATTRIBUTE,
+  ELEMENTS,
+  SETTINGS
+);

package/attributes-master/packages/mirrorinput/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

package/attributes-master/packages/modal/CHANGELOG.md

@@ -0,0 +1,94 @@
+# @finsweet/attributes-modal
+
+## 1.1.11
+
+### Patch Changes
+
+- Updated dependencies [2af0bad]
+  - @finsweet/attributes-utils@0.1.0
+
+## 1.1.10
+
+### Patch Changes
+
+- Updated dependencies [378d74d]
+  - @finsweet/attributes-utils@0.0.6
+
+## 1.1.9
+
+### Patch Changes
+
+- 134af05: fix: add missing focus-trap
+
+## 1.1.8
+
+### Patch Changes
+
+- Updated dependencies [01973d8]
+  - @finsweet/attributes-utils@0.0.5
+
+## 1.1.7
+
+### Patch Changes
+
+- Updated dependencies [deef758]
+  - @finsweet/attributes-utils@0.0.4
+
+## 1.1.6
+
+### Patch Changes
+
+- Updated dependencies [d21cbca]
+  - @finsweet/attributes-utils@0.0.3
+
+## 1.1.5
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+- Updated dependencies [c7b544d]
+  - @finsweet/attributes-utils@0.0.2
+
+## 1.1.4
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
+- Updated dependencies [b56e5e5]
+  - @finsweet/attributes-utils@0.0.1
+
+## 1.1.3
+
+### Patch Changes
+
+- cbea0925: Skip adding A11Y attributes to triggers with `aria-hidden`
+
+## 1.1.2
+
+### Patch Changes
+
+- 3f506ed9: Add tabindex="0" to all open/close triggers to ensure non-interactive elements like <div> are keyboard actionable.
+
+## 1.1.1
+
+### Patch Changes
+
+- 647ca498: Improved a11y attributes handling.
+
+## 1.1.0
+
+### Minor Changes
+
+- 59aa74dd: Improved keyboard accessibility for modals/dialogs
+
+## 1.0.1
+
+### Patch Changes
+
+- 54a8ee37: Update `fs-a11y` import to `@1`
+
+## 1.0.0
+
+### Major Changes
+
+- 460f73c6: Created `fs-modal` Attribute

package/attributes-master/packages/modal/README.md

@@ -0,0 +1,29 @@
+# `modal` Attribute
+
+Create accessible modal popups easily on Webflow.
+
+## Getting Started
+
+Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
+
+## Accessing the API
+
+To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
+
+```javascript
+window.FinsweetAttributes ||= [];
+window.FinsweetAttributes.push([
+  'accordion',
+  (modal) => {
+    // Your code goes here.
+  },
+]);
+```
+
+## API Reference
+
+Work in progress 🚧
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

package/attributes-master/packages/modal/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@finsweet/attributes-modal",
+  "version": "1.1.11",
+  "description": "Create accessible modal popups easily on Webflow.",
+  "private": true,
+  "type": "module",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "eslint ./src && prettier --check ./src",
+    "lint:fix": "eslint ./src --fix && prettier --write ./src",
+    "check": "tsc --noEmit"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@finsweet/attributes-utils": "workspace:*",
+    "focus-trap": "^7.6.4"
+  }
+}

package/attributes-master/packages/modal/src/actions/a11y.ts

@@ -0,0 +1,46 @@
+import {
+  ARIA_CONTROLS_KEY,
+  ARIA_EXPANDED_KEY,
+  ARIA_HASPOPUP_KEY,
+  ARIA_HIDDEN_KEY,
+  ARIA_MODAL_KEY,
+  ARIA_MODAL_VALUES,
+  ARIA_ROLE_KEY,
+  ARIA_ROLE_VALUES,
+  ARIA_ROLEDESCRIPTION_KEY,
+  ensureUniqueId,
+  isVisible,
+  TABINDEX_KEY,
+} from '@finsweet/attributes-utils';
+
+/**
+ * Sets A11Y Attributes to a modal.
+ * @param modalElement
+ * @param openTriggers
+ * @param closeTriggers
+ */
+export const setModalA11Y = (modalElement: HTMLElement, openTriggers: Element[], closeTriggers: Element[]) => {
+  const modalId = ensureUniqueId(modalElement);
+  const expanded = isVisible(modalElement);
+
+  modalElement.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.dialog);
+  modalElement.setAttribute(ARIA_MODAL_KEY, ARIA_MODAL_VALUES.true);
+
+  for (const trigger of [...openTriggers, ...closeTriggers]) {
+    if (trigger.hasAttribute(ARIA_HIDDEN_KEY)) continue;
+
+    ensureUniqueId(trigger);
+
+    const action = openTriggers.includes(trigger) ? 'open' : 'close';
+
+    trigger.setAttribute(TABINDEX_KEY, '0');
+    trigger.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.button);
+    trigger.setAttribute(ARIA_CONTROLS_KEY, modalId);
+    trigger.setAttribute(ARIA_HASPOPUP_KEY, ARIA_ROLE_VALUES.dialog);
+    trigger.setAttribute(ARIA_EXPANDED_KEY, String(expanded));
+
+    if (!trigger.hasAttribute(ARIA_ROLEDESCRIPTION_KEY)) {
+      trigger.setAttribute(ARIA_ROLEDESCRIPTION_KEY, `${action}-modal-trigger`);
+    }
+  }
+};

package/attributes-master/packages/modal/src/actions/modal.ts

@@ -0,0 +1,164 @@
+import { addListener, ARIA_EXPANDED_KEY } from '@finsweet/attributes-utils';
+import { createFocusTrap, type FocusTrap } from 'focus-trap';
+
+import { ANCHOR_TEXT } from '../utils/constants';
+import { getSettingSelector } from '../utils/selectors';
+import type { AnimationSettings } from '../utils/types';
+import { getAnimationSettings } from './settings';
+
+/**
+ * Handles a modal's functionality.
+ *
+ * @param modalElement
+ * @param openTriggers
+ * @param closeTriggers
+ * @param modalAnimationSettings
+ *
+ * @returns A cleanup callback.
+ */
+export const handleModal = (
+  modalElement: HTMLElement,
+  openTriggers: Element[],
+  closeTriggers: Element[],
+  modalAnimationSettings: AnimationSettings
+) => {
+  const { parentElement } = modalElement;
+  if (!parentElement) return;
+
+  const {
+    actions: modalActions,
+    duration: modalDuration,
+    easing: modalEasing,
+    display: modalDisplay,
+  } = modalAnimationSettings;
+
+  const customAnimationChildren = getCustomAnimationChildren(modalElement);
+
+  // Anchor
+  const anchor = new Comment(ANCHOR_TEXT);
+  parentElement.insertBefore(anchor, modalElement);
+
+  // State
+  let isAnimating = false;
+  let isOpen: boolean;
+  let focusTrap: FocusTrap | undefined;
+
+  // Open buttons
+  const openCleanups = openTriggers.map((openTrigger) => {
+    const openCleanup = addListener(openTrigger, 'click', async (e) => {
+      e.preventDefault();
+
+      if (isAnimating || isOpen) return;
+
+      isAnimating = true;
+
+      // Animate
+      await Promise.all([
+        modalActions.animateIn(modalElement, {
+          duration: modalDuration,
+          easing: modalEasing,
+          display: modalDisplay,
+          target: document.body,
+        }),
+        Promise.all(
+          customAnimationChildren.map(([child, { actions, duration, easing, display }]) =>
+            actions.animateIn(child, {
+              display,
+              duration: duration || modalDuration,
+              easing: easing || modalEasing,
+            })
+          )
+        ),
+      ]);
+
+      isAnimating = false;
+      isOpen = true;
+
+      // Set focus trap
+      focusTrap ||= createFocusTrap(modalElement, {
+        returnFocusOnDeactivate: true,
+      });
+
+      focusTrap.activate();
+
+      // Set aria-expanded to true
+      [...openTriggers, ...closeTriggers].forEach((trigger) => trigger.setAttribute(ARIA_EXPANDED_KEY, 'true'));
+    });
+
+    return openCleanup;
+  });
+
+  // Close buttons
+  const handleClose = async (e: Event) => {
+    e.preventDefault();
+
+    if (isAnimating || isOpen === false) return;
+
+    isAnimating = true;
+
+    // Animate
+    await Promise.all([
+      modalActions.animateOut(modalElement, {
+        duration: modalDuration,
+        easing: modalEasing,
+        target: parentElement,
+        insertAfter: anchor,
+      }),
+      Promise.all(
+        customAnimationChildren.map(([child, { actions, duration, easing }]) =>
+          actions.animateOut(child, {
+            duration: duration || modalDuration,
+            easing: easing || modalEasing,
+          })
+        )
+      ),
+    ]);
+
+    parentElement.insertBefore(modalElement, anchor);
+
+    isAnimating = false;
+    isOpen = false;
+
+    // Deactivate focus trap
+    focusTrap?.deactivate();
+
+    // Set aria-expanded to false
+    [...openTriggers, ...closeTriggers].forEach((trigger) => trigger.setAttribute(ARIA_EXPANDED_KEY, 'false'));
+  };
+
+  const closeCleanups = closeTriggers.map((closeTrigger) => {
+    const closeCleanup = addListener(closeTrigger, 'click', handleClose);
+    return closeCleanup;
+  });
+
+  const escapeCleanup = addListener(window, 'keydown', (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      handleClose(e);
+    }
+  });
+
+  // Cleanup
+  return () => {
+    for (const cleanup of openCleanups) cleanup();
+    for (const cleanup of closeCleanups) cleanup();
+    escapeCleanup();
+  };
+};
+
+/**
+ * @returns Custom animation data for a modal's children.
+ * @param modalElement
+ */
+const getCustomAnimationChildren = (modalElement: HTMLElement) => {
+  const settingsKeys = ['animation', 'duration', 'easing', 'display'] as const;
+  const selector = settingsKeys.map((key) => getSettingSelector(key)).join(',');
+
+  const children = [...modalElement.querySelectorAll<HTMLElement>(selector)];
+
+  const customAnimationChildren = children.map((child) => {
+    const animationSettings = getAnimationSettings(child);
+    return [child, animationSettings] as const;
+  });
+
+  return customAnimationChildren;
+};

package/attributes-master/packages/modal/src/actions/settings.ts

@@ -0,0 +1,21 @@
+import { animations } from '@finsweet/attributes-utils';
+
+import { getAttribute } from '../utils/selectors';
+import type { AnimationSettings } from '../utils/types';
+
+/**
+ * Extracts the animation settings of an element.
+ * @param element
+ */
+export const getAnimationSettings = (element: Element): AnimationSettings => {
+  const animationName = getAttribute(element, 'animation', { filterInvalid: true });
+  const actions = animationName ? animations[animationName] : animations.fade;
+
+  const animationDuration = getAttribute(element, 'duration');
+  const duration = animationDuration ? parseFloat(animationDuration) : undefined;
+
+  const easing = getAttribute(element, 'easing', { filterInvalid: true });
+  const display = getAttribute(element, 'display', { filterInvalid: true });
+
+  return { actions, duration, easing, display };
+};

package/attributes-master/packages/modal/src/factory.ts

@@ -0,0 +1,26 @@
+import { setModalA11Y } from './actions/a11y';
+import { handleModal } from './actions/modal';
+import { getAnimationSettings } from './actions/settings';
+import { getInstance, queryAllElements } from './utils/selectors';
+
+/**
+ * Inits a modal component.
+ * @param modalElement
+ * @returns A cleanup callback.
+ */
+export const initModal = (modalElement: HTMLElement) => {
+  const { parentElement } = modalElement;
+  if (!parentElement) return;
+
+  const instance = getInstance(modalElement);
+
+  const openTriggers = queryAllElements('open', { instance });
+  const closeTriggers = queryAllElements('close', { instance });
+  if (!openTriggers.length && !closeTriggers.length) return;
+
+  const animationSettings = getAnimationSettings(modalElement);
+
+  setModalA11Y(modalElement, openTriggers, closeTriggers);
+
+  return handleModal(modalElement, openTriggers, closeTriggers, animationSettings);
+};

package/attributes-master/packages/modal/src/index.ts

@@ -0,0 +1,3 @@
+export { version } from '../package.json';
+export { init } from './init';
+export { ELEMENTS, SETTINGS } from './utils/constants';

package/attributes-master/packages/modal/src/init.ts

@@ -0,0 +1,22 @@
+import { type FinsweetAttributeInit, isNotEmpty, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { initModal } from './factory';
+import { queryAllElements } from './utils/selectors';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const modalElements = queryAllElements('modal');
+
+  const cleanups = modalElements.map(initModal).filter(isNotEmpty);
+
+  return {
+    result: modalElements,
+    destroy() {
+      for (const cleanup of cleanups) cleanup();
+    },
+  };
+};

package/attributes-master/packages/modal/src/utils/constants.ts

@@ -0,0 +1,54 @@
+import { type AttributeElements, type AttributeSettings, MODAL_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * Defines the modal element.
+   */
+  'modal',
+
+  /**
+   * Defines an open trigger.
+   */
+  'open',
+
+  /**
+   * Defines a close trigger.
+   */
+  'close',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines the modal animation.
+   * Allowed values are defined in {@link "packages/animation"}.
+   */
+  animation: {
+    key: 'animation',
+    values: ['fade', 'slide-up', 'slide-down', 'slide-left', 'slide-right', 'grow', 'shrink', 'spin'],
+  },
+
+  /**
+   * Defines the easing function of the animation.
+   * Allowed values are defined in {@link "packages/animation"}.
+   */
+  easing: {
+    key: 'easing',
+    values: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],
+  },
+
+  /**
+   * Defines the duration of the animation.
+   */
+  duration: { key: 'duration' },
+
+  /**
+   * Defines the display property after animating.
+   */
+  display: {
+    key: 'display',
+    values: ['block', 'inline', 'flex', 'grid', 'none', 'contents', 'inline-block', 'inline-flex', 'inline-grid'],
+    defaultValue: 'flex',
+  },
+} as const satisfies AttributeSettings;
+
+export const ANCHOR_TEXT = `fs-${MODAL_ATTRIBUTE}-anchor`;

package/attributes-master/packages/modal/src/utils/selectors.ts

@@ -0,0 +1,9 @@
+import { generateSelectors, MODAL_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+import { ELEMENTS, SETTINGS } from './constants';
+
+export const { getAttribute, getSettingSelector, getInstance, queryAllElements } = generateSelectors(
+  MODAL_ATTRIBUTE,
+  ELEMENTS,
+  SETTINGS
+);

package/attributes-master/packages/modal/src/utils/types.ts

@@ -0,0 +1,12 @@
+import type { AnimationFunctions, Easings } from '@finsweet/attributes-utils';
+
+import type { SETTINGS } from './constants';
+
+export type AnimationDisplayProperty = (typeof SETTINGS.display.values)[number];
+
+export interface AnimationSettings {
+  actions: AnimationFunctions;
+  duration?: number;
+  easing?: Easings[number];
+  display: AnimationDisplayProperty;
+}

package/attributes-master/packages/modal/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

package/attributes-master/packages/numbercount/CHANGELOG.md

@@ -0,0 +1,90 @@
+# @finsweet/attributes-numbercount
+
+## 1.2.8
+
+### Patch Changes
+
+- Updated dependencies [2af0bad]
+  - @finsweet/attributes-utils@0.1.0
+
+## 1.2.7
+
+### Patch Changes
+
+- Updated dependencies [378d74d]
+  - @finsweet/attributes-utils@0.0.6
+
+## 1.2.6
+
+### Patch Changes
+
+- Updated dependencies [01973d8]
+  - @finsweet/attributes-utils@0.0.5
+
+## 1.2.5
+
+### Patch Changes
+
+- Updated dependencies [deef758]
+  - @finsweet/attributes-utils@0.0.4
+
+## 1.2.4
+
+### Patch Changes
+
+- Updated dependencies [d21cbca]
+  - @finsweet/attributes-utils@0.0.3
+
+## 1.2.3
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+- Updated dependencies [c7b544d]
+  - @finsweet/attributes-utils@0.0.2
+
+## 1.2.2
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
+- Updated dependencies [b56e5e5]
+  - @finsweet/attributes-utils@0.0.1
+
+## 1.2.1
+
+### Patch Changes
+
+- 98b81a40: fix: ensure numbercount stops at the end value, added requestAnimationFrame api to further improve this animation
+
+## 1.2.0
+
+### Minor Changes
+
+- 75923414: feat: added new `fs-numbercount-locale="{LOCALE} | auto"` Attribute.
+  If defined, the library will format the number using the provided locale.
+  Users can define any [BCP 47 language tag](https://www.techonthenet.com/js/language_tags.php) or use `auto` to use the browser's locale.
+
+## 1.1.2
+
+### Patch Changes
+
+- 460f73c6: Fixed invalid attribute key in API
+
+## 1.1.1
+
+### Patch Changes
+
+- 43e99e66: Add a11y attributes to the number count elements
+
+## 1.1.0
+
+### Minor Changes
+
+- d84ca310: Added new `fs-numbercount-threshold` attribute.
+
+## 1.0.0
+
+### Major Changes
+
+- e2fa5c6f: Created fs-attributes-numbercount