@foldkit/ui 0.153.0 → 0.154.0-canary.db46ded8d159

package/dist/anchor/anchor.d.ts

@@ -45,13 +45,26 @@ export declare const portalToContainingRoot: (element: Element) => (() => void);
  *  - `focusAfterPosition`: focuses the element once the first position
  *    resolves. Defaults to `false`.
  *  - `focusSelector`: focuses this descendant instead of the element itself.
- *    Read only when `focusAfterPosition` is true. */
+ *    Read only when `focusAfterPosition` is true.
+ *  - `arrowId`: id of an arrow element inside the panel, resolved through the
+ *    element's own root. An id that resolves to an element outside the panel is
+ *    ignored, and any element type is accepted, so an `<svg>` arrow works. When
+ *    it resolves, the arrow's offset along the panel edge is published as
+ *    `--arrow-x` and `--arrow-y`, with the axis the placement does not use
+ *    reset to `initial`, and the panel is no longer made a scroll container,
+ *    since scrolling clips on both axes and an arrow sits half outside the
+ *    panel's box.
+ *  - `arrowPadding`: distance in pixels the arrow keeps from the panel's
+ *    corners. Defaults to `0`. Separate from `anchor.padding`, which is the
+ *    viewport padding. */
 export type SetupConfig = Readonly<{
     buttonId: string;
     anchor: AnchorConfig;
     interceptTab?: boolean;
     focusAfterPosition?: boolean;
     focusSelector?: string;
+    arrowId?: string;
+    arrowPadding?: number;
 }>;
 /** Positions a floating element relative to its button using Floating UI, then
  *  returns a cleanup function. Designed to be called inside an `OnMount`

package/dist/anchor/anchor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"anchor.d.ts","sourceRoot":"","sources":["../../src/anchor/anchor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,MAAM,IAAI,CAAC,EAAgB,MAAM,QAAQ,CAAA;AAYnE;mFACmF;AACnF,eAAO,MAAM,SAAS,qKAapB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,IAAI,CAAA;AAE7C;+DAC+D;AAC/D,eAAO,MAAM,OAAO;;;;;IAQlB,CAAA;AAEF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAEzC,oGAAoG;AACpG,eAAO,MAAM,YAAY;;;;;;;;;;;;EAOvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,IAAI,CAAA;AAkCnD;;;;;;0DAM0D;AAC1D,eAAO,MAAM,sBAAsB,GAAI,SAAS,OAAO,KAAG,CAAC,MAAM,IAAI,CAWpE,CAAA;AAKD;;;;;;;;;;qDAUqD;AACrD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,YAAY,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;gFAegF;AAChF,eAAO,MAAM,WAAW,GACtB,SAAS,OAAO,EAChB,QAAQ,WAAW,KAClB,CAAC,MAAM,IAAI,CA4Lb,CAAA"}
+{"version":3,"file":"anchor.d.ts","sourceRoot":"","sources":["../../src/anchor/anchor.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,MAAM,IAAI,CAAC,EAAgB,MAAM,QAAQ,CAAA;AAa3E;mFACmF;AACnF,eAAO,MAAM,SAAS,qKAapB,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,IAAI,CAAA;AAE7C;+DAC+D;AAC/D,eAAO,MAAM,OAAO;;;;;IAQlB,CAAA;AAEF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAEzC,oGAAoG;AACpG,eAAO,MAAM,YAAY;;;;;;;;;;;;EAOvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,IAAI,CAAA;AAkCnD;;;;;;0DAM0D;AAC1D,eAAO,MAAM,sBAAsB,GAAI,SAAS,OAAO,KAAG,CAAC,MAAM,IAAI,CAWpE,CAAA;AAKD;;;;;;;;;;;;;;;;;;;;;0BAqB0B;AAC1B,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,YAAY,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC,CAAA;AAsBF;;;;;;;;;;;;;;;gFAegF;AAChF,eAAO,MAAM,WAAW,GACtB,SAAS,OAAO,EAChB,QAAQ,WAAW,KAClB,CAAC,MAAM,IAAI,CAyOb,CAAA"}

package/dist/anchor/anchor.js

@@ -1,6 +1,6 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Array, Function, Schema as S, String, pipe } from 'effect';
-import { autoUpdate, computePosition, flip, offset as floatingOffset, shift, size, } from '@floating-ui/dom';
+import { Array, Function, Option, Schema as S, String, pipe } from 'effect';
+import { arrow, autoUpdate, computePosition, flip, offset as floatingOffset, shift, size, } from '@floating-ui/dom';
 /** Schema mirroring `@floating-ui/dom`'s `Placement` literal union: a side
  *  (`top`/`right`/`bottom`/`left`) optionally suffixed with `-start` or `-end`. */
 export const Placement = S.Literals([
@@ -84,6 +84,22 @@ export const portalToContainingRoot = (element) => {
     }), "@foldkit/ui/anchor/anchor.js#portalToContainingRoot");
 };
 const toSide = (placement) => __foldkitBrandViewResult((pipe(placement, String.split('-'), Array.headNonEmpty)), "@foldkit/ui/anchor/anchor.js#toSide");
+// NOTE: the unused axis is reset to `initial` rather than removed. Custom
+// properties inherit, so removing it lets an ancestor's `--arrow-x` reach the
+// arrow, and a `left` that resolves beats the side rule's `right` under
+// over-constrained absolute positioning. An ancestor is not far-fetched: a
+// `portal: false` popover nested inside another popover's panel sits under one.
+// `initial` gives the property its guaranteed-invalid initial value, so
+// `var(--arrow-x)` is invalid at computed-value time and `left` falls back to
+// `auto`.
+const setOrResetLength = (element, property, value) => {
+    if (value === undefined) {
+        element.style.setProperty(property, 'initial');
+    }
+    else {
+        element.style.setProperty(property, `${value}px`);
+    }
+};
 /** Positions a floating element relative to its button using Floating UI, then
  *  returns a cleanup function. Designed to be called inside an `OnMount`
  *  action: the consumer wraps the call in `Effect.sync` and stashes the
@@ -123,6 +139,19 @@ export const anchorSetup = (element, config) => {
     if (inShadow) {
         element.style.position = 'fixed';
     }
+    // NOTE: an id lookup searches the whole root, so an unrelated element that
+    // happens to carry the arrow id would be positioned as the arrow. The
+    // containment check holds the lookup to what `arrowId` documents, an arrow
+    // inside the panel. The candidate is not narrowed to `HTMLElement`, since
+    // Floating UI's `arrow` takes any `Element` and a triangle arrow is usually
+    // an `<svg>`.
+    const maybeArrowElement = pipe(Option.fromNullishOr(config.arrowId), Option.flatMapNullishOr(arrowId => __foldkitBrandViewResult((owner.getElementById(arrowId)), "@foldkit/ui/anchor/anchor.js#anonymous~2")), Option.filter(candidate => __foldkitBrandViewResult((element.contains(candidate)), "@foldkit/ui/anchor/anchor.js#anonymous~3")));
+    const arrowMiddleware = Option.match(maybeArrowElement, {
+        onNone: () => __foldkitBrandViewResult(([]), "@foldkit/ui/anchor/anchor.js#onNone"),
+        onSome: arrowElement => __foldkitBrandViewResult(([
+            arrow({ element: arrowElement, padding: config.arrowPadding ?? 0 }),
+        ]), "@foldkit/ui/anchor/anchor.js#onSome"),
+    });
     const { placement, gap, offset: crossAxis, padding, isPlacementLocked, } = config.anchor;
     const shouldInterceptTab = config.interceptTab ?? true;
     const isPlacementLockEnabled = isPlacementLocked ?? false;
@@ -168,15 +197,30 @@ export const anchorSetup = (element, config) => {
                         }
                         element.style.setProperty('--button-width', `${rects.reference.width}px`);
                         element.style.maxHeight = `${Math.max(0, availableHeight)}px`;
-                        element.style.overflowY = 'auto';
-                        element.style.overscrollBehavior = 'none';
+                        // NOTE: `overflow-y: auto` makes `overflow-x` compute to `auto`
+                        // too, so a scrolling panel clips on every side. An arrow sits
+                        // half outside the panel's padding box, so it would be clipped
+                        // away entirely. A panel with an arrow keeps its scroll container
+                        // inside itself instead.
+                        if (Option.isNone(maybeArrowElement)) {
+                            element.style.overflowY = 'auto';
+                            element.style.overscrollBehavior = 'none';
+                        }
                     },
                 }),
+                // NOTE: `arrow` runs last. Sitting after `shift` is the constraint: an
+                // offset computed before `shift` would ignore the displacement `shift`
+                // applied, which is the case this hook exists to handle. Running after
+                // `size` is safe for a different reason: when `size.apply` changes the
+                // panel's dimensions, `size` returns `reset: { rects: true }` and
+                // Floating UI reruns the whole chain, so `arrow` always resolves
+                // against the final rects rather than the ones `size` invalidated.
+                ...arrowMiddleware,
             ],
         });
         isPositioning = true;
         tick
-            .then(({ x, y, placement: resolvedPlacement }) => {
+            .then(({ x, y, placement: resolvedPlacement, middlewareData }) => {
             hasWarnedFailure = false;
             if (!isActive) {
                 return;
@@ -187,6 +231,11 @@ export const anchorSetup = (element, config) => {
                 lockedPlacement = lockedPlacement ?? resolvedPlacement;
             }
             element.setAttribute('data-placement', toSide(lockedPlacement ?? resolvedPlacement));
+            if (Option.isSome(maybeArrowElement)) {
+                const { x: arrowX, y: arrowY } = middlewareData.arrow ?? {};
+                setOrResetLength(element, '--arrow-x', arrowX);
+                setOrResetLength(element, '--arrow-y', arrowY);
+            }
             if (isFirstUpdate) {
                 isFirstUpdate = false;
                 element.style.visibility = '';
@@ -242,6 +291,10 @@ export const anchorSetup = (element, config) => {
             element.removeEventListener('keydown', handleTabKey);
         }
         element.removeAttribute('data-placement');
+        element.style.removeProperty('overflow-y');
+        element.style.removeProperty('overscroll-behavior');
+        element.style.removeProperty('--arrow-x');
+        element.style.removeProperty('--arrow-y');
         portalCleanup?.();
     }), "@foldkit/ui/anchor/anchor.js#anchorSetup");
 };

package/dist/popover/index.d.ts

@@ -78,6 +78,11 @@ export declare const init: (config: InitConfig) => Model;
  *  trigger via a native `<label for={Popover.buttonId(id)}>` or an
  *  `aria-labelledby` reference. */
 export declare const buttonId: (id: string) => string;
+/** Returns the bare DOM id of the popover arrow, derived from the popover's
+ *  base id. The `arrow` bundle already carries this id, so reach for this when
+ *  you need the id on its own, such as asserting the panel Mount's `arrowId`
+ *  argument in a Scene test. */
+export declare const arrowId: (id: string) => string;
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
 /** Prevents page scrolling while the popover is open in modal mode. */
 export declare const LockScroll: Command.CommandDefinitionNoArgs<"LockScroll", Effect.Effect<{
@@ -209,6 +214,8 @@ export declare const AnchorPopover: Mount.MountDefinitionWithArgs<"AnchorPopover
         readonly isPlacementLocked: S.optional<S.Boolean>;
     }>;
     focusSelector: S.optional<S.String>;
+    arrowId: S.optional<S.String>;
+    arrowPadding: S.optional<S.Number>;
 }, {
     readonly _tag: "CompletedAnchorPopover";
 }>;
@@ -234,6 +241,11 @@ export declare const close: (model: Model) => UpdateReturn;
  *  - `backdrop`: attribute bundle for the modal backdrop. Includes the
  *    portal Mount that moves the backdrop to document.body. The
  *    backdrop's OnClick closes the popover.
+ *  - `arrow`: attribute bundle for an arrow element inside the panel.
+ *    Carries the id the anchor Mount resolves and hides the element from
+ *    assistive technology. Spread it onto your own element and place it
+ *    with the `--arrow-x` and `--arrow-y` custom properties Anchor
+ *    publishes on the panel. Nothing renders until you do.
  *  - `isVisible`: derived from `isOpen` and the Animation
  *    `transitionState`. The consumer renders the panel + backdrop only
  *    while this is true. */
@@ -241,6 +253,7 @@ export type RenderInfo = Readonly<{
     button: ReadonlyArray<ChildAttribute>;
     panel: ReadonlyArray<ChildAttribute>;
     backdrop: ReadonlyArray<ChildAttribute>;
+    arrow: ReadonlyArray<ChildAttribute>;
     isVisible: boolean;
 }>;
 /** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
@@ -249,6 +262,7 @@ export type ViewInputs = Readonly<{
     toView: (render: RenderInfo) => Html;
     isDisabled?: boolean;
     focusSelector?: string;
+    arrowPadding?: number;
     ariaLabel?: string;
     ariaLabelledBy?: string;
 }>;
@@ -311,6 +325,7 @@ export declare const view: import("foldkit/submodel").View<{
     toView: (render: RenderInfo) => Html;
     isDisabled?: boolean;
     focusSelector?: string;
+    arrowPadding?: number;
     ariaLabel?: string;
     ariaLabelledBy?: string;
 }>>;

package/dist/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAGN,MAAM,EAEN,MAAM,IAAI,CAAC,EAEZ,MAAM,QAAQ,CAAA;AACf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAE1C,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,IAAI,EAAmB,MAAM,cAAc,CAAA;AAE9E,OAAO,KAAK,KAAK,MAAM,eAAe,CAAA;AAGtC,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAExC,OAAO,EACL,YAAY,EAGb,MAAM,oBAAoB,CAAA;AAgB3B,qGAAqG;AACrG,eAAO,MAAM,KAAK;;;;;;;;;;;;EAQhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,+DAA+D;AAC/D,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBlB,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,OAAO,OAAO,CAAC,cAAc,CAAC,IAAI,CAAA;AAC/D,MAAM,MAAM,YAAY,GAAG,OAAO,OAAO,CAAC,YAAY,CAAC,IAAI,CAAA;AAC3D,MAAM,MAAM,sBAAsB,GAAG,OAAO,OAAO,CAAC,sBAAsB,CAAC,IAAI,CAAA;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAA;AACrE,MAAM,MAAM,qBAAqB,GAAG,OAAO,OAAO,CAAC,qBAAqB,CAAC,IAAI,CAAA;AAE7E,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC;;iCAEiC;AACjC,eAAO,MAAM,UAAU;;;EAGrB,CAAA;AACF,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAE/C,MAAM,MAAM,MAAM,GAAG,OAAO,UAAU,CAAC,MAAM,CAAC,IAAI,CAAA;AAClD,MAAM,MAAM,MAAM,GAAG,OAAO,UAAU,CAAC,MAAM,CAAC,IAAI,CAAA;AAMlD,4aAA4a;AAC5a,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAC,CAAA;AAEF,0EAA0E;AAC1E,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAQxC,CAAA;AAaF;;;mCAGmC;AACnC,eAAO,MAAM,QAAQ,GAAI,IAAI,MAAM,KAAG,MAAwB,CAAA;AAE9D;;;gCAGgC;AAChC,eAAO,MAAM,OAAO,GAAI,IAAI,MAAM,KAAG,MAAuB,CAAA;AAE5D,KAAK,YAAY,GAAG,MAAM,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAA;AAE3E,uEAAuE;AACvE,eAAO,MAAM,UAAU;;iBAGrB,CAAA;AACF,0DAA0D;AAC1D,eAAO,MAAM,YAAY;;iBAGvB,CAAA;AACF,0EAA0E;AAC1E,eAAO,MAAM,WAAW;;;;iBAOtB,CAAA;AACF,qEAAqE;AACrE,eAAO,MAAM,YAAY;;;;iBAKvB,CAAA;AACF,sDAAsD;AACtD,eAAO,MAAM,UAAU;;;;iBAQrB,CAAA;AACF,4DAA4D;AAC5D,eAAO,MAAM,WAAW;;;;iBAQtB,CAAA;AACF,wKAAwK;AACxK,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;iBAuBxC,CAAA;AAsBD;kCACkC;AAClC,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,EAAE,SAAS,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwIpD,CAAA;AAED;;+DAE+D;AAC/D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;EA8BzB,CAAA;AAED;;+DAE+D;AAC/D,eAAO,MAAM,qBAAqB;;EAWjC,CAAA;AAED;4DAC4D;AAC5D,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,YACI,CAAA;AAExC;;wEAEwE;AACxE,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,KAAG,YACI,CAAA;AAIzC;;;;;;;;;;;;;;;;4BAgB4B;AAC5B,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACrC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACpC,QAAQ,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACvC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACpC,SAAS,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,MAAM,EAAE,YAAY,CAAA;IACpB,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,6EAA6E;AAC7E,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAVP,YAAY;YACZ,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI;iBACvB,OAAO;oBACJ,MAAM;mBACP,MAAM;gBACT,MAAM;qBACD,MAAM;GA0KxB,CAAA"}

package/dist/popover/index.js

@@ -81,6 +81,11 @@ const panelSelector = (id) => __foldkitBrandViewResult((idSelector(`${id}-panel`
  *  trigger via a native `<label for={Popover.buttonId(id)}>` or an
  *  `aria-labelledby` reference. */
 export const buttonId = (id) => __foldkitBrandViewResult((`${id}-button`), "@foldkit/ui/popover/index.js#buttonId");
+/** Returns the bare DOM id of the popover arrow, derived from the popover's
+ *  base id. The `arrow` bundle already carries this id, so reach for this when
+ *  you need the id on its own, such as asserting the panel Mount's `arrowId`
+ *  argument in a Scene test. */
+export const arrowId = (id) => __foldkitBrandViewResult((`${id}-arrow`), "@foldkit/ui/popover/index.js#arrowId");
 /** Prevents page scrolling while the popover is open in modal mode. */
 export const LockScroll = Command.define('LockScroll', {
     messages: [Message.CompletedLockScroll],
@@ -243,13 +248,17 @@ export const AnchorPopover = Mount.define('AnchorPopover', {
     buttonId: S.String,
     anchor: AnchorConfig,
     focusSelector: S.optional(S.String),
-}, Message.CompletedAnchorPopover)(({ buttonId, anchor, focusSelector }) => __foldkitBrandViewResult((element => __foldkitBrandViewResult((Effect.gen(function* () {
+    arrowId: S.optional(S.String),
+    arrowPadding: S.optional(S.Number),
+}, Message.CompletedAnchorPopover)(({ buttonId, anchor, focusSelector, arrowId, arrowPadding }) => __foldkitBrandViewResult((element => __foldkitBrandViewResult((Effect.gen(function* () {
     yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((anchorSetup(element, {
         buttonId,
         anchor,
         interceptTab: false,
         focusAfterPosition: true,
         ...(focusSelector !== undefined && { focusSelector }),
+        ...(arrowId !== undefined && { arrowId }),
+        ...(arrowPadding !== undefined && { arrowPadding }),
     })), "@foldkit/ui/popover/index.js#anonymous~11")), cleanup => __foldkitBrandViewResult((Effect.sync(cleanup)), "@foldkit/ui/popover/index.js#anonymous~12"));
     return __foldkitBrandViewResult((Message.CompletedAnchorPopover()), "@foldkit/ui/popover/index.js#anonymous~10");
 })), "@foldkit/ui/popover/index.js#anonymous~9")), "@foldkit/ui/popover/index.js#anonymous~8"));
@@ -270,7 +279,7 @@ export const close = (model) => __foldkitBrandViewResult((update(model, Message.
 /** Renders a headless popover with a trigger button and a floating panel. */
 export const view = defineView((model, viewInputs, h) => {
     const { id, isOpen, contentFocus, animation: { transitionState }, maybeLastButtonPointerType, } = model;
-    const { anchor, toView, isDisabled, focusSelector, ariaLabel, ariaLabelledBy, } = viewInputs;
+    const { anchor, toView, isDisabled, focusSelector, arrowPadding, ariaLabel, ariaLabelledBy, } = viewInputs;
     const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
     const isVisible = isOpen || isLeaving;
     const animationAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => __foldkitBrandViewResult(([
@@ -345,6 +354,8 @@ export const view = defineView((model, viewInputs, h) => {
             buttonId: `${id}-button`,
             anchor,
             ...(focusSelector !== undefined && { focusSelector }),
+            arrowId: arrowId(id),
+            ...(arrowPadding !== undefined && { arrowPadding }),
         })),
         ...animationAttributes,
         ...(isLeaving
@@ -358,10 +369,12 @@ export const view = defineView((model, viewInputs, h) => {
         h.OnMount(PortalPopoverBackdrop()),
         ...(isLeaving ? [] : [h.OnClick(Message.RequestedClose())]),
     ];
+    const arrowAttributes = [h.Id(arrowId(id)), h.AriaHidden(true)];
     return __foldkitBrandViewResult((toView({
         button: childAttributes(buttonAttributes),
         panel: childAttributes(panelAttributes),
         backdrop: childAttributes(backdropAttributes),
+        arrow: childAttributes(arrowAttributes),
         isVisible,
     })), "@foldkit/ui/popover/index.js#anonymous~17");
 });

package/dist/popover/public.d.ts

@@ -1,4 +1,4 @@
-export { init, update, open, close, view, buttonId, Model, Message, OutMessage, type Opened, type Closed, type RequestedOpen, type RequestedClose, AnchorPopover, PortalPopoverBackdrop, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusPanel, FocusButton, DetectMovementOrAnimationEnd, type BlurredPanel, type PressedPointerOnButton, type IgnoredMouseClick, type SuppressedSpaceScroll, } from './index.js';
+export { init, update, open, close, view, buttonId, arrowId, Model, Message, OutMessage, type Opened, type Closed, type RequestedOpen, type RequestedClose, AnchorPopover, PortalPopoverBackdrop, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusPanel, FocusButton, DetectMovementOrAnimationEnd, type BlurredPanel, type PressedPointerOnButton, type IgnoredMouseClick, type SuppressedSpaceScroll, } from './index.js';
 export type { InitConfig, ViewInputs, RenderInfo } from './index.js';
 export type { AnchorConfig } from '../anchor/index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/popover/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/popover/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAAU,EACV,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,aAAa,EACb,qBAAqB,EACrB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,WAAW,EACX,4BAA4B,EAC5B,KAAK,YAAY,EACjB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,GAC3B,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAEpE,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/popover/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAU,EACV,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,aAAa,EACb,qBAAqB,EACrB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,WAAW,EACX,4BAA4B,EAC5B,KAAK,YAAY,EACjB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,GAC3B,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAEpE,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/popover/public.js

@@ -1 +1 @@
-export { init, update, open, close, view, buttonId, Model, Message, OutMessage, AnchorPopover, PortalPopoverBackdrop, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusPanel, FocusButton, DetectMovementOrAnimationEnd, } from './index.js';
+export { init, update, open, close, view, buttonId, arrowId, Model, Message, OutMessage, AnchorPopover, PortalPopoverBackdrop, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusPanel, FocusButton, DetectMovementOrAnimationEnd, } from './index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/ui",
-  "version": "0.153.0",
+  "version": "0.154.0-canary.db46ded8d159",
   "description": "Headless, accessible UI components for Foldkit",
   "type": "module",
   "main": "./dist/index.js",
@@ -118,7 +118,7 @@
   ],
   "peerDependencies": {
     "effect": "4.0.0-rc.112",
-    "foldkit": ">=0.153.0"
+    "foldkit": "0.154.0-canary.db46ded8d159"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6"
@@ -131,8 +131,8 @@
     "typedoc": "^0.28.19",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "@foldkit/vite-plugin": "0.19.0",
-    "foldkit": "0.153.0"
+    "@foldkit/vite-plugin": "0.19.0-canary.db46ded8d159",
+    "foldkit": "0.154.0-canary.db46ded8d159"
   },
   "keywords": [
     "foldkit",