@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/in-view.usage.gts

@@ -0,0 +1,264 @@
+// Pretui — InView usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { FreestyleUsage } from './freestyle-usage';
+import { Button } from './button';
+import {
+  AMOUNTS,
+  PLACES,
+  SUPPLIERS,
+  TEAS,
+} from '../examples';
+import { InView, normalizeRootMargin } from './in-view';
+import type { MotionPreset } from '../internal/motion-core';
+import { PRESETS } from '../demo-motion-core';
+
+// ── InView — fresh page (no upstream knob rig) ───────────────────────────
+interface Lot {
+  tea: string;
+  place: string;
+  supplier: string;
+  amount: string;
+}
+
+function lots(count: number): Lot[] {
+  let out: Lot[] = [];
+  for (let i = 0; i < count; i++) {
+    out.push({
+      tea: TEAS[i % TEAS.length] as string,
+      place: PLACES[i % PLACES.length] as string,
+      supplier: SUPPLIERS[i % SUPPLIERS.length] as string,
+      amount: AMOUNTS[i % AMOUNTS.length] as string,
+    });
+  }
+  return out;
+}
+
+class InViewUsage extends Component {
+  @tracked enter: MotionPreset = 'rise';
+  @tracked once = true;
+  @tracked threshold = 0.2;
+  @tracked rootMargin = '0px';
+  @tracked stagger = 0.06;
+  @tracked duration = 0.48;
+  @tracked distance = 14;
+  @tracked run = 0;
+  setEnter = (v: string) => (this.enter = v as MotionPreset);
+  setOnce = (v: boolean) => (this.once = v);
+  setThreshold = (v: number | null) => (this.threshold = v ?? 0.2);
+  setRootMargin = (v: string) => (this.rootMargin = normalizeRootMargin(v));
+  setStagger = (v: number | null) => (this.stagger = v ?? 0.06);
+  setDuration = (v: number | null) => (this.duration = v ?? 0.48);
+  setDistance = (v: number | null) => (this.distance = v ?? 14);
+  replay = () => (this.run = this.run + 1);
+  get runKey(): number[] {
+    return [this.run];
+  }
+  get lots(): Lot[] {
+    return lots(8);
+  }
+  get usage() {
+    let bits = [
+      `@items={{this.lots}}`,
+      `@enter='${this.enter}'`,
+      `@stagger={{${this.stagger}}}`,
+      `@duration={{${this.duration}}}`,
+      `@threshold={{${this.threshold}}}`,
+    ];
+    if (!this.once) bits.push('@once={{false}}');
+    if (this.rootMargin !== '0px') bits.push(`@rootMargin='${this.rootMargin}'`);
+    return `<InView ${bits.join(' ')}>\n  <:item as |lot|>{{lot.tea}}</:item>\n</InView>`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='InView'
+      @description='Entrance choreography that fires when content scrolls into view. An IntersectionObserver inside a modifier flips one attribute; the reveal itself is a CSS transition, and the stagger is a precomputed index × interval delay — no engine, no timers, one style recalc for the whole list. The resting style is the finished state, so a still frame, a prerender or a JavaScript-free render all show real content rather than a blank box. Scroll the panel below to trip it.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='inview-stage'>
+          <div class='inview-scroller'>
+            <p class='inview-hint'>Scroll down — the ledger reveals as it
+              enters.</p>
+            {{#each this.runKey key='@identity' as |run|}}
+              <InView
+                @items={{this.lots}}
+                @enter={{this.enter}}
+                @once={{this.once}}
+                @threshold={{this.threshold}}
+                @rootMargin={{this.rootMargin}}
+                @stagger={{this.stagger}}
+                @duration={{this.duration}}
+                @distance={{this.distance}}
+                class='inview-list'
+                data-run={{run}}
+              >
+                <:item as |lot|>
+                  <div class='inview-row'>
+                    <span class='inview-tea'>{{lot.tea}}</span>
+                    <span class='inview-meta'>{{lot.supplier}}</span>
+                    <span class='inview-amount'>{{lot.amount}}</span>
+                  </div>
+                </:item>
+              </InView>
+            {{/each}}
+          </div>
+          <div class='inview-replay'>
+            <Button
+              @size='xs'
+              @appearance='outlined'
+              {{on 'click' this.replay}}
+            >Replay</Button>
+          </div>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='enter'
+          @defaultValue='fade'
+          @value={{this.enter}}
+          @options={{PRESETS}}
+          @description='Entrance preset, shared vocabulary with Presence: fade, rise, fall, scale, slide.'
+          @onInput={{this.setEnter}}
+        />
+        <Args.Bool
+          @name='once'
+          @defaultValue={{true}}
+          @value={{this.once}}
+          @description='Reveal once and disconnect the observer (the default, and the honest reading of an entrance). false re-hides on the way out, so the reveal replays each pass.'
+          @onInput={{this.setOnce}}
+        />
+        <Args.Number
+          @name='threshold'
+          @defaultValue={{0.2}}
+          @value={{this.threshold}}
+          @min={{0}}
+          @max={{1}}
+          @step={{0.05}}
+          @description='IntersectionObserver threshold: the fraction of the block that must be visible before it trips.'
+          @onInput={{this.setThreshold}}
+        />
+        <Args.String
+          @name='rootMargin'
+          @defaultValue='0px'
+          @value={{this.rootMargin}}
+          @description="IntersectionObserver rootMargin. '0px 0px -12% 0px' trips a little late, so content settles before it is read."
+          @onInput={{this.setRootMargin}}
+        />
+        <Args.Number
+          @name='stagger'
+          @defaultValue={{0}}
+          @value={{this.stagger}}
+          @min={{0}}
+          @max={{0.4}}
+          @step={{0.01}}
+          @description='Seconds between consecutive children. Meaningful only with @items — the delay is precomputed as index × stagger, not sequenced by a timer.'
+          @onInput={{this.setStagger}}
+        />
+        <Args.Number
+          @name='duration'
+          @defaultValue={{0.48}}
+          @value={{this.duration}}
+          @min={{0.1}}
+          @max={{2}}
+          @step={{0.02}}
+          @description='Transition duration in seconds, per child.'
+          @onInput={{this.setDuration}}
+        />
+        <Args.Number
+          @name='distance'
+          @defaultValue={{8}}
+          @value={{this.distance}}
+          @min={{0}}
+          @max={{60}}
+          @step={{2}}
+          @description='Travel in px for rise / fall / slide.'
+          @onInput={{this.setDistance}}
+        />
+        <Args.Object
+          @name='items'
+          @value={{this.lots}}
+          @description='Optional list. With it, each entry renders through the :item block and gets its own staggered delay. Without it, the whole default block reveals as one unit.'
+        />
+        <Args.Yield
+          @name='item'
+          @description='Block for one entry, yielded (item, index). Wrapped in a div whose display comes from --pretui-inview-item-display.'
+        />
+        <Args.Yield
+          @name='default'
+          @description='Used when @items is absent: the entire block reveals as a single unit.'
+        />
+        <Args.Base
+          @name='--pretui-inview-display'
+          @type='CSS'
+          @defaultValue='block'
+          @description='Display of the observed container — set it to grid or flex to make the container carry the layout.'
+        />
+        <Args.Base
+          @name='--pretui-inview-item-display'
+          @type='CSS'
+          @defaultValue='block'
+          @description='Display of each item wrapper.'
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .inview-stage {
+        display: grid;
+        gap: var(--space-4, 11px);
+      }
+      .inview-scroller {
+        height: 220px;
+        overflow-y: auto;
+        padding: var(--space-4, 11px);
+        border-radius: var(--radius-surface, 10px);
+        background: var(--card);
+        box-shadow: var(
+          --pretui-shadow-hairline,
+          0 0 0 1px var(--border)
+        );
+      }
+      .inview-hint {
+        margin: 0 0 200px;
+        font-size: var(--text-ui, 12px);
+        color: var(--muted-foreground);
+      }
+      /* the documented way to give the observed container a layout role —
+         set the knob, don't fight .pretui-inview for the display property */
+      .inview-list {
+        --pretui-inview-display: grid;
+        gap: var(--space-3, 8px);
+        padding-bottom: 120px;
+      }
+      .inview-row {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 2px var(--space-4, 11px);
+        padding: var(--space-3, 8px) var(--space-4, 11px);
+        border-radius: var(--radius);
+        background: var(--muted);
+      }
+      .inview-tea {
+        font-size: var(--text-ui-md, 12.5px);
+        font-weight: 600;
+        color: var(--foreground);
+      }
+      .inview-amount {
+        grid-row: span 2;
+        align-self: center;
+        font-variant-numeric: tabular-nums;
+        font-size: var(--text-ui-md, 12.5px);
+        color: var(--foreground);
+      }
+      .inview-meta {
+        font-size: var(--text-ui-xs, 11px);
+        color: var(--muted-foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_IN_VIEW: Record<string, unknown> = {
+  InView: InViewUsage,
+};

package/bundled-realms/pretui/components/indicator.gts

@@ -0,0 +1,137 @@
+// Pretui — Indicator: a named status dot on the corner of another element — online, live, unread.
+import Component from '@glimmer/component';
+import { VisuallyHidden } from './visually-hidden';
+import { guidFor } from '@ember/object/internals';
+import { cornerHueStyle, describesFocusable, resolveCorner, resolveCornerTone } from '../internal/corner-mark';
+import type { CornerPlacement } from '../internal/corner-mark';
+import type { PretuiTone, PretuiToneArg } from '../pretui-primitives';
+
+export interface IndicatorSignature {
+  Args: {
+    /** Required: what the dot means ('Online', 'Unread'). It is announced after the child. */
+    label: string;
+    /** Default 'success'. Accepts the kit's tone spellings. */
+    tone?: PretuiToneArg;
+    /** A pulsing ring for something live. Reduced motion keeps the solid dot. */
+    ping?: boolean;
+    /** Which corner (default 'top-end'). The physical spellings map. */
+    placement?: CornerPlacement | string;
+    /** Pull the dot in for a round child such as an Avatar. */
+    circular?: boolean;
+    /** Hide the dot, and its announcement, without unmounting the child. */
+    invisible?: boolean;
+  };
+  Blocks: { default: [] };
+  Element: HTMLSpanElement;
+}
+
+/**
+ * A dot with no number; a count is Badge. The dot is decoration and
+ * `aria-hidden`; `@label` is the meaning, as a visually hidden run after the
+ * child, so "Ana Ruiz, Online" reads in order, and a focusable child points
+ * at it with `aria-describedby` so focus reads it too. Colour and the ping are never
+ * the only signal (Law 6): the label always travels with them.
+ */
+export class Indicator extends Component<IndicatorSignature> {
+  private labelId = guidFor(this) + '-label';
+  get describedBy(): string | undefined {
+    return this.args.invisible ? undefined : this.labelId;
+  }
+  get tone(): PretuiTone {
+    return resolveCornerTone(this.args.tone, 'success');
+  }
+  get style() {
+    return cornerHueStyle(this.tone);
+  }
+  <template>
+    <span
+      class='pretui-indicator'
+      data-placement={{resolveCorner @placement}}
+      data-circular={{if @circular 'true' 'false'}}
+      style={{this.style}}
+      data-test-pretui-indicator
+      ...attributes
+      {{describesFocusable this.describedBy}}
+    >
+      {{yield}}
+      {{#unless @invisible}}
+        <span
+          class='pretui-indicator-dot'
+          data-ping={{if @ping 'true' 'false'}}
+          data-tone={{this.tone}}
+          aria-hidden='true'
+          data-test-pretui-indicator-dot
+        ></span>
+        <VisuallyHidden id={{this.labelId}} data-test-pretui-indicator-label>{{@label}}</VisuallyHidden>
+      {{/unless}}
+    </span>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-indicator {
+          position: relative;
+          display: inline-flex;
+          vertical-align: middle;
+          --pretui-mark-inset: 0%;
+          --pretui-mark-x: 50%;
+        }
+        .pretui-indicator:dir(rtl) {
+          --pretui-mark-x: -50%;
+        }
+        .pretui-indicator[data-circular='true'] {
+          --pretui-mark-inset: 14%;
+        }
+        .pretui-indicator-dot {
+          position: absolute;
+          z-index: 1;
+          inline-size: var(--pretui-indicator-size, 0.625rem);
+          block-size: var(--pretui-indicator-size, 0.625rem);
+          border-radius: 50%;
+          background: var(--pretui-mark-hue);
+          box-shadow: 0 0 0 2px var(--pretui-indicator-ring, var(--card));
+          pointer-events: none;
+        }
+        .pretui-indicator-dot[data-ping='true']::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          border-radius: 50%;
+          background: var(--pretui-mark-hue);
+          animation: pretui-indicator-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
+        }
+        .pretui-indicator[data-placement='top-end'] .pretui-indicator-dot {
+          inset-block-start: var(--pretui-mark-inset);
+          inset-inline-end: var(--pretui-mark-inset);
+          translate: var(--pretui-mark-x) -50%;
+        }
+        .pretui-indicator[data-placement='top-start'] .pretui-indicator-dot {
+          inset-block-start: var(--pretui-mark-inset);
+          inset-inline-start: var(--pretui-mark-inset);
+          translate: calc(-1 * var(--pretui-mark-x)) -50%;
+        }
+        .pretui-indicator[data-placement='bottom-end'] .pretui-indicator-dot {
+          inset-block-end: var(--pretui-mark-inset);
+          inset-inline-end: var(--pretui-mark-inset);
+          translate: var(--pretui-mark-x) 50%;
+        }
+        .pretui-indicator[data-placement='bottom-start'] .pretui-indicator-dot {
+          inset-block-end: var(--pretui-mark-inset);
+          inset-inline-start: var(--pretui-mark-inset);
+          translate: calc(-1 * var(--pretui-mark-x)) 50%;
+        }
+        @keyframes pretui-indicator-ping {
+          75%,
+          100% {
+            scale: 2.2;
+            opacity: 0;
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-indicator-dot[data-ping='true']::after {
+            animation: none;
+            opacity: 0;
+          }
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/indicator.md

@@ -0,0 +1,60 @@
+## What it is
+
+A **named status dot on the corner of another element**: online, live, unread, syncing. It wraps the element and puts a small dot on one corner, with an optional pulse for something live.
+
+Reach for a neighbour when the mark is something else:
+
+- **Badge** is a count, a number on the corner.
+- **Presence** is a person's full availability state with its label.
+- **StatusChip** is an inline status in the text.
+
+## The contract
+
+```
+@label (required), @tone? (default 'success')
+@ping?, @placement? ('top-end' | 'top-start' | 'bottom-end' | 'bottom-start'; default 'top-end')
+@circular?, @invisible?
+<:default>   — the element the dot sits on
+Element: HTMLSpanElement
+```
+
+**`@label` is required.** The dot is decoration and `aria-hidden`, and the label is its meaning. It is a visually hidden run after the child, so "Ana Ruiz, Online" reads in order. When the child is focusable, such as an avatar button, it points at the label with `aria-describedby`, so focus reads it too. Colour and the ping are never the only signal (Law 6).
+
+**`@ping` pulses a ring** around the dot for something live. Under `prefers-reduced-motion` the ring is removed and the solid dot stays.
+
+**Placement is logical** and the physical spellings map. `@circular` pulls the dot in toward a round child such as an **Avatar**. `@invisible` removes the dot and its label together, so nothing is announced for a dot that isn't shown.
+
+## Prior art
+
+**Mantine `Indicator`** takes `color`, `position`, `offset`, `processing` (the pulse), `withBorder`, `disabled` and an optional `label` that is painted, not spoken. **MUI `Badge variant="dot"`** and **Ant `Badge dot`** are the same idea on their badge. None of them has an accessible name.
+
+Where Pretui is better: **the dot means something to everyone**, because `@label` is required and spoken. **The pulse respects reduced motion.** Mantine's `processing` animation runs regardless.
+
+Where it is thinner: **no `offset`**, and **no painted label** inside the dot. Use **Badge** for a number.
+
+## Accessibility
+
+No APG pattern.
+
+- **The dot is `aria-hidden`; the label is spoken after the child.** A focusable child is described by it. The tests assert both, the reading order "Ana Ruiz Online", and the description wiring.
+- **`@invisible` removes both**, which the tests assert.
+- **Changes are not announced.** Someone going offline while the user reads the page is not a live region. Announce it separately if it matters now.
+- **Motion.** The ping is removed under `prefers-reduced-motion`, leaving the solid dot, and the label carries the meaning either way.
+
+## Theming
+
+`--pretui-mark-hue` (set from the tone: `--success` by default, or `--primary`, `--pretui-info`, `--warning`, `--destructive`, `--pretui-attention`, `--muted-foreground`), `--pretui-indicator-size` (default 0.625rem) and `--pretui-indicator-ring` (the separating ring, default `--card`).
+
+The ping's timing and scale are fixed.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.
+
+## React ecosystem
+
+| Agent types                          | Give them                             |
+| ------------------------------------ | ------------------------------------- |
+| Mantine `<Indicator color position>` | `<Indicator @tone @placement @label>` |
+| Mantine `processing`                 | `@ping={{true}}`                      |
+| Mantine `disabled`                   | `@invisible={{true}}`                 |
+| MUI `<Badge variant="dot">`          | `<Indicator @label>`                  |
+| a number                             | **Badge**                             |

package/bundled-realms/pretui/components/indicator.usage.gts

@@ -0,0 +1,66 @@
+// Pretui — Indicator usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { Indicator } from './indicator';
+import { Avatar } from './avatar';
+import type { PretuiToneArg } from '../pretui-primitives';
+
+const TONES = ['success', 'warning', 'danger', 'info', 'neutral', 'primary'];
+
+export class IndicatorUsage extends Component {
+  tones = TONES;
+  @tracked label = 'Online';
+  @tracked tone = 'success';
+  @tracked ping = false;
+  get toneArg() {
+    return this.tone as PretuiToneArg;
+  }
+  setLabel = (v: string) => (this.label = v);
+  setTone = (v: string) => (this.tone = v);
+  setPing = (v: boolean) => (this.ping = v);
+  get usage() {
+    let bits = [`@label='${this.label}'`];
+    if (this.tone !== 'success') bits.push(`@tone='${this.tone}'`);
+    if (this.ping) bits.push('@ping={{true}}');
+    return `<Indicator ${bits.join(' ')} @circular={{true}}>\n  <Avatar @name='Ana Ruiz' />\n</Indicator>`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='Indicator'
+      @description='A named status dot on the corner of another element: online, live, unread. The dot is decoration; the required label is spoken after the child, so colour and the ping are never the only signal. A count is Badge.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='in-demo'>
+          <Indicator @label={{this.label}} @tone={{this.toneArg}} @ping={{this.ping}} @circular={{true}}>
+            <Avatar @name='Ana Ruiz' />
+          </Indicator>
+          <span>Ana Ruiz</span>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String @name='label' @required={{true}} @value={{this.label}} @onInput={{this.setLabel}} />
+        <Args.String @name='tone' @value={{this.tone}} @options={{this.tones}} @defaultValue='success' @onInput={{this.setTone}} />
+        <Args.Bool @name='ping' @value={{this.ping}} @defaultValue={{false}} @description='A pulsing ring. Reduced motion keeps the solid dot.' @onInput={{this.setPing}} />
+        <Args.String @name='placement' @defaultValue='top-end' />
+        <Args.Bool @name='circular' @defaultValue={{false}} />
+        <Args.Bool @name='invisible' @defaultValue={{false}} />
+        <Args.Yield @name='default' />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .in-demo {
+        display: flex;
+        align-items: center;
+        gap: var(--space-3, 0.5rem);
+        padding: var(--space-4, 0.6875rem);
+        font-size: var(--text-ui-md, 0.78rem);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_INDICATOR: Record<string, unknown> = {
+  Indicator: IndicatorUsage,
+};

package/bundled-realms/pretui/components/infinite-scroll.gts

@@ -0,0 +1,163 @@
+// Pretui — InfiniteScroll: append the next page when the reader nears the end of the list, with a real Load more button.
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+// type-only gap: 'ember-modifier' resolves at realm runtime; glint cannot see
+// it here (accepted parse baseline, same as toaster.gts / focus.gts)
+import { modifier } from 'ember-modifier';
+import { scrollParent } from '../internal/structure-scroll';
+import { Button } from './button';
+import { Spinner } from './spinner';
+
+export interface InfiniteScrollSignature {
+  Args: {
+    /** Asked for the next page. The caller appends to the list it renders. */
+    onLoadMore?: () => void;
+    /** Whether there is another page (default true). */
+    hasMore?: boolean;
+    /** A page is loading: the sentinel and the button hold off. */
+    busy?: boolean;
+    /** How early to load, as a CSS margin around the scroll container (default '0px 0px 200px 0px'). */
+    rootMargin?: string;
+    /** Load automatically as the end comes into view (default true). False keeps only the button. */
+    auto?: boolean;
+    /** The button's label (default 'Load more'). */
+    loadLabel?: string;
+    /** Announced after a page lands, e.g. 'Loaded 20 more lots'. */
+    loadedMessage?: string;
+  };
+  Blocks: {
+    default: [];
+    /** Shown instead of the button when there is nothing more. */
+    end: [];
+  };
+  Element: HTMLDivElement;
+}
+
+/**
+ * The behaviour, not the scene: Feed is a whole social stream; this appends
+ * pages to whatever list it wraps. A zero-height sentinel after the content
+ * is watched by an IntersectionObserver rooted at the nearest scroll
+ * container — the pane, not the window — and asks for the next page as it
+ * comes within `@rootMargin`.
+ *
+ * A real Load more button is always rendered: it is the path for keyboard
+ * and switch users, for anyone whose pane never scrolls, and for when the
+ * observer cannot run. The caller announces nothing itself; set
+ * `@loadedMessage` after a page lands and one polite line says it.
+ */
+export class InfiniteScroll extends Component<InfiniteScrollSignature> {
+  get hasMore(): boolean {
+    return this.args.hasMore ?? true;
+  }
+  get auto(): boolean {
+    return this.args.auto ?? true;
+  }
+  get loadLabel(): string {
+    return this.args.loadLabel ?? 'Load more';
+  }
+
+  /** Whether the Load more button held focus, so its removal at the end
+   * can hand focus to the end of the list instead of the page. */
+  private buttonFocused = false;
+  noteFocus = (rawEvent: Event) => {
+    let event = rawEvent as FocusEvent;
+    this.buttonFocused = (event.target as HTMLElement | null)?.closest?.('.pretui-infinite-foot button') != null;
+  };
+  /** Runs when the end of the list renders. */
+  landEnd = modifier((el: HTMLElement) => {
+    if (this.buttonFocused && (document.activeElement === document.body || !document.activeElement)) {
+      this.buttonFocused = false;
+      el.focus();
+    }
+  });
+
+  load = () => {
+    if (this.args.busy || !this.hasMore) {
+      return;
+    }
+    this.args.onLoadMore?.();
+  };
+
+  watch = modifier((sentinel: HTMLElement, [enabled, rootMargin]: [boolean, string]) => {
+    if (!enabled) {
+      return;
+    }
+    let observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          this.load();
+        }
+      },
+      { root: scrollParent(sentinel), rootMargin, threshold: 0 },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  });
+
+  get watching(): boolean {
+    return this.auto && this.hasMore && !this.args.busy;
+  }
+  get rootMargin(): string {
+    return this.args.rootMargin ?? '0px 0px 200px 0px';
+  }
+
+  <template>
+    <div class='pretui-infinite' aria-busy={{if @busy 'true' 'false'}} data-test-pretui-infinite-scroll ...attributes>
+      {{yield}}
+      <div class='pretui-infinite-sentinel' aria-hidden='true' data-test-pretui-infinite-sentinel {{this.watch this.watching this.rootMargin}}></div>
+      <div class='pretui-infinite-foot' {{on 'focusin' this.noteFocus}}>
+        {{#if this.hasMore}}
+          <Button
+            @appearance='outlined'
+            @size='s'
+            aria-busy={{if @busy 'true'}}
+            data-state={{if @busy 'busy'}}
+            data-test-pretui-infinite-load
+            {{on 'click' this.load}}
+          >
+            {{#if @busy}}<Spinner @size='s' aria-hidden='true' role='presentation' />{{/if}}
+            {{this.loadLabel}}
+          </Button>
+        {{else}}
+          <div class='pretui-infinite-end' tabindex='-1' data-test-pretui-infinite-end {{this.landEnd}}>{{#if (has-block 'end')}}{{yield to='end'}}{{/if}}</div>
+        {{/if}}
+      </div>
+      <p class='pretui-infinite-status' role='status' data-test-pretui-infinite-status>{{@loadedMessage}}</p>
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-infinite {
+          display: grid;
+          min-inline-size: 0;
+        }
+        .pretui-infinite-sentinel {
+          block-size: 1px;
+          margin-block-start: -1px;
+          pointer-events: none;
+        }
+        .pretui-infinite-foot {
+          display: flex;
+          justify-content: center;
+          padding-block: var(--space-4, 0.6875rem);
+        }
+        .pretui-infinite-end:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+        .pretui-infinite-end {
+          color: var(--muted-foreground);
+          font-size: var(--text-ui-sm, 0.72rem);
+        }
+        .pretui-infinite-status {
+          position: absolute;
+          inline-size: 1px;
+          block-size: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+          white-space: nowrap;
+        }
+      }
+    </style>
+  </template>
+}
+