@astryxdesign/core 0.7.8-canary.da689f9 → 0.7.8-canary.ea33daf

package/dist/DateInput/PickerWheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AAmDA,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AA6HxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAghBZ;yBAthBe,WAAW"}
+{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AAmDA,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AA2HxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAghBZ;yBAthBe,WAAW"}

package/dist/DateInput/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AAoDA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AA6JxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAKtC;yBALe,KAAK;;;AASrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BA6TZ;yBAnUe,WAAW"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AAoDA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AAoMxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAKtC;yBALe,KAAK;;;AASrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAoUZ;yBA1Ue,WAAW"}

package/dist/DateInput/Wheel.js

@@ -51,10 +51,21 @@ const ITEM_BLOCK_SIZE = dateInputTouchSizes.wheelItemSize;
  * at the top — which is what a `view()` timeline over the `cover` range means,
  * and why this reads as a cylinder rotating under the finger.
  */
-const falloff = "x1tut0r7-B";
+const tip = "x18sn2u9-B";
 
-/** Motion-free equivalent: the depth cue survives as opacity alone. */
-const fadeOnly = "xuvekqa-B";
+/**
+ * Colour keeps every row at WCAG AA, which an opacity fade does not. The ends
+ * stop halfway to the secondary text colour, because that colour alone falls
+ * below AA in two shipped themes.
+ */
+const fade = "x1ofkhwi-B";
+
+/**
+ * A disabled row keeps its disabled colour and fades by opacity instead: WCAG
+ * 1.4.3 exempts inactive components from the contrast minimum.
+ */
+const tipAndDim = "x1tut0r7-B";
+const dim = "xuvekqa-B";
 const styles = {
   scroller: {
     kZKoxP: "xm8gem",
@@ -409,20 +420,37 @@ export function ScrollWheel({
           0: {
             className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla x1tgivj0 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6"
           },
+          4: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla x1tgivj0 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6 xssvwzl x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782"
+          },
           2: {
             className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6 xjse4m1 x2mo6ok"
           },
+          6: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6 xssvwzl x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xjse4m1 x2mo6ok"
+          },
           1: {
             className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla xuxw1ft x87ps6o x1jbe559 xuedmi6 xnbbluu xt0e3qv"
           },
+          5: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla xuxw1ft x87ps6o x1jbe559 xuedmi6 xssvwzl x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xnbbluu xt0e3qv"
+          },
           3: {
             className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x87ps6o x1jbe559 xuedmi6 x2mo6ok xnbbluu xt0e3qv"
+          },
+          7: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x87ps6o x1jbe559 xuedmi6 xssvwzl x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 x2mo6ok xnbbluu xt0e3qv"
           }
-        }[!!(index === activeIndex) << 1 | !!option.isDisabled << 0],
+        }[!!(index !== activeIndex && !option.isDisabled) << 2 | !!(index === activeIndex) << 1 | !!option.isDisabled << 0],
         children: /*#__PURE__*/_jsx("span", {
           ...{
-            className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xb3r6kr xlyipyv x1iu2jvn xk3h8ob x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xlp1x4z"
-          },
+            0: {
+              className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xb3r6kr xlyipyv x1trhrh1 x1pljy2o x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xlp1x4z"
+            },
+            1: {
+              className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xb3r6kr xlyipyv x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xlp1x4z x1iu2jvn xk3h8ob"
+            }
+          }[!!option.isDisabled << 0],
           children: option.label
         })
       }, option.value))

package/dist/Icon/Icon.d.ts

@@ -106,9 +106,9 @@ export type IconType = ComponentType<SVGProps<SVGSVGElement>>;
  */
 export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'> {
     /**
-     * Ref to the rendered SVG element when `icon` is an icon component. A
-     * semantic or namespaced name renders inside an internal wrapper, and the
-     * ref is not attached.
+     * Ref to the rendered SVG element. For a semantic or namespaced name it is
+     * the `<svg>` inside Icon's wrapper, or `null` when the resolved glyph has
+     * no `<svg>`.
      */
     ref?: React.Ref<SVGSVGElement>;
     /**

package/dist/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAIzC,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AA6BD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAoDX;yBA/De,IAAI;;;AA2IpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAKzC,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AA6BD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAqDX;yBAhEe,IAAI;;;AAyJpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}

package/dist/Icon/Icon.js

@@ -29,13 +29,14 @@
  * - /apps/storybook/stories/Icon.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Icon/ (showcase blocks)
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars } from "../theme/tokens.stylex.js";
 import { useThemeName } from "../theme/useTheme.js";
 import { resolveIcon } from "./globalIconRegistry.js";
 import { mergeProps } from "../utils/mergeProps.js";
+import { mergeRefs } from "../utils/mergeRefs.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useIconSize } from "./IconDefaultSizeContext.js";
 import { iconSizeStyles } from "./IconSize.stylex.js";
@@ -251,6 +252,7 @@ export function Icon({
       className: className,
       style: style,
       xstyle: xstyle,
+      svgRef: ref,
       spanProps: props
     });
   }
@@ -295,6 +297,7 @@ function IconFromRegistry({
   className,
   style,
   xstyle,
+  svgRef,
   spanProps
 }) {
   const themeName = useThemeName();
@@ -302,6 +305,11 @@ function IconFromRegistry({
     size,
     variant
   });
+  // The glyph can change while the span stays. Attach the ref again when it
+  // does.
+  const attachSvgRef = useCallback(span => svgRef == null ? undefined : mergeRefs(svgRef)(span?.querySelector('svg') ?? null),
+  // eslint-disable-next-line @eslint-react/exhaustive-deps -- resolveIcon's inputs: a new glyph gets a new attach, and a function entry's new element each render does not.
+  [svgRef, name, themeName, size, variant]);
   if (resolvedIcon == null) {
     return null;
   }
@@ -313,6 +321,12 @@ function IconFromRegistry({
   // precedence (spread before the internal merge).
   const restSpanProps = spanProps ?? {};
   return /*#__PURE__*/_jsx("span", {
+    ref: svgRef == null ? undefined : attachSvgRef
+    // Derived a11y — decorative (aria-hidden) by default, or a meaningful
+    // image (role="img" + aria-label) when `label` is set. Placed BEFORE the
+    // prop spread so consumers can still override it with explicit
+    // aria-hidden/role/aria-label. This mirrors component-mode Icon.
+    ,
     ...a11yProps,
     ...restSpanProps,
     ...mergeProps(themeProps('icon', {

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

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAkBxB,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8PzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA+SnB;yBA9Te,YAAY"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAmBxB,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8PzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAsSnB;yBArTe,YAAY"}

package/dist/Resizable/ResizeHandle.js

@@ -19,6 +19,7 @@ import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { mergeProps, rtlStyles } from "../utils/index.js";
 import { getCollapseControls, getEffectiveMaxPx } from "./useResizable.js";
 import { createResizeGesture } from "./resizeGesture.js";
+import { separatorAttributes } from "./separatorAttributes.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
@@ -410,20 +411,25 @@ export function ResizeHandle({
   }, [hasRegion, regionGesture]);
 
   // --- ARIA ---
-  // When collapsed the panel's real size (0) sits below aria-valuemin, which
-  // is invalid per WCAG 4.1.2. Clamp aria-valuenow to the minimum and announce
-  // the true state via aria-valuetext instead; the valuetext is removed as
-  // soon as the panel expands so the numeric value reads again.
   const sizeNow = resizable?._size;
   const minNow = resizable?._minSizePx;
-  const ariaValueNow = sizeNow == null || minNow == null ? undefined : isCollapsed ? Math.max(sizeNow, minNow) : sizeNow;
-  const ariaValueMin = minNow;
   // A separator with a value needs a maximum (WAI-ARIA, APG window splitter).
   // Unbounded regions report the basis they can fill; a hand-built props
   // object without it reports only a configured maximum.
   const effectiveMax = resizable ? getEffectiveMaxPx(resizable) ?? (resizable._maxSizePx !== Infinity ? resizable._maxSizePx : undefined) : undefined;
-  const ariaValueMax = effectiveMax != null && Number.isFinite(effectiveMax) ? effectiveMax : undefined;
-  const ariaValueText = resizable != null && isCollapsed ? t('@astryx.resizable.collapsed') : undefined;
+  // The attributes createResizable writes on a plain element, from the same
+  // derivation.
+  const aria = separatorAttributes({
+    direction,
+    isDisabled,
+    value: sizeNow == null || minNow == null ? undefined : {
+      size: sizeNow,
+      minPx: minNow,
+      maxPx: effectiveMax,
+      isCollapsed,
+      collapsedText: t('@astryx.resizable.collapsed')
+    }
+  });
 
   // The Grip pill takes the pointer as the Grab zone does, so a pill drawn
   // outside the zone still resizes.
@@ -447,14 +453,8 @@ export function ResizeHandle({
   return /*#__PURE__*/_jsxs("div", {
     ref: useMergedRefs(ref, handleRef),
     role: "separator",
-    "aria-orientation": isHorizontal ? 'vertical' : 'horizontal',
-    "aria-valuenow": ariaValueNow,
-    "aria-valuemin": ariaValueMin,
-    "aria-valuemax": ariaValueMax,
-    "aria-valuetext": ariaValueText,
+    ...aria,
     "aria-label": label,
-    "aria-disabled": isDisabled || undefined,
-    tabIndex: isDisabled ? -1 : 0,
     onDoubleClick: () => {
       if (!isDisabled) {
         gesture?.doubleClick();

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":"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"}
+{"version":3,"file":"createResizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/createResizable.ts"],"names":[],"mappings":"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"}