@astryxdesign/core 0.7.8-canary.ffd29c5 → 0.7.8

package/dist/Resizable/createResizable.d.ts

@@ -1,6 +1,6 @@
 import type { SizeValue } from '../utils/types.js';
 import { type ResizableDirection } from './resizableModel.js';
-import type { ResizeGestureModel } from './resizeGesture.js';
+import { type ResizeGestureModel } from './resizeGesture.js';
 import type { ResizableSize } from './utils.js';
 export interface CreateResizableOptions {
     /**
@@ -44,6 +44,31 @@ export interface CreateResizableOptions {
     onSizeChange?: (size: number) => void;
     /** Called when an interaction collapses or expands the region. */
     onCollapseChange?: (isCollapsed: boolean) => void;
+    /**
+     * The handle sits before the panel it resizes (the panel is at the end), so
+     * a drag toward the start grows it.
+     * @default false
+     */
+    isReversed?: boolean;
+    /**
+     * Ignores pointer and keyboard input and says so; a plain element keeps its
+     * tab stop.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * A plain element's accessible name, when it has none of its own. Without
+     * it, the factory uses the message catalog's English message.
+     * @default 'Resize handle'
+     */
+    label?: string;
+    /**
+     * Replaces the catalog's "Collapsed" that the handle announces as its
+     * `aria-valuetext` while the region is collapsed. Absent, the factory
+     * announces the shipped English message.
+     * @default 'Collapsed'
+     */
+    collapsedLabel?: string;
 }
 export interface ResizableController {
     /** The region's size in px, 0 while collapsed. */
@@ -67,12 +92,15 @@ export interface ResizableController {
      * that stops it.
      */
     subscribe(listener: () => void): () => void;
-    /** Stops every observer the factory started; a gesture in flight ends. */
+    /**
+     * Removes every listener, observer and attribute the factory added and the
+     * body's drag cursor; a drag in flight ends as cancelled.
+     */
     destroy(): void;
 }
 /**
- * The state a region with `options` starts in: the server's render and a
- * hook's first render. A container is not measured
+ * The state a region with `options` starts in, before its handle exists: the
+ * server's render and a hook's first render. A container is not measured
  * yet, so a percentage of it resolves against the deterministic 1200px basis
  * until the factory measures it. `'server'` reads the state the server
  * rendered, for a render that hydrates it: the 1200px basis for a viewport
@@ -108,28 +136,54 @@ interface ResizableInternals {
     syncContainer(): void;
     /**
      * Lets go of the page and keeps the region. A gesture in flight ends as
-     * cancelled, and the observers go. Collapse, expand and resize still apply
-     * and report. For a React caller whose component unmounts or an
-     * `<Activity>` hides.
+     * cancelled, and the handle's listeners, its attributes and the observers
+     * go. Collapse, expand and resize still apply and report. For a React caller
+     * whose component unmounts or an `<Activity>` hides.
      */
     suspend(): void;
-    /** Takes the page back after `suspend`: the observers. */
+    /** Takes the page back after `suspend`: the handle, and the observers. */
     resume(): void;
     /**
-     * The region's side of a ResizeHandle's gesture: the drag and keys of a
-     * ResizeHandle given the configuration object's props.
+     * The region's side of a gesture the factory does not own: the drag and
+     * keys of a ResizeHandle given the configuration object's props.
      */
     model: ResizeGestureModel;
 }
 /** The factory's internal channel, or undefined for anything else. */
 export declare function readResizableInternals(controller: ResizableController): ResizableInternals | undefined;
 /**
- * A resizable region, without React. The factory never sizes the panel: it
- * reports the size, and the caller applies it. It resolves, clamps, snaps,
- * collapses and saves the size, and a percentage follows its basis.
- * `destroy` stops its observers.
+ * Make `handle` a window splitter that resizes a region. The factory never
+ * sizes the panel: it reports the size, and the caller applies it.
+ *
+ * It gives the handle `role="separator"`, its orientation and its value. It
+ * adds a tab stop and an accessible name when the handle has none. It answers
+ * a pointer drag, the arrow keys, Home and End, and holds the pointer for a
+ * whole drag. Enter and a double-click collapse and restore. A horizontal
+ * region resizes along the inline axis, and under right-to-left the drag
+ * follows the pointer. `destroy` takes all of it away. With a null handle the
+ * region still answers collapse, expand, resize and subscribe, and touches no
+ * element. Outside a provider, its name and its collapsed text are the
+ * shipped English messages. `label` names it, and `collapsedLabel` replaces
+ * its collapsed text in another language.
+ *
+ * @example
+ * ```
+ * const sidebar = document.querySelector('#sidebar');
+ * const resizable = createResizable(document.querySelector('#divider'), {
+ *   defaultSize: 260,
+ *   minSize: 180,
+ *   maxSize: 480,
+ *   collapsible: true,
+ *   autoSaveId: 'sidebar',
+ * });
+ * const paint = () => {
+ *   sidebar.style.width = `${resizable.size}px`;
+ * };
+ * paint();
+ * resizable.subscribe(paint);
+ * ```
  */
-export declare function createResizable(options?: CreateResizableOptions): ResizableController;
+export declare function createResizable(handle: HTMLElement | null, options?: CreateResizableOptions): ResizableController;
 /**
  * Who a factory's development warnings speak for: the bare factory, or the
  * configuration-object useResizable built on it, whose warnings keep the
@@ -140,6 +194,6 @@ export type ResizableWarningSource = 'createResizable' | 'useResizable';
  * createResizable, with its development warnings in the words of `source`:
  * the package's own entry, for useResizable.
  */
-export declare function createResizableAs(source: ResizableWarningSource, options?: CreateResizableOptions): ResizableController;
+export declare function createResizableAs(source: ResizableWarningSource, handle: HTMLElement | null, options?: CreateResizableOptions): ResizableController;
 export {};
 //# sourceMappingURL=createResizable.d.ts.map

package/dist/Resizable/createResizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createResizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/createResizable.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAcL,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,kBAAkB,EAAqB,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAE3C,MAAM,WAAW,sBAAsB;IACrC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACxC,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mEAAmE;IACnE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE;QAAC,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAC,CAAC;IACtD,+DAA+D;IAC/D,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,mBAAmB;IAClC,kDAAkD;IAClD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,oDAAoD;IACpD,QAAQ,IAAI,IAAI,CAAC;IACjB,iEAAiE;IACjE,MAAM,IAAI,IAAI,CAAC;IACf,0DAA0D;IAC1D,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,OAAO,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC9C;;;;OAIG;IACH,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IAC5C,0EAA0E;IAC1E,OAAO,IAAI,IAAI,CAAC;CACjB;AAkBD;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,sBAA2B,EACpC,WAAW,GAAE,QAAQ,GAAG,QAAmB,GAC1C,iBAAiB,CAgFnB;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7C;AAED;;;GAGG;AACH,UAAU,kBAAkB;IAC1B,QAAQ,IAAI,iBAAiB,CAAC;IAC9B,2DAA2D;IAC3D,iBAAiB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IACpD;;;OAGG;IACH,aAAa,IAAI,IAAI,CAAC;IACtB;;;;;OAKG;IACH,OAAO,IAAI,IAAI,CAAC;IAChB,0DAA0D;IAC1D,MAAM,IAAI,IAAI,CAAC;IACf;;;OAGG;IACH,KAAK,EAAE,kBAAkB,CAAC;CAC3B;AAID,sEAAsE;AACtE,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,mBAAmB,GAC9B,kBAAkB,GAAG,SAAS,CAEhC;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,OAAO,GAAE,sBAA2B,GACnC,mBAAmB,CAErB;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAExE;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,sBAAsB,EAC9B,OAAO,GAAE,sBAA2B,GACnC,mBAAmB,CA4hBrB"}
+{"version":3,"file":"createResizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/createResizable.ts"],"names":[],"mappings":"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"}

package/dist/Resizable/createResizable.js

@@ -2,17 +2,33 @@
 
 /**
  * @file createResizable.ts
- * @input A region's options
+ * @input A handle element, or null for a region with no handle yet, and the
+ *   region's options
  * @output createResizable; readInitialResizableState for the hook's first
- *   render; createResizableAs and the internal channel for the hook
- * @position The Resizable family's region, internal to the package. The
- *   configuration-object useResizable builds on it, and ResizeHandle drives
- *   it through resizeGesture.ts's model. Importing it does no DOM work
+ *   render; createResizableAs and the internal channel for the hooks
+ * @position The Resizable family's factory, internal to the package. Its
+ *   input is resizeGesture.ts: it listens with it on a plain handle, and
+ *   ResizeHandle drives the region through its model. The
+ *   configuration-object useResizable builds on it. No DOM work on import
  */
 
+import { registerEnglishFallback } from "../i18n/englishFallback.js";
+import english from "../i18n/generated-english/Resizable/createResizable.generated.js";
 import { observeResize } from "../utils/sharedResizeObserver.js";
 import { devWarn } from "../utils/devWarning.js";
 import { DEFAULT_COLLAPSED_SIZE, DEFAULT_MIN, DEFAULT_SIZE_FALLBACK, RESIZABLE_SIZE_GUIDANCE, SERVER_BASIS, clampSize, dependsOnBasis, loadPersistedState, measureContentBox, parseSize, persistState, resolveBound } from "./resizableModel.js";
+import { createResizeGesture } from "./resizeGesture.js";
+import { separatorAttributes } from "./separatorAttributes.js";
+// The English for the two messages it names, and nothing more of the catalog.
+registerEnglishFallback(english);
+
+/**
+ * The catalog's messages for a plain handle: its name and what it announces
+ * while collapsed, when the options give neither `label` nor
+ * `collapsedLabel`. The factory uses the shipped English messages.
+ */
+const LABEL_KEY = '@astryx.resizable.handle.label';
+const COLLAPSED_LABEL_KEY = '@astryx.resizable.collapsed';
 /** The viewport width, the basis without a container. */
 function readViewportBasis() {
   return typeof window === 'undefined' ? SERVER_BASIS : window.innerWidth;
@@ -26,14 +42,14 @@ function readWindowExtent(direction) {
   return direction === 'vertical' ? window.innerHeight : window.innerWidth;
 }
 
-/** A warning already given, so a resolution repeated silently stays quiet. */
+/** Starts as warned: the factory warns, and this first-render read does not. */
 const QUIET = {
   current: true
 };
 
 /**
- * The state a region with `options` starts in: the server's render and a
- * hook's first render. A container is not measured
+ * The state a region with `options` starts in, before its handle exists: the
+ * server's render and a hook's first render. A container is not measured
  * yet, so a percentage of it resolves against the deterministic 1200px basis
  * until the factory measures it. `'server'` reads the state the server
  * rendered, for a render that hydrates it: the 1200px basis for a viewport
@@ -96,14 +112,48 @@ export function readResizableInternals(controller) {
   return internals.get(controller);
 }
 
+/** An attribute's value as the DOM takes it; undefined removes it. */
+function toAttribute(value) {
+  return value == null ? null : String(value);
+}
+
+/** The attributes the factory writes on a handle, restored by `destroy`. */
+const MANAGED_ATTRIBUTES = ['role', 'tabindex', 'aria-label', 'aria-orientation', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', 'aria-valuetext', 'aria-disabled', 'data-resizing'];
+
 /**
- * A resizable region, without React. The factory never sizes the panel: it
- * reports the size, and the caller applies it. It resolves, clamps, snaps,
- * collapses and saves the size, and a percentage follows its basis.
- * `destroy` stops its observers.
+ * Make `handle` a window splitter that resizes a region. The factory never
+ * sizes the panel: it reports the size, and the caller applies it.
+ *
+ * It gives the handle `role="separator"`, its orientation and its value. It
+ * adds a tab stop and an accessible name when the handle has none. It answers
+ * a pointer drag, the arrow keys, Home and End, and holds the pointer for a
+ * whole drag. Enter and a double-click collapse and restore. A horizontal
+ * region resizes along the inline axis, and under right-to-left the drag
+ * follows the pointer. `destroy` takes all of it away. With a null handle the
+ * region still answers collapse, expand, resize and subscribe, and touches no
+ * element. Outside a provider, its name and its collapsed text are the
+ * shipped English messages. `label` names it, and `collapsedLabel` replaces
+ * its collapsed text in another language.
+ *
+ * @example
+ * ```
+ * const sidebar = document.querySelector('#sidebar');
+ * const resizable = createResizable(document.querySelector('#divider'), {
+ *   defaultSize: 260,
+ *   minSize: 180,
+ *   maxSize: 480,
+ *   collapsible: true,
+ *   autoSaveId: 'sidebar',
+ * });
+ * const paint = () => {
+ *   sidebar.style.width = `${resizable.size}px`;
+ * };
+ * paint();
+ * resizable.subscribe(paint);
+ * ```
  */
-export function createResizable(options = {}) {
-  return createResizableAs('createResizable', options);
+export function createResizable(handle, options = {}) {
+  return createResizableAs('createResizable', handle, options);
 }
 
 /**
@@ -116,7 +166,7 @@ export function createResizable(options = {}) {
  * createResizable, with its development warnings in the words of `source`:
  * the package's own entry, for useResizable.
  */
-export function createResizableAs(source, options = {}) {
+export function createResizableAs(source, handle, options = {}) {
   // The configuration-object useResizable keeps its warnings word for word.
   const isHook = source === 'useResizable';
   let opts = options;
@@ -124,6 +174,8 @@ export function createResizableAs(source, options = {}) {
   // Let go of the page by `suspend`, with the region kept.
   let isSuspended = false;
   const listeners = new Set();
+  const isReversed = () => opts.isReversed ?? false;
+  const isDisabled = () => opts.isDisabled ?? false;
   const didWarn = {
     min: {
       current: false
@@ -158,8 +210,6 @@ export function createResizableAs(source, options = {}) {
   let chosenSize;
   let committedBounds = null;
   let uncontrolledIsCollapsed = persisted?.isCollapsed ?? opts.defaultIsCollapsed ?? false;
-
-  // What the region last computed, notified and wrote.
   let derived = {
     size: 0,
     isCollapsed: false,
@@ -290,13 +340,13 @@ export function createResizableAs(source, options = {}) {
     };
   }
 
-  /** Recompute, then bring the observers, storage and subscribers along. */
+  /** Recompute, then bring the observers, the handle, storage and subscribers along. */
   function commit() {
     if (isDestroyed) {
       return;
     }
     if (isSuspended) {
-      // No observers: the last measured basis stands.
+      // No observers and no handle: the last measured basis stands.
       compute();
     } else {
       // The observation a computation needs can change with it (a default
@@ -311,6 +361,9 @@ export function createResizableAs(source, options = {}) {
         }
       }
     }
+    if (handle != null && !isSuspended) {
+      announce();
+    }
     persist();
     const reported = {
       size: derived.isCollapsed ? 0 : derived.size,
@@ -367,6 +420,58 @@ export function createResizableAs(source, options = {}) {
       });
     }
   }
+  const original = new Map();
+  if (handle != null) {
+    for (const name of MANAGED_ATTRIBUTES) {
+      original.set(name, handle.getAttribute(name));
+    }
+  }
+  const hasOwnName = handle != null && (handle.hasAttribute('aria-label') || handle.hasAttribute('aria-labelledby'));
+  const setAttribute = (name, value) => {
+    if (handle == null) {
+      return;
+    }
+    if (value == null) {
+      handle.removeAttribute(name);
+    } else if (handle.getAttribute(name) !== value) {
+      handle.setAttribute(name, value);
+    }
+  };
+  function announce() {
+    if (original.get('role') == null) {
+      setAttribute('role', 'separator');
+    }
+    if (!hasOwnName) {
+      setAttribute('aria-label', opts.label ?? english[LABEL_KEY]);
+    }
+    const {
+      size,
+      isCollapsed,
+      min,
+      effectiveMax
+    } = derived;
+    // The attributes ResizeHandle renders, from the same derivation.
+    const aria = separatorAttributes({
+      direction: direction(),
+      isDisabled: isDisabled(),
+      value: {
+        size: isCollapsed ? 0 : size,
+        minPx: min,
+        maxPx: effectiveMax,
+        isCollapsed,
+        collapsedText: opts.collapsedLabel ?? english[COLLAPSED_LABEL_KEY]
+      }
+    });
+    if (original.get('tabindex') == null) {
+      setAttribute('tabindex', String(aria.tabIndex));
+    }
+    setAttribute('aria-orientation', aria['aria-orientation']);
+    setAttribute('aria-valuenow', toAttribute(aria['aria-valuenow']));
+    setAttribute('aria-valuemin', toAttribute(aria['aria-valuemin']));
+    setAttribute('aria-valuemax', toAttribute(aria['aria-valuemax']));
+    setAttribute('aria-valuetext', toAttribute(aria['aria-valuetext']));
+    setAttribute('aria-disabled', toAttribute(aria['aria-disabled']));
+  }
   const setCollapsed = value => {
     if (!isControlled()) {
       uncontrolledIsCollapsed = value;
@@ -483,9 +588,53 @@ export function createResizableAs(source, options = {}) {
     mustWrite = true;
     commit();
   }
+  const gesture = createResizeGesture(() => handle, model, () => ({
+    direction: direction(),
+    isReversed: isReversed(),
+    isDisabled: isDisabled()
+  }), dragging => {
+    setAttribute('data-resizing', dragging ? '' : null);
+  });
+  const onPointerDown = event => {
+    gesture.pointerDown(event);
+  };
+  const onPointerMove = event => {
+    gesture.pointerMove(event);
+  };
+  const onPointerUp = event => {
+    gesture.pointerUp(event);
+  };
+  const onPointerCancel = event => {
+    gesture.pointerCancel(event);
+  };
+  const onKeyDown = event => {
+    gesture.keyDown(event);
+  };
+  const onDoubleClick = () => {
+    gesture.doubleClick();
+  };
+  function bindHandle() {
+    handle?.addEventListener('pointerdown', onPointerDown);
+    handle?.addEventListener('pointermove', onPointerMove);
+    handle?.addEventListener('pointerup', onPointerUp);
+    handle?.addEventListener('pointercancel', onPointerCancel);
+    handle?.addEventListener('lostpointercapture', onPointerCancel);
+    handle?.addEventListener('keydown', onKeyDown);
+    handle?.addEventListener('dblclick', onDoubleClick);
+  }
 
-  /** The observers go; a gesture in flight has ended first. */
+  /**
+   * The handle's listeners and the observers go, and the handle gets its own
+   * attributes back; a gesture in flight has ended first.
+   */
   function letGoOfPage() {
+    handle?.removeEventListener('pointerdown', onPointerDown);
+    handle?.removeEventListener('pointermove', onPointerMove);
+    handle?.removeEventListener('pointerup', onPointerUp);
+    handle?.removeEventListener('pointercancel', onPointerCancel);
+    handle?.removeEventListener('lostpointercapture', onPointerCancel);
+    handle?.removeEventListener('keydown', onKeyDown);
+    handle?.removeEventListener('dblclick', onDoubleClick);
     stopObservingContainer?.();
     stopObservingContainer = null;
     containerElement = null;
@@ -493,7 +642,11 @@ export function createResizableAs(source, options = {}) {
       window.removeEventListener('resize', onViewportResize);
       isObservingViewport = false;
     }
+    for (const [name, value] of original) {
+      setAttribute(name, value);
+    }
   }
+  bindHandle();
   commit();
   const controller = {
     get size() {
@@ -526,8 +679,11 @@ export function createResizableAs(source, options = {}) {
       if (isDestroyed) {
         return;
       }
-      // A gesture a ResizeHandle drove through the region's model ends first,
-      // so the size it reached is saved.
+      // A drag in flight ends first, as cancelled, so the size it reached is
+      // saved and the pointer and the body's cursor are released.
+      gesture.interrupt();
+      // A gesture a ResizeHandle drove through the region's model, rather
+      // than the factory's own, ends the same way.
       endGesture();
       isDestroyed = true;
       if (!isSuspended) {
@@ -550,6 +706,7 @@ export function createResizableAs(source, options = {}) {
       if (isDestroyed || isSuspended) {
         return;
       }
+      gesture.interrupt();
       endGesture();
       isSuspended = true;
       letGoOfPage();
@@ -559,6 +716,7 @@ export function createResizableAs(source, options = {}) {
         return;
       }
       isSuspended = false;
+      bindHandle();
       commit();
     },
     syncContainer() {

package/dist/Resizable/separatorAttributes.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @file separatorAttributes.ts
+ * @input A window splitter's axis and disabled state, and its region's size,
+ *   bounds, collapse state and collapsed text
+ * @output separatorAttributes: the separator's ARIA attributes and tab stop,
+ *   which ResizeHandle renders and createResizable writes on a plain element
+ * @position Internal to the Resizable family. No React, and no DOM work on
+ *   import
+ */
+import type { ResizableDirection } from './resizableModel.js';
+/** The region a separator resizes, as it announces it. */
+export interface SeparatorValue {
+    /** The region's size in px, 0 while it is collapsed. */
+    readonly size: number;
+    readonly minPx: number;
+    /** The maximum to announce, or undefined when the region has none. */
+    readonly maxPx: number | undefined;
+    readonly isCollapsed: boolean;
+    /** The value text a collapsed separator announces. */
+    readonly collapsedText: string;
+}
+export interface SeparatorState {
+    readonly direction: ResizableDirection;
+    readonly isDisabled: boolean;
+    /** The region's value; a separator with no region has none. */
+    readonly value?: SeparatorValue;
+}
+export interface SeparatorAttributes {
+    readonly 'aria-orientation': 'horizontal' | 'vertical';
+    readonly 'aria-valuenow': number | undefined;
+    readonly 'aria-valuemin': number | undefined;
+    readonly 'aria-valuemax': number | undefined;
+    readonly 'aria-valuetext': string | undefined;
+    readonly 'aria-disabled': true | undefined;
+    readonly tabIndex: 0;
+}
+/**
+ * The separator's ARIA attributes and tab stop. A collapsed region's real
+ * size, 0, sits below aria-valuemin, which is invalid. So a collapsed
+ * separator announces its minimum, and its value text says it is collapsed.
+ * A disabled separator keeps its tab stop, so keyboard users can reach it and
+ * hear that it is disabled.
+ */
+export declare function separatorAttributes(state: SeparatorState): SeparatorAttributes;
+//# sourceMappingURL=separatorAttributes.d.ts.map

package/dist/Resizable/separatorAttributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separatorAttributes.d.ts","sourceRoot":"","sources":["../../src/Resizable/separatorAttributes.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAEzD,0DAA0D;AAC1D,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,sEAAsE;IACtE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,sDAAsD;IACtD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,kBAAkB,EAAE,YAAY,GAAG,UAAU,CAAC;IACvD,QAAQ,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9C,QAAQ,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;CACtB;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,GACpB,mBAAmB,CAoBrB"}

package/dist/Resizable/separatorAttributes.js

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file separatorAttributes.ts
+ * @input A window splitter's axis and disabled state, and its region's size,
+ *   bounds, collapse state and collapsed text
+ * @output separatorAttributes: the separator's ARIA attributes and tab stop,
+ *   which ResizeHandle renders and createResizable writes on a plain element
+ * @position Internal to the Resizable family. No React, and no DOM work on
+ *   import
+ */
+
+/** The region a separator resizes, as it announces it. */
+
+/**
+ * The separator's ARIA attributes and tab stop. A collapsed region's real
+ * size, 0, sits below aria-valuemin, which is invalid. So a collapsed
+ * separator announces its minimum, and its value text says it is collapsed.
+ * A disabled separator keeps its tab stop, so keyboard users can reach it and
+ * hear that it is disabled.
+ */
+export function separatorAttributes(state) {
+  const {
+    value
+  } = state;
+  return {
+    'aria-orientation': state.direction === 'horizontal' ? 'vertical' : 'horizontal',
+    'aria-valuenow': value == null ? undefined : value.isCollapsed ? Math.max(value.size, value.minPx) : value.size,
+    'aria-valuemin': value?.minPx,
+    'aria-valuemax': value?.maxPx != null && Number.isFinite(value.maxPx) ? value.maxPx : undefined,
+    'aria-valuetext': value?.isCollapsed ? value.collapsedText : undefined,
+    'aria-disabled': state.isDisabled || undefined,
+    tabIndex: 0
+  };
+}

package/dist/Resizable/useResizable.js

@@ -302,7 +302,7 @@ function useResizableController(options) {
       return;
     }
     const passed = optionsRef.current;
-    const resizable = createResizableAs('useResizable', passed);
+    const resizable = createResizableAs('useResizable', null, passed);
     slot.set({
       resizable,
       passed
@@ -367,7 +367,7 @@ function useResizableController(options) {
       return entry.resizable;
     }
     const passed = optionsRef.current;
-    const resizable = createResizableAs('useResizable', passed);
+    const resizable = createResizableAs('useResizable', null, passed);
     readResizableInternals(resizable)?.suspend();
     slot.set({
       resizable,

package/dist/TimeInput/TimeWheels.d.ts

@@ -0,0 +1,32 @@
+import type { ISOTimeString } from '../utils/timeParser.js';
+import { type TimeParts } from './timeWheelRules.js';
+export interface TimeWheelsProps {
+    /** The time the wheels show. */
+    time: TimeParts;
+    /** 12-hour (with an AM/PM column) or 24-hour time. */
+    hourFormat: '12h' | '24h';
+    /** Whether a seconds column shows. */
+    hasSeconds: boolean;
+    /** Earliest time that may commit. */
+    min?: ISOTimeString;
+    /** Latest time that may commit. */
+    max?: ISOTimeString;
+    /** False while the wheels are hidden. */
+    isActive: boolean;
+    /** Called with the committed time, already inside the bounds. */
+    onCommit: (time: TimeParts) => void;
+}
+/**
+ * UIDatePicker's time wheels.
+ *
+ * @example
+ * ```
+ * <TimeWheels time={{hour: 11, minute: 58, second: 0}} hourFormat="12h"
+ *   hasSeconds={false} isActive onCommit={setTime} />
+ * ```
+ */
+export declare function TimeWheels({ time, hourFormat, hasSeconds, min, max, isActive, onCommit, }: TimeWheelsProps): import("react").JSX.Element;
+export declare namespace TimeWheels {
+    var displayName: string;
+}
+//# sourceMappingURL=TimeWheels.d.ts.map

package/dist/TimeInput/TimeWheels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeWheels.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeWheels.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAaL,KAAK,SAAS,EAEf,MAAM,kBAAkB,CAAC;AAS1B,MAAM,WAAW,eAAe;IAC9B,gCAAgC;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,sDAAsD;IACtD,UAAU,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,sCAAsC;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,mCAAmC;IACnC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC;AAMD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,+BAoIjB;yBA5Ie,UAAU"}