@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/popover/popover.svelte

@@ -0,0 +1,253 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { onDestroy, untrack } from 'svelte';
+import { createAnchoredOverlay } from '../../_internal/anchored-overlay.svelte.ts';
+import { captureFocus, pushEscapeHandler } from '../../_internal/overlay.ts';
+import { devWarn } from '../../utilities/dev-warn.ts';
+import { classNames } from '../../utilities/class-names.ts';
+import { restoreFocusTo } from '../../utilities/focus.ts';
+import { createClickOutside } from '../../utilities/attachments.ts';
+import { createPortalAttachment } from '../portal/index.ts';
+let { id: panelIdProp, open = $bindable(false), placement = 'bottom-start', offset = 8, showArrow = false, label, ariaLabelledby, triggerRef = null, trigger, children, role = 'dialog', focusManagement = 'panel', wireTriggerAria = true, closeOnEscape = true, widthMode = 'content', class: className, } = $props();
+const FOCUSABLE_SELECTOR = 'button:not([disabled]), a[href], [tabindex]:not([tabindex="-1"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled])';
+function findFirstFocusable(container) {
+    if (!container)
+        return null;
+    const candidates = container.querySelectorAll(FOCUSABLE_SELECTOR);
+    for (const el of candidates) {
+        if (el.closest('[hidden], [inert], [aria-hidden="true"]'))
+            continue;
+        return el;
+    }
+    return null;
+}
+let triggerWrapper = $state();
+let panelElement = $state();
+let arrowElement = $state();
+const generatedPanelId = $props.id();
+const panelId = $derived(panelIdProp ?? generatedPanelId);
+// `triggerRef.isConnected` is a native DOM read, not a reactive source: this
+// derived only re-evaluates when the triggerRef prop reference changes, not when
+// the same element is detached/re-attached without a prop change. That edge is
+// not supported — pass a fresh ref (or toggle it) to re-resolve the anchor.
+const anchorElement = $derived(triggerRef && triggerRef.isConnected
+    ? triggerRef
+    : (findFirstFocusable(triggerWrapper) ?? null));
+const resolvedAriaLabel = $derived(ariaLabelledby ? undefined : role === 'dialog' ? (label ?? 'Popover') : label);
+// mounted gates the panel render so SSR emits empty markup regardless of
+// open. See _internal/OVERLAY-POLICY.md ("SSR rule").
+let mounted = $state(false);
+let capturedFocus = null;
+let resolvedAnchorAtOpen = null;
+let pendingInitialFocus = $state(false);
+let openSessionFocusManagement = $state('panel');
+let isDestroyed = false;
+onDestroy(() => {
+    isDestroyed = true;
+});
+const portalAttachment = createPortalAttachment({
+    target: () => document.body,
+    inheritAttributes: true,
+    source: () => anchorElement ?? null,
+});
+const anchoredOverlay = createAnchoredOverlay({
+    open: () => open,
+    anchor: () => anchorElement,
+    panel: () => panelElement,
+    arrow: () => arrowElement,
+    placement: () => placement,
+    offset: () => offset,
+    showArrow: () => showArrow,
+    widthMode: () => widthMode,
+});
+$effect(() => {
+    mounted = true;
+});
+const dismissOnOutsideMousedown = $derived(createClickOutside({
+    handler: () => {
+        open = false;
+    },
+    enabled: () => open,
+    eventType: 'mousedown',
+    capture: true,
+    // Use the open-time snapshot so a swapped/removed trigger does not cause
+    // unexpected close when the user mouses down on the original opener.
+    ignoreRefs: [() => resolvedAnchorAtOpen ?? null],
+}));
+function moveFocusIntoPanel() {
+    if (isDestroyed || !panelElement)
+        return;
+    const focusable = findFirstFocusable(panelElement);
+    (focusable ?? panelElement).focus();
+}
+// Effect: open lifecycle (captures focus, registers Escape + outside-mousedown).
+// Gated on anchorElement so a no-anchor open session does not push onto the
+// shared escape stack or steal mousedowns from other visible overlays — the
+// panel itself won't render without an anchor.
+$effect(() => {
+    if (!open)
+        return;
+    if (!anchorElement)
+        return;
+    // Snapshot focusManagement at open time. untrack so a consumer changing the
+    // prop while open (even via a parent re-render) does not tear down and re-run
+    // this effect — matching the resolvedAnchorAtOpen snapshot below.
+    openSessionFocusManagement = untrack(() => focusManagement);
+    if (openSessionFocusManagement === 'panel') {
+        capturedFocus = captureFocus();
+        pendingInitialFocus = true;
+    }
+    else {
+        capturedFocus = null;
+        pendingInitialFocus = false;
+    }
+    // Snapshot the anchor at open time. untrack so anchor/trigger changes while
+    // open don't retrigger this effect; positioning rebind is the positioning
+    // effect's responsibility.
+    resolvedAnchorAtOpen = untrack(() => anchorElement);
+    // Skip the Escape registration entirely when a parent owns Escape (e.g.
+    // Combobox passes closeOnEscape={false}); registering here would put the
+    // Popover on top of the shared stack and shadow the parent's handler while
+    // options are visible.
+    const releaseEscape = closeOnEscape
+        ? pushEscapeHandler(() => {
+            open = false;
+        })
+        : () => { };
+    return () => {
+        releaseEscape();
+        pendingInitialFocus = false;
+        if (isDestroyed) {
+            capturedFocus = null;
+            resolvedAnchorAtOpen = null;
+            return;
+        }
+        if (openSessionFocusManagement === 'panel') {
+            // Preserve the 3-candidate priority order; the shared helper enforces
+            // the per-candidate connection/ownership check so we no longer need
+            // the inline `.isConnected` guards.
+            const candidates = [
+                triggerRef,
+                resolvedAnchorAtOpen,
+                capturedFocus,
+            ];
+            for (const candidate of candidates) {
+                if (restoreFocusTo(candidate))
+                    break;
+            }
+        }
+        capturedFocus = null;
+        resolvedAnchorAtOpen = null;
+    };
+});
+// Effect: state-driven initial-focus move. Fires once per open session when
+// the panel mounts, the anchor resolves, and positioning is ready — so focus
+// never lands in invisible content.
+$effect(() => {
+    if (isDestroyed)
+        return;
+    if (openSessionFocusManagement !== 'panel')
+        return;
+    if (!open ||
+        !panelElement ||
+        !anchorElement ||
+        !anchoredOverlay.positionReady ||
+        !pendingInitialFocus) {
+        return;
+    }
+    moveFocusIntoPanel();
+    pendingInitialFocus = false;
+});
+// Effect: dev-only guidance warnings. Single effect, fires on each open
+// transition; the cost of repeat warnings is acceptable for dev mode.
+$effect(() => {
+    if (!open)
+        return;
+    if (!anchorElement) {
+        devWarn('[cinder/popover] open without a trigger anchor. ' +
+            'Provide either a `trigger` snippet with a focusable child or a `triggerRef`.');
+    }
+    if (role === 'dialog' && !label && !ariaLabelledby) {
+        devWarn('[cinder/popover] role="dialog" without `label` or `ariaLabelledby` falls back to ' +
+            'aria-label="Popover". Pass a descriptive name for production usage.');
+    }
+    if (role === 'listbox' && wireTriggerAria) {
+        devWarn('[cinder/popover] role="listbox" only sets the surface role. ' +
+            'You must render role="option" children and own selection/keyboard semantics. ' +
+            'See popover.a11y.md §Role.');
+    }
+});
+// Effect: trigger ARIA wiring. Captures pre-existing values and restores on
+// teardown so consumers can manage their own attributes through changes.
+$effect(() => {
+    if (!wireTriggerAria)
+        return;
+    const target = anchorElement;
+    if (!target)
+        return;
+    const prior = {
+        expanded: target.getAttribute('aria-expanded'),
+        controls: target.getAttribute('aria-controls'),
+        haspopup: target.getAttribute('aria-haspopup'),
+    };
+    target.setAttribute('aria-expanded', String(open));
+    const mappedHaspopup = role === 'group' ? null : role === 'listbox' ? 'listbox' : 'dialog';
+    if (mappedHaspopup)
+        target.setAttribute('aria-haspopup', mappedHaspopup);
+    else
+        target.removeAttribute('aria-haspopup');
+    if (open)
+        target.setAttribute('aria-controls', panelId);
+    else
+        target.removeAttribute('aria-controls');
+    return () => {
+        for (const [name, value] of Object.entries({
+            'aria-expanded': prior.expanded,
+            'aria-controls': prior.controls,
+            'aria-haspopup': prior.haspopup,
+        })) {
+            if (value === null)
+                target.removeAttribute(name);
+            else
+                target.setAttribute(name, value);
+        }
+    };
+});
+</script>
+
+{#if trigger}
+  <div bind:this={triggerWrapper} class="cinder-popover__trigger">
+    {@render trigger()}
+  </div>
+{/if}
+
+{#if mounted && open && anchorElement}
+  <div
+    bind:this={panelElement}
+    {@attach portalAttachment}
+    {@attach dismissOnOutsideMousedown}
+    id={panelId}
+    {role}
+    aria-label={resolvedAriaLabel}
+    aria-labelledby={ariaLabelledby}
+    aria-hidden={anchoredOverlay.positionReady ? undefined : 'true'}
+    class={classNames('cinder-_floating-surface', 'cinder-popover', className)}
+    data-cinder-placement={anchoredOverlay.resolvedPlacement}
+    data-cinder-position-ready={anchoredOverlay.positionReady}
+    style={anchoredOverlay.positionStyle}
+    tabindex="-1"
+  >
+    {@render children()}
+    {#if showArrow}
+      <span
+        bind:this={arrowElement}
+        class="cinder-popover__arrow"
+        aria-hidden="true"
+        style={anchoredOverlay.arrowStyle}
+      ></span>
+    {/if}
+  </div>
+{/if}

package/src/components/popover/popover.types.ts

@@ -0,0 +1,60 @@
+import type { Snippet } from 'svelte';
+/**
+ * Input placements accepted by the `placement` prop. Floating-ui's `flip`
+ * middleware may resolve the panel to any of the 12 standard placements at
+ * runtime — the resolved value is exposed on `data-cinder-placement` and is
+ * typed internally as floating-ui's full `Placement` union. The four
+ * diagonal-side variants (`right-start`, `right-end`, `left-start`,
+ * `left-end`) are intentionally omitted from this public input union; pass
+ * `right` or `left` as the starting hint and let flip refine if needed.
+ */
+export type PopoverPlacement =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end';
+export type PopoverRole = 'dialog' | 'group' | 'listbox';
+export type PopoverFocusManagement = 'panel' | 'preserve';
+export type PopoverWidthMode = 'content' | 'match-anchor' | 'menu' | 'none';
+export type PopoverProps = {
+  /** Optional panel id. Defaults to a generated `cinder-popover-*` id. */
+  id?: string;
+  /** Open state. Bindable. Default `false`. */
+  open?: boolean;
+  /** Anchor placement. Default `'bottom-start'`. */
+  placement?: PopoverPlacement;
+  /** Distance in px between trigger and panel. Default `8`. */
+  offset?: number;
+  /** Render a directional arrow on the panel. Default `false`. */
+  showArrow?: boolean;
+  /** Accessible name. Sets `aria-label` when `ariaLabelledby` is not supplied. */
+  label?: string;
+  /** Id of an element labelling the panel. Wins over `label`. */
+  ariaLabelledby?: string;
+  /** Explicit anchor element. Wins over the snippet-resolved focusable. */
+  triggerRef?: HTMLElement | null;
+  /** Panel content. Required. */
+  children: Snippet;
+  /** Optional trigger snippet rendered inside a wrapper. */
+  trigger?: Snippet;
+  /** ARIA role for the panel. Default `'dialog'`. */
+  role?: PopoverRole;
+  /** Focus behavior for each open session. Default `'panel'`. */
+  focusManagement?: PopoverFocusManagement;
+  /** Whether Popover owns trigger ARIA wiring. Default `true`. */
+  wireTriggerAria?: boolean;
+  /**
+   * Whether Escape closes the Popover. Default `true`. Set `false` when a parent
+   * composite widget (e.g. Combobox) owns Escape for the whole interaction, so the
+   * Popover does not shadow the parent's handler while its panel is open.
+   */
+  closeOnEscape?: boolean;
+  /** Floating panel width strategy. Default `'content'`. */
+  widthMode?: PopoverWidthMode;
+  /** Extra class merged onto `.cinder-popover`. */
+  class?: string;
+};

package/src/components/popover/popover.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/portal/index.ts

@@ -0,0 +1,6 @@
+import Portal from './portal.svelte';
+
+export default Portal;
+export type { PortalAttachmentOptions, PortalProps } from './portal.types.ts';
+export { createPortalAttachment } from './portal.utilities.svelte.ts';
+export { Portal };

package/src/components/portal/portal.schema.ts

@@ -0,0 +1,46 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    target: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      description:
+        'CSS selector string or `null` specifying where the portal content is appended. Defaults to `document.body` when `null` or omitted.',
+    },
+    disabled: {
+      type: 'boolean',
+      description:
+        'When true, renders the content inline in normal document flow instead of teleporting it to the target.',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class applied to the portal wrapper element.',
+    },
+    inheritAttributes: {
+      type: 'boolean',
+      description:
+        'When true (default), HTML attributes passed to the portal are forwarded onto the wrapper element inside the target.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/portal/portal.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+import { createPortalAttachment, resolvePortalTarget } from './portal.utilities.svelte.ts';
+let { target = null, disabled = false, class: className, inheritAttributes = true, children, ...rest } = $props();
+let hasHydrated = $state(false);
+$effect(() => {
+    hasHydrated = true;
+});
+const resolvedTarget = $derived(!disabled ? resolvePortalTarget(target) : null);
+const shouldRenderChildren = $derived(disabled || (hasHydrated && resolvedTarget !== null));
+</script>
+
+<div
+  {@attach createPortalAttachment({
+    target: () => target,
+    disabled: () => disabled,
+    inheritAttributes: () => inheritAttributes,
+    explicitAttributes: () => ({
+      dir: rest.dir,
+      dataTheme: rest['data-theme'],
+      theme: rest['data-cinder-theme'],
+    }),
+  })}
+  class={classNames(className)}
+  {...rest}
+>
+  {#if shouldRenderChildren}
+    {@render children()}
+  {/if}
+</div>

package/src/components/portal/portal.types.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+import type { PortalAttachmentOptions, PortalTargetInput } from './portal.utilities.svelte.ts';
+
+export type PortalProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
+  children: Snippet;
+  target?: PortalTargetInput;
+  disabled?: boolean;
+  class?: string;
+  inheritAttributes?: boolean;
+};
+
+export interface PortalSchemaProps {
+  /** CSS selector string or `null` specifying where the portal content is appended. Defaults to `document.body` when `null` or omitted. */
+  target?: string | null;
+  /** When true, renders the content inline in normal document flow instead of teleporting it to the target. */
+  disabled?: boolean;
+  /** Additional class applied to the portal wrapper element. */
+  class?: string;
+  /** When true (default), HTML attributes passed to the portal are forwarded onto the wrapper element inside the target. */
+  inheritAttributes?: boolean;
+}
+
+export type { PortalAttachmentOptions };

package/src/components/portal/portal.utilities.svelte.ts

@@ -0,0 +1,211 @@
+import { devWarn } from '../../utilities/dev-warn.ts';
+import { readOption } from '../../utilities/read-option.ts';
+export function resolvePortalTarget(target) {
+    if (typeof document === 'undefined')
+        return null;
+    if (target == null) {
+        return { kind: 'resolved', target: document.body };
+    }
+    if (target instanceof HTMLElement) {
+        return { kind: 'resolved', target };
+    }
+    try {
+        const resolved = document.querySelector(target);
+        return resolved instanceof HTMLElement
+            ? { kind: 'resolved', target: resolved }
+            : { kind: 'unresolved', key: target };
+    }
+    catch {
+        return { kind: 'unresolved', key: target };
+    }
+}
+export function copyInheritedPortalAttributes(element, source, inheritAttributes, fallbackAttributes = {
+    dir: element.getAttribute('dir'),
+    dataTheme: element.getAttribute('data-theme'),
+    theme: element.getAttribute('data-cinder-theme'),
+}) {
+    const preservesExplicitDirection = fallbackAttributes.preserveDirection || element.dataset['cinderExplicitDirection'] === 'true';
+    const inheritedDir = inheritAttributes && source && !preservesExplicitDirection
+        ? source.closest('[dir]')?.getAttribute('dir')
+        : null;
+    const nextDir = inheritedDir ?? fallbackAttributes.dir;
+    if (nextDir) {
+        element.setAttribute('dir', nextDir);
+    }
+    else {
+        element.removeAttribute('dir');
+    }
+    const preservesExplicitDataTheme = fallbackAttributes.preserveDataTheme === true;
+    const inheritedDataTheme = inheritAttributes &&
+        source &&
+        !preservesExplicitDataTheme &&
+        fallbackAttributes.dataTheme === null
+        ? source.closest('[data-theme]')?.getAttribute('data-theme')
+        : null;
+    const nextDataTheme = inheritedDataTheme ?? fallbackAttributes.dataTheme;
+    if (nextDataTheme) {
+        element.setAttribute('data-theme', nextDataTheme);
+    }
+    else {
+        element.removeAttribute('data-theme');
+    }
+    const preservesExplicitTheme = fallbackAttributes.preserveTheme === true;
+    const inheritedTheme = inheritAttributes && source && !preservesExplicitTheme && fallbackAttributes.theme === null
+        ? source.closest('[data-cinder-theme]')?.getAttribute('data-cinder-theme')
+        : null;
+    const nextTheme = inheritedTheme ?? fallbackAttributes.theme;
+    if (nextTheme) {
+        element.setAttribute('data-cinder-theme', nextTheme);
+    }
+    else {
+        element.removeAttribute('data-cinder-theme');
+    }
+    return {
+        dir: inheritedDir ?? null,
+        dataTheme: inheritedDataTheme ?? null,
+        theme: inheritedTheme ?? null,
+    };
+}
+function observeInheritedPortalAttributes(source, inheritAttributes, syncAttributes) {
+    if (!inheritAttributes || !source || typeof MutationObserver === 'undefined')
+        return null;
+    const observer = new MutationObserver(() => {
+        syncAttributes();
+    });
+    function observe(elementToObserve) {
+        if (!elementToObserve || observedElements.includes(elementToObserve))
+            return;
+        observedElements.push(elementToObserve);
+        observer.observe(elementToObserve, {
+            attributes: true,
+            attributeFilter: ['dir', 'data-theme', 'data-cinder-theme'],
+        });
+    }
+    const observedElements = [];
+    let ancestor = source;
+    while (ancestor) {
+        observe(ancestor);
+        ancestor = ancestor.parentElement;
+    }
+    observe(document.documentElement);
+    return () => observer.disconnect();
+}
+export function createPortalAttachment(options = {}) {
+    let lastWarnedUnresolvedKey = null;
+    return (element) => {
+        // Capture the *original* parentElement once, before any mounting moves the wrapper. After
+        // `appendChild`, `element.parentElement` becomes the portal target — which would defeat the
+        // "inherit dir/data-theme/data-cinder-theme from the trigger subtree" contract.
+        const initialParent = element.parentElement;
+        const initialAttributes = {
+            dir: element.getAttribute('dir'),
+            dataTheme: element.getAttribute('data-theme'),
+            theme: element.getAttribute('data-cinder-theme'),
+        };
+        const managedAttributes = {
+            dir: null,
+            dataTheme: null,
+            theme: null,
+        };
+        function currentFallbackAttributes() {
+            const explicitAttributes = readOption(options.explicitAttributes ?? {});
+            const explicitDirection = explicitAttributes.dir;
+            const explicitDataTheme = explicitAttributes.dataTheme;
+            const explicitTheme = explicitAttributes.theme;
+            const direction = element.getAttribute('dir');
+            const dataTheme = element.getAttribute('data-theme');
+            const theme = element.getAttribute('data-cinder-theme');
+            return {
+                dir: explicitDirection !== undefined
+                    ? explicitDirection
+                    : direction !== managedAttributes.dir
+                        ? direction
+                        : initialAttributes.dir,
+                preserveDirection: explicitDirection !== undefined,
+                dataTheme: explicitDataTheme !== undefined
+                    ? explicitDataTheme
+                    : dataTheme !== managedAttributes.dataTheme
+                        ? dataTheme
+                        : null,
+                preserveDataTheme: explicitDataTheme !== undefined,
+                theme: explicitTheme !== undefined
+                    ? explicitTheme
+                    : theme !== managedAttributes.theme
+                        ? theme
+                        : null,
+                preserveTheme: explicitTheme !== undefined,
+            };
+        }
+        function syncInheritedAttributes(source, inheritAttributes) {
+            const nextManagedAttributes = copyInheritedPortalAttributes(element, source, inheritAttributes, currentFallbackAttributes());
+            managedAttributes.dir = nextManagedAttributes.dir;
+            managedAttributes.dataTheme = nextManagedAttributes.dataTheme;
+            managedAttributes.theme = nextManagedAttributes.theme;
+        }
+        // Drop a placeholder comment at the wrapper's original location. When `disabled` flips true or
+        // the target can no longer be resolved, the wrapper is reinserted at this anchor so children
+        // stay rendered in the original document position. Without this, `$effect` cleanup detaches
+        // the wrapper and nothing reattaches it — content silently disappears.
+        const anchor = typeof document !== 'undefined'
+            ? document.createComment('@lostgradient/cinder/portal')
+            : null;
+        if (anchor && initialParent && element.parentNode === initialParent) {
+            initialParent.insertBefore(anchor, element);
+        }
+        function restoreInline() {
+            if (!anchor || !anchor.parentNode)
+                return;
+            if (element.parentNode === anchor.parentNode && element.previousSibling === anchor)
+                return;
+            anchor.parentNode.insertBefore(element, anchor.nextSibling);
+        }
+        // Nest the reads inside `$effect` so getter-based options are tracked reactively. Each rerun
+        // detaches the previous mount before re-resolving — this guards against the wrapper being
+        // stranded in the old target when `target` changes or `disabled` flips true.
+        $effect(() => {
+            let stopObservingInheritedAttributes = null;
+            const disabled = readOption(options.disabled ?? false);
+            const inheritAttributes = readOption(options.inheritAttributes ?? true);
+            const targetValue = readOption(options.target ?? null);
+            const attributeSource = readOption(options.source ?? initialParent) ?? initialParent;
+            const resolved = disabled ? null : resolvePortalTarget(targetValue);
+            if (!disabled && resolved?.kind === 'resolved') {
+                syncInheritedAttributes(attributeSource, inheritAttributes);
+                stopObservingInheritedAttributes = observeInheritedPortalAttributes(attributeSource, inheritAttributes, () => syncInheritedAttributes(attributeSource, inheritAttributes));
+                resolved.target.appendChild(element);
+                lastWarnedUnresolvedKey = null;
+            }
+            else if (!disabled && resolved?.kind === 'unresolved') {
+                // Target unresolved: keep the wrapper inline at the anchor so children remain rendered
+                // (with a dev warning) instead of vanishing from the DOM entirely.
+                restoreInline();
+                syncInheritedAttributes(null, false);
+                if (lastWarnedUnresolvedKey !== resolved.key) {
+                    devWarn(`[cinder/portal] could not resolve portal target ${JSON.stringify(resolved.key)}.`);
+                    lastWarnedUnresolvedKey = resolved.key;
+                }
+            }
+            else if (disabled) {
+                // Disabled path: wrapper must stay in (or return to) its original position, not be left
+                // detached. The Portal component's template still renders children in this mode.
+                restoreInline();
+                syncInheritedAttributes(null, false);
+                lastWarnedUnresolvedKey = null;
+            }
+            return () => {
+                stopObservingInheritedAttributes?.();
+                // Idempotent: only remove if still connected somewhere. Tolerates external removal of the
+                // wrapper between mount and cleanup. The anchor stays put so the next re-run can reinsert.
+                if (element.isConnected) {
+                    element.remove();
+                }
+            };
+        });
+        return () => {
+            // Final cleanup: also remove the anchor so we don't leave orphan comment nodes behind.
+            if (anchor && anchor.parentNode) {
+                anchor.parentNode.removeChild(anchor);
+            }
+        };
+    };
+}

package/src/components/portal/portal.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/pricing-card/index.ts

@@ -0,0 +1,6 @@
+import './pricing-card.css';
+import PricingCard from './pricing-card.svelte';
+
+export default PricingCard;
+export type { PricingCardProps } from './pricing-card.types.ts';
+export { PricingCard };