Pull to Refresh

11.5 KB gzip for the class module · inlines the shared spring

Variants

Recorded states

• pressed recorded state; no setter
• disabled recorded state; no setter
• loading recorded state; no setter
• dark theme recorded state; no setter
• reduced motion recorded state; no setter
• completed recorded state; no setter

Usage

Import

import '/components/pull-to-refresh/define.js';

// or register it yourself
import { DetentPullToRefresh } from '/components/pull-to-refresh/pull-to-refresh.js';

Attributes

• change
• context
• disabled
• is-refreshing
• main-value
• max-pull
• refreshing-hold-offset
• resistance
• selected-time-range
• show-actions
• show-default-indicator
• show-metrics
• threshold

Properties

• dataMap
• onActionClick
• onRefresh
• onTimeRangeChange
• pullIndicator
• timeRanges

Slots

• default

Events

• detent-refresh — {}
• detent-time-range-change — {}
• detent-action-click — {}

Example

Runnable example: site/examples/pull-to-refresh.ts. The snippet below is generated from the catalogued attributes.

<detent-pull-to-refresh
  change
  context
  disabled
  is-refreshing
  main-value
  max-pull="110"
  refreshing-hold-offset="48"
  resistance="0.45"
  selected-time-range
  show-actions
  show-default-indicator
  show-metrics
  threshold="68"
></detent-pull-to-refresh>

Property-only values

const element = document.querySelector('detent-pull-to-refresh');
if (element !== null) {
  // onRefresh: () => Promise<void> | void
  element.onRefresh = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/PullToRefresh.tsx sha256 9352188b212a…

Native files

The native module and its artifacts:

• src/components/pull-to-refresh/pull-to-refresh.ts
• src/components/pull-to-refresh/styles.css
• src/components/pull-to-refresh/define.ts
• docs/components/pull-to-refresh.md
• site/examples/pull-to-refresh.ts
• tests/browser/pull-to-refresh.spec.ts
• evidence/components/pull-to-refresh.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.
• `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.
• pullIndicator is a notification hook, not a render function.
• onRefresh stays awaitable and detent-refresh carries the pinned empty detail; a 1100 ms fallback simulation covers consumers that resolve nothing.
• FinancialStatsCard is the default-slot fallback rendering, not a second tag or slug.
• The layoutId pill morph becomes a 150 ms CSS background/colour transition, and the chart has no draw animation.
• Trend line and muted labels are darkened (light) or lightened (dark) for measured contrast; the upstream up-trend stroke measured 1.07:1.
• Enter also refreshes when the region itself is focused.
• A no-op pull emits no event, and a non-matching pointerId is ignored.
• The upstream data-scrollable="true" hatch is not reproduced because the row does not record it.
• main-value, change and context are attributes while dataMap and timeRanges stay property-only.