@lostgradient/cinder 0.3.0 → 0.4.0

package/src/components/drawer/drawer.svelte

@@ -19,13 +19,11 @@
   import type { DrawerProps } from './drawer.types.ts';
   import { onDestroy } from 'svelte';
 
-  import { captureFocus, lockBodyScroll, pushEscapeHandler } from '../../_internal/overlay.ts';
-  import { waitForTransitionCompletion } from '../../_internal/transition-completion.ts';
   import { overflowFade } from '../../utilities/attachments.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import { createFocusTrap } from '../focus-trap/index.ts';
-  import { restoreFocusTo } from '../../utilities/focus.ts';
   import { useReducedMotion } from '../../utilities/use-reduced-motion.svelte.ts';
+  import { createSlidingDialogState } from '../_internal/create-sliding-dialog-state.svelte.ts';
 
   let {
     open = $bindable(false),
@@ -45,10 +43,6 @@
 
   let dialogElement: HTMLDialogElement | undefined = $state();
   let panelElement: HTMLDivElement | undefined = $state();
-  let hydrated = $state(false);
-  let renderPanel = $state(open);
-  let isClosing = $state(false);
-  let closeGeneration = $state(0);
   /**
    * The side that was active when the current open/close cycle began.
    * Snapshotted at open time so that a side-prop change while the drawer
@@ -57,65 +51,39 @@
    */
   let activeSide = $state(side);
 
-  let capturedFocus: HTMLElement | null = null;
-  let releaseScrollLock: (() => void) | null = null;
-  let releaseEscape: (() => void) | null = null;
-  let cancelPendingClose: (() => void) | null = null;
-
   const reducedMotion = useReducedMotion();
   const bodyOverflowFade = overflowFade();
-
-  function acquireScrollLock(): void {
-    if (releaseScrollLock) return;
-    releaseScrollLock = lockBodyScroll();
-  }
-
-  function acquireEscapeMarker(): void {
-    if (releaseEscape) return;
-    // No-op handler: presence marker so stacked non-dialog overlays
-    // route ESC to themselves. Native <dialog> owns the actual ESC close.
-    releaseEscape = pushEscapeHandler(() => {});
-  }
+  const dialogState = createSlidingDialogState({
+    getOpen: () => open,
+    setOpen: (nextOpen) => {
+      open = nextOpen;
+    },
+    getDialogElement: () => dialogElement,
+    getPanelElement: () => panelElement,
+    getReducedMotion: () => reducedMotion.current,
+    getTriggerRef: () => triggerRef,
+  });
 
   $effect(() => {
-    hydrated = true;
+    dialogState.markHydrated();
   });
 
   $effect(() => {
-    if (!dialogElement) return;
     if (open) {
-      if (isClosing) {
+      if (dialogState.isClosing) {
         // Quick-reopen while a close transition is still running.
         // Snapshot the current side so the reversal / re-entry animation
         // uses the side the user expects for this new open intent.
         activeSide = side;
-        closeGeneration += 1;
-        cancelPendingClose?.();
-        cancelPendingClose = null;
-        isClosing = false;
       }
 
-      if (!renderPanel) {
+      if (!dialogState.renderPanel) {
         // Fresh mount — snapshot the side for this open cycle so any later
         // side-prop change while open or closing does not flip the direction.
         activeSide = side;
-        renderPanel = true;
-      }
-
-      if (!dialogElement.open) {
-        capturedFocus = captureFocus();
-        dialogElement.showModal();
-        acquireScrollLock();
-        acquireEscapeMarker();
       }
-      return;
-    }
-
-    if (dialogElement.open) {
-      beginClosing();
-    } else {
-      renderPanel = false;
     }
+    dialogState.syncOpenState();
   });
 
   /**
@@ -143,116 +111,29 @@
     return explicitlyAutofocused;
   }
 
-  function beginClosing(): void {
-    if (!dialogElement?.open || isClosing) return;
-    if (!panelElement) {
-      finishClosing(closeGeneration);
-      return;
-    }
-
-    isClosing = true;
-    const generation = ++closeGeneration;
-    cancelPendingClose?.();
-    cancelPendingClose = waitForTransitionCompletion({
-      element: panelElement,
-      reducedMotion: reducedMotion.current,
-      onComplete: () => finishClosing(generation),
-    });
-  }
-
-  function finishClosing(generation: number): void {
-    if (generation !== closeGeneration) return;
-    cancelPendingClose?.();
-    cancelPendingClose = null;
-    isClosing = false;
-    renderPanel = false;
-    if (dialogElement?.open) {
-      dialogElement.close();
-    }
-  }
-
-  function handleClose() {
-    if (releaseScrollLock) {
-      releaseScrollLock();
-      releaseScrollLock = null;
-    }
-    if (releaseEscape) {
-      releaseEscape();
-      releaseEscape = null;
-    }
-    open = false;
-    returnFocus();
-  }
-
-  function requestClose(): void {
-    if (!open && (isClosing || !dialogElement?.open)) return;
-    open = false;
-    beginClosing();
-  }
-
-  // Iterate candidates so a disconnected `triggerRef` falls through to the
-  // captured pre-open focus. Matches modal/sheet/popover/command-palette.
-  function returnFocus(): void {
-    const candidates: Array<HTMLElement | null> = [triggerRef, capturedFocus];
-    for (const candidate of candidates) {
-      if (restoreFocusTo(candidate)) break;
-    }
-    capturedFocus = null;
-  }
-
-  function handleNativeCancel(event: Event) {
-    // The browser's native ESC handler on <dialog> fires `cancel` then closes
-    // the dialog. preventDefault keeps the close out of the native path so it
-    // goes through `dialogElement.close()` here — which fires the `close`
-    // event and lets handleClose() run as the single canonical close path.
-    // This matches modal.svelte's pattern; without it, ESC would close the
-    // dialog out from under Svelte's `open` state for one tick.
-    event.preventDefault();
-    requestClose();
-  }
-
-  function handleBackdropClick(event: MouseEvent) {
-    if (event.target === dialogElement) {
-      requestClose();
-    }
-  }
-
   onDestroy(() => {
-    cancelPendingClose?.();
-    cancelPendingClose = null;
-    const wasOpen = releaseScrollLock !== null || releaseEscape !== null;
-    if (releaseScrollLock) {
-      releaseScrollLock();
-      releaseScrollLock = null;
-    }
-    if (releaseEscape) {
-      releaseEscape();
-      releaseEscape = null;
-    }
-    if (wasOpen) {
-      returnFocus();
-    }
+    dialogState.destroy();
   });
 </script>
 
-{#if hydrated}
+{#if dialogState.hydrated}
   <dialog
     {...rest}
     bind:this={dialogElement}
     class={classNames('cinder-drawer', className)}
     aria-modal="true"
     aria-labelledby={ariaLabelledBy ?? titleId}
-    data-cinder-closing={isClosing ? '' : undefined}
-    onclose={handleClose}
-    oncancel={handleNativeCancel}
-    onclick={handleBackdropClick}
+    data-cinder-closing={dialogState.isClosing ? '' : undefined}
+    onclose={() => dialogState.handleClose()}
+    oncancel={(event) => dialogState.handleNativeCancel(event)}
+    onclick={(event) => dialogState.handleBackdropClick(event)}
   >
     {#snippet closeButton()}
       <button
         type="button"
         class="cinder-drawer__close"
         aria-label="Close drawer"
-        onclick={requestClose}
+        onclick={() => dialogState.requestClose()}
       >
         <svg
           class="cinder-drawer__close-icon"
@@ -268,7 +149,7 @@
       </button>
     {/snippet}
 
-    {#if renderPanel}
+    {#if dialogState.renderPanel}
       <!--
         The native <dialog> (showModal) traps focus in supporting browsers; the
         shared focus-trap is the defence-in-depth fallback and owns initial focus.
@@ -281,10 +162,10 @@
         class="cinder-drawer__panel"
         data-cinder-side={activeSide}
         data-cinder-size={size}
-        data-cinder-closing={isClosing ? '' : undefined}
-        inert={isClosing}
+        data-cinder-closing={dialogState.isClosing ? '' : undefined}
+        inert={dialogState.isClosing}
         {@attach createFocusTrap({
-          active: () => open && !isClosing,
+          active: () => open && !dialogState.isClosing,
           restoreFocus: false,
           initialFocus: resolveInitialFocus,
         })}

package/src/components/dropdown/dropdown.css

@@ -93,7 +93,7 @@
     border-radius: var(--cinder-radius-md);
     background: var(--cinder-surface-raised);
     color: var(--cinder-text);
-    box-shadow: var(--cinder-shadow-lg);
+    box-shadow: var(--cinder-shadow-overlay);
   }
 
   .cinder-dropdown__menu {
@@ -265,10 +265,16 @@
       position: fixed;
       inset: auto;
       top: calc(anchor(bottom) + var(--cinder-space-1));
+      left: auto;
       right: anchor(right);
       position-try-fallbacks: flip-block, flip-inline;
     }
 
+    .cinder-dropdown-menu[popover][dir='rtl'] {
+      right: auto;
+      left: anchor(left);
+    }
+
     .cinder-dropdown__menu[popover] {
       position: fixed;
       margin: 0;

package/src/components/dropdown/dropdown.types.ts

@@ -8,6 +8,9 @@ export type DropdownContext = {
   get isOpen(): boolean;
   get supportsPopover(): boolean;
   readonly anchorElement?: HTMLElement | null | undefined;
+  readonly fallbackAnchorElement?: HTMLElement | null | undefined;
+  readonly fallbackPositionStyle?: string | undefined;
+  readonly fallbackPositionReady?: boolean | undefined;
   readonly fallbackPlacement?: Placement | undefined;
   readonly widthMode?: AnchoredOverlayWidthMode | undefined;
   readonly initialFocus?: 'first' | 'last' | 'none' | undefined;

package/src/components/dropdown-group/README.md

@@ -26,12 +26,12 @@ Accessible group boundary that clusters related dropdown-item rows inside a drop
 
 <!-- generated:props:start -->
 
-| Prop         | Type       | Required | Default | Description                                                                                                                            |
-| ------------ | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| `ariaLabel`  | `string`   | no       | —       | Accessible label for the group, applied as aria-label. Provide exactly one of `ariaLabel` or `labelledBy`.                             |
-| `class`      | `string`   | no       | —       | Additional class names merged onto the group root.                                                                                     |
-| `labelledBy` | `string`   | no       | —       | ID of an existing element whose text labels the group, applied as aria-labelledby. Provide exactly one of `ariaLabel` or `labelledBy`. |
-| `children`   | `(opaque)` | no       | —       | DropdownLabel plus grouped DropdownItem rows. Not expressible in JSON Schema; see the component types for the signature.               |
+| Prop         | Type       | Required | Default | Description                                                                                                                        |
+| ------------ | ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `class`      | `string`   | no       | —       | Additional class names merged onto the group root.                                                                                 |
+| `label`      | `string`   | no       | —       | Accessible label for the group, applied as aria-label. Provide exactly one of `label` or `labelledBy`.                             |
+| `labelledBy` | `string`   | no       | —       | ID of an existing element whose text labels the group, applied as aria-labelledby. Provide exactly one of `label` or `labelledBy`. |
+| `children`   | `(opaque)` | no       | —       | DropdownLabel plus grouped DropdownItem rows. Not expressible in JSON Schema; see the component types for the signature.           |
 
 <!-- generated:props:end -->
 

package/src/components/dropdown-group/dropdown-group.svelte

@@ -23,14 +23,14 @@
   let {
     class: customClassName,
     children,
-    ariaLabel,
+    label,
     labelledBy,
     ...rest
   }: DropdownGroupProps = $props();
 
   function normalizeAccessibleName(
     value: string | undefined,
-    propertyName: 'ariaLabel' | 'labelledBy',
+    propertyName: 'label' | 'labelledBy',
   ): string | undefined {
     if (value === undefined) return undefined;
     const trimmedValue = value.trim();
@@ -41,23 +41,23 @@
   }
 
   // Resolve and validate the accessible name at render time so all three
-  // invariants — non-empty ariaLabel, non-empty labelledBy, and exactly one of
+  // invariants — non-empty label, non-empty labelledBy, and exactly one of
   // the two — are enforced in a single place on both server and client, rather
   // than splitting the exclusivity check into a post-paint, SSR-skipped $effect.
   const resolvedAccessibleName = $derived.by(() => {
-    const trimmedAriaLabel = normalizeAccessibleName(ariaLabel, 'ariaLabel');
+    const trimmedLabel = normalizeAccessibleName(label, 'label');
     const trimmedLabelledBy = normalizeAccessibleName(labelledBy, 'labelledBy');
 
-    const namedByLabel = trimmedAriaLabel !== undefined;
+    const namedByLabel = trimmedLabel !== undefined;
     const namedByReference = trimmedLabelledBy !== undefined;
 
     if (namedByLabel === namedByReference) {
       throw new Error(
-        'DropdownGroup requires exactly one accessible naming strategy: ariaLabel or labelledBy.',
+        'DropdownGroup requires exactly one accessible naming strategy: label or labelledBy.',
       );
     }
 
-    return { ariaLabel: trimmedAriaLabel, labelledBy: trimmedLabelledBy };
+    return { label: trimmedLabel, labelledBy: trimmedLabelledBy };
   });
 </script>
 
@@ -65,7 +65,7 @@
   {...rest}
   class={classNames('cinder-dropdown-group', customClassName)}
   role="group"
-  aria-label={resolvedAccessibleName.ariaLabel}
+  aria-label={resolvedAccessibleName.label}
   aria-labelledby={resolvedAccessibleName.labelledBy}
 >
   {#if children}

package/src/components/dropdown-group/dropdown-group.types.ts

@@ -14,13 +14,13 @@ type DropdownGroupBaseProps = Omit<
 export type DropdownGroupProps = DropdownGroupBaseProps &
   (
     | {
-        /** Accessible label for the group, applied as aria-label. Provide exactly one of `ariaLabel` or `labelledBy`. */
-        ariaLabel: string;
+        /** Accessible label for the group, applied as aria-label. Provide exactly one of `label` or `labelledBy`. */
+        label: string;
         labelledBy?: never;
       }
     | {
-        ariaLabel?: never;
-        /** ID of an existing element whose text labels the group, applied as aria-labelledby. Provide exactly one of `ariaLabel` or `labelledBy`. */
+        label?: never;
+        /** ID of an existing element whose text labels the group, applied as aria-labelledby. Provide exactly one of `label` or `labelledBy`. */
         labelledBy: string;
       }
   );

package/src/components/dropdown-item/README.md

@@ -16,11 +16,13 @@ snippet. The flat `@lostgradient/cinder/dropdown-item` subpath remains exported
 
 | Prop            | Type                                  | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | --------------- | ------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`       | `boolean`                             | no       | —       | Checked state for `itemRole="menuitemradio"`. Omitted for normal menu items.                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | `class`         | `string`                              | no       | —       | Additional class names merged with the component's root class.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `closeOnSelect` | `boolean`                             | no       | —       | When true, the parent dropdown closes after this item is activated. Default `true`.                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `disabled`      | `boolean`                             | no       | —       | When true the item is inert: click is blocked and aria-disabled is set.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `href`          | `string`                              | no       | —       | Destination URL. Any defined value — including an empty string — selects the anchor branch and renders an `<a>`. Omit `href` entirely to render a `<button>`.                                                                                                                                                                                                                                                                                                                                             |
 | `inset`         | `boolean`                             | no       | —       | When true, adds leading padding to align the item with items that have a leading icon or indicator. Default `false`.                                                                                                                                                                                                                                                                                                                                                                                      |
+| `itemRole`      | `"menuitem"` \| `"menuitemradio"`     | no       | —       | ARIA role for the row. Use `menuitemradio` for mutually exclusive menu selections.                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `type`          | `"button"` \| `"submit"` \| `"reset"` | no       | —       | Button type forwarded to the `<button>` element. Defaults to `"button"`. NOTE: `type="submit"` only submits a surrounding `<form>` when the menu stays inside that form's DOM subtree. DropdownMenu portals its panel to `document.body` on the non-popover fallback path, so a submit item is then NOT a form descendant and native submission is skipped. To submit a form from a portaled menu, set `form="<form-id>"` to associate the button with the form by id, or handle submission in `onclick`. |
 | `variant`       | `"default"` \| `"danger"`             | no       | —       | Visual style of the item. Use `danger` to signal a destructive action. Default `default`.                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `children`      | `(opaque)`                            | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                |

package/src/components/dropdown-item/dropdown-item.svelte

@@ -30,6 +30,8 @@
 
   let {
     variant = 'default',
+    itemRole = 'menuitem',
+    checked = false,
     inset = false,
     disabled,
     closeOnSelect = true,
@@ -108,27 +110,27 @@
     event.currentTarget.click();
   }
 
-  const anchorAttributes = rest as Omit<
-    HTMLAnchorAttributes,
-    'class' | 'href' | 'onclick' | 'onkeydown'
-  >;
-  const buttonAttributes = rest as Omit<
-    HTMLButtonAttributes,
-    'class' | 'type' | 'disabled' | 'onclick'
-  >;
+  const anchorAttributes = $derived(
+    rest as Omit<HTMLAnchorAttributes, 'class' | 'href' | 'onclick' | 'onkeydown'>,
+  );
+  const buttonAttributes = $derived(
+    rest as Omit<HTMLButtonAttributes, 'class' | 'type' | 'disabled' | 'onclick'>,
+  );
   const buttonType = $derived((rest as { type?: HTMLButtonAttributes['type'] }).type ?? 'button');
+  const ariaChecked = $derived(itemRole === 'menuitemradio' ? checked : undefined);
 </script>
 
 <!--
   {...rest} is spread BEFORE the component-controlled attributes so a consumer
-  cannot override role="menuitem", tabindex (the roving-focus model), aria-disabled,
+  cannot override the menu role, tabindex (the roving-focus model), aria-disabled,
   or the click handler — overriding any of those would break menu semantics.
 -->
 {#if isLink}
   <a
     {...anchorAttributes}
     {href}
-    role="menuitem"
+    role={itemRole}
+    aria-checked={ariaChecked}
     class={sharedClass}
     data-cinder-variant={variant}
     tabindex={-1}
@@ -145,7 +147,8 @@
   <button
     {...buttonAttributes}
     type={buttonType}
-    role="menuitem"
+    role={itemRole}
+    aria-checked={ariaChecked}
     class={sharedClass}
     data-cinder-variant={variant}
     tabindex={-1}

package/src/components/dropdown-item/dropdown-item.types.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 export type DropdownItemVariant = 'default' | 'danger';
+export type DropdownItemRole = 'menuitem' | 'menuitemradio';
 
 // The shared base carries the common HTML attribute surface — crucially the
 // event handlers (onclick/onkeydown/onfocus/…) — typed against the generic
@@ -12,6 +13,10 @@ export type DropdownItemVariant = 'default' | 'danger';
 type DropdownItemBase = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
   /** Visual style of the item. Use `danger` to signal a destructive action. Default `default`. */
   variant?: DropdownItemVariant;
+  /** ARIA role for the row. Use `menuitemradio` for mutually exclusive menu selections. */
+  itemRole?: DropdownItemRole;
+  /** Checked state for `itemRole="menuitemradio"`. Omitted for normal menu items. */
+  checked?: boolean;
   /** When true, adds leading padding to align the item with items that have a leading icon or indicator. Default `false`. */
   inset?: boolean;
   /** When true, the parent dropdown closes after this item is activated. Default `true`. */

package/src/components/dropdown-menu/dropdown-menu.svelte

@@ -20,6 +20,8 @@
   import { tick } from 'svelte';
 
   import { createAnchoredOverlay } from '../../_internal/anchored-overlay.svelte.ts';
+  import { getLocaleContext } from '../../_internal/locale-context.ts';
+  import { observeTextDirection, resolveTextDirection } from '../../_internal/text-direction.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import {
     getDropdownContext,
@@ -28,22 +30,44 @@
   } from '../dropdown/dropdown.context.ts';
   import { createPortalAttachment } from '../portal/index.ts';
 
-  let { class: customClassName, children, ...rest }: DropdownMenuProps = $props();
+  let { class: customClassName, children, dir: direction, ...rest }: DropdownMenuProps = $props();
 
   const context = getDropdownContext();
   const registerMenu = getDropdownRegister();
   const setOpen = getDropdownSetOpen();
+  const localeContext = getLocaleContext();
+  let directionRevision = $state(0);
+  const resolvedDirection = $derived.by(() => {
+    directionRevision;
+    if (direction === 'auto') {
+      return resolveTextDirection(context.anchorElement, localeContext?.direction) ?? direction;
+    }
+    return direction ?? resolveTextDirection(context.anchorElement, localeContext?.direction);
+  });
+  const fallbackAnchorElement = $derived(
+    context.fallbackAnchorElement === undefined
+      ? context.anchorElement
+      : context.fallbackAnchorElement,
+  );
 
   let menuElement = $state<HTMLDivElement | null>(null);
   let focusedFallbackOpen = false;
   const anchoredFallback = createAnchoredOverlay({
-    open: () => context.isOpen && !context.supportsPopover && Boolean(context.anchorElement),
-    anchor: () => context.anchorElement,
+    open: () => context.isOpen && !context.supportsPopover && Boolean(fallbackAnchorElement),
+    anchor: () => fallbackAnchorElement,
     panel: () => menuElement,
     placement: () => context.fallbackPlacement ?? 'bottom-end',
     offset: () => 4,
     widthMode: () => context.widthMode ?? 'menu',
   });
+  const fallbackPositionStyle = $derived(
+    context.fallbackPositionStyle ??
+      (fallbackAnchorElement ? anchoredFallback.positionStyle : undefined),
+  );
+  const fallbackPositionReady = $derived(
+    context.fallbackPositionReady ??
+      (fallbackAnchorElement ? anchoredFallback.positionReady : undefined),
+  );
   const fallbackPortalAttachment = createPortalAttachment({
     target: () => (typeof document === 'undefined' ? null : document.body),
     source: () => context.anchorElement,
@@ -56,6 +80,13 @@
     return () => registerMenu(null);
   });
 
+  $effect(() => {
+    if (direction && direction !== 'auto') return;
+    return observeTextDirection(context.anchorElement, () => {
+      directionRevision += 1;
+    });
+  });
+
   $effect(() => {
     if (context.supportsPopover || !context.isOpen) {
       focusedFallbackOpen = false;
@@ -71,7 +102,9 @@
     if (!menuElement) return [];
 
     return Array.from(
-      menuElement.querySelectorAll<HTMLElement>('[role="menuitem"]:not([data-disabled])'),
+      menuElement.querySelectorAll<HTMLElement>(
+        '[role="menuitem"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])',
+      ),
     ).filter((item) => item.closest('[role="menu"]') === menuElement);
   }
 
@@ -141,19 +174,19 @@
     class={classNames('cinder-_floating-surface', 'cinder-dropdown-menu', customClassName)}
     style={context.supportsPopover
       ? `position-anchor: --${context.menuId};`
-      : context.anchorElement
-        ? anchoredFallback.positionStyle
-        : undefined}
+      : fallbackPositionStyle}
     role="menu"
     aria-orientation="vertical"
-    data-cinder-position-ready={!context.supportsPopover && context.anchorElement
-      ? anchoredFallback.positionReady
+    data-cinder-position-ready={!context.supportsPopover && fallbackPositionReady !== undefined
+      ? fallbackPositionReady
       : undefined}
     tabindex={-1}
     onkeydown={handleKeydown}
     ontoggle={context.supportsPopover ? handleToggle : undefined}
     {@attach fallbackPortalAttachment}
     {...rest}
+    dir={resolvedDirection}
+    data-cinder-explicit-direction={resolvedDirection ? 'true' : undefined}
   >
     {#if children}
       {@render children()}

package/src/components/dropdown-trigger/dropdown-trigger.svelte

@@ -36,12 +36,10 @@
   const registerTrigger = getDropdownRegisterTrigger();
   const setOpen = getDropdownSetOpen();
 
-  let triggerElement = $state<HTMLButtonElement | null>(null);
-
-  $effect(() => {
-    registerTrigger(triggerElement);
+  function attachTrigger(node: HTMLButtonElement) {
+    registerTrigger(node);
     return () => registerTrigger(null);
-  });
+  }
 
   type DropdownTriggerClickHandler = (
     event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement },
@@ -60,7 +58,7 @@
 </script>
 
 <button
-  bind:this={triggerElement}
+  {@attach attachTrigger}
   type="button"
   class={classNames('cinder-dropdown-trigger', customClassName)}
   style={`anchor-name: --${context.menuId};`}