SettleModal

5.7 KB gzip for the class module

Variants

Recorded states

• open recorded state; no setter
• closed recorded state; no setter
• reduced motion recorded state; no setter

Usage

Import

import '/components/settle-modal/define.js';

// or register it yourself
import { DetentSettleModal } from '/components/settle-modal/settle-modal.js';

Attributes

• close-on-backdrop
• hide-close-button
• open
• size

Properties

• onClose

Slots

• default
• description
• footer
• title

Events

• detent-close — {}

Example

Runnable example: site/examples/settle-modal.ts. The snippet below is generated from the catalogued attributes.

<detent-settle-modal
  close-on-backdrop
  hide-close-button
  open
  size="md"
></detent-settle-modal>

Property-only values

const element = document.querySelector('detent-settle-modal');
if (element !== null) {
  // onClose: () => void
  element.onClose = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/SettleModal.tsx sha256 63738cebe3c5…

Native files

The native module and its artifacts:

• src/components/settle-modal/settle-modal.ts
• src/components/settle-modal/styles.css
• src/components/settle-modal/define.ts
• docs/components/settle-modal.md
• site/examples/settle-modal.ts
• tests/browser/settle-modal.spec.ts
• evidence/components/settle-modal.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Properties

Events

Slots

CSS customisation

• React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
• React callback props become typed composed CustomEvents; programmatic state assignment emits none.
• Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
• `lucide-react` icon components replaced with local SVG assets (ISC notice retained).
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• onClose becomes the composed detent-close event with detail: {} and no cancelable/extra fields (PC-6.2/6.3). The onClose property is not part of the native surface.
• React nodes become slots. title, description, children and footer are named/default slots; the title is a real <h2> and the description a real <p>. className is replaced by documented parts and custom properties.
• A native modal <dialog> replaces the fixed inset-0 z-50 div. That buys the top layer, real inertness, native cancel for Escape and native focus containment across engines (PC-9.8/12.1/12.4). Upstream implemented none of the focus management its catalog accessibility entries claim.
• Framer Motion becomes WAAPI keyframes with the recorded durations/curves. The three-layer choreography (panel overshoot, inner layer with its 0.05 s delay, backdrop fade) is preserved; interruption cancels and restarts instead of resuming a stale timeline; reduced motion skips it entirely (PC-10.1/10.4/10.5).
• Scroll lock compensates the scrollbar width. Upstream only set document.body.style.overflow, which shifts the page by the scrollbar width on desktop. This port locks the document element and adds the measured padding-right (recorded upstream requirement, PC-12.6 correction).
• Palette from tokens. Upstream used var(--surface)-style variables its dark-only site defined; this port reads --detent-color-* with light fallbacks so both schemes are legible (PC-9.5).
• lucide-react's X is a local decorative inline SVG (PC-11.5).
• No data-state attribute is invented: the documented states are observable through open and the native dialog's own open attribute.