@inkra/react 0.6.0 → 0.9.0

package/dist/number-ticker/rolling.js

@@ -0,0 +1,87 @@
+export function sameRollingTokens(from, to) {
+    return from.length === to.length && from.every((token, index) => {
+        const next = to[index];
+        return token.key === next.key && token.text === next.text && token.digit === next.digit;
+    });
+}
+export const rollMix = (from, to, progress) => from + (to - from) * progress;
+export function createRollingMotion(from, to, direction, previous) {
+    const sign = direction === 'up' ? -1 : 1;
+    const snapshot = previous?.columns.map(column => ({
+        key: column.key, digit: column.digit,
+        width: rollMix(column.fromWidth, column.toWidth, previous.progress),
+        faces: column.faces.map(face => ({
+            text: face.text,
+            offset: rollMix(face.fromOffset, face.toOffset, previous.progress),
+            opacity: rollMix(face.fromOpacity, face.toOpacity, previous.progress),
+        })).filter(face => Math.abs(face.offset) < 1 && face.opacity > 0.01),
+    })) ?? from.map(token => ({ key: token.key, digit: token.digit, width: 1, faces: [{ text: token.text, offset: 0, opacity: 1 }] }));
+    const sources = new Map(snapshot.map(column => [column.key, column]));
+    const sourceTokens = snapshot.filter(column => column.width > 0 || column.faces.length > 0)
+        .map(column => ({ key: column.key, digit: column.digit, text: column.faces[0]?.text ?? '' }));
+    return rollingColumns(sourceTokens, to).map(column => {
+        const source = sources.get(column.key);
+        const faces = [...(source?.faces ?? [])];
+        if (column.to !== '' && !faces.some(face => face.text === column.to)) {
+            faces.push({ text: column.to, offset: column.digit ? -sign : 0, opacity: column.digit ? 1 : 0 });
+        }
+        return {
+            key: column.key, digit: column.digit, target: column.to,
+            fromWidth: source?.width ?? 0, toWidth: column.to === '' ? 0 : 1,
+            // Existing faces continue from their actual offset on a rapid retarget.
+            faces: faces.map(face => ({ text: face.text, fromOffset: face.offset,
+                toOffset: face.text === column.to ? 0 : column.digit ? sign : 0,
+                fromOpacity: face.opacity, toOpacity: face.text === column.to || column.digit ? 1 : 0,
+            })),
+        };
+    });
+}
+// Align integer places from the right and fractional places from the decimal.
+// Intl parts keep signs, grouping, currency and compact units out of digit reels.
+export function rollingTokens(parts) {
+    const remaining = new Map();
+    for (const part of parts) {
+        if (part.type === 'integer' || part.type === 'exponentInteger') {
+            remaining.set(part.type, (remaining.get(part.type) ?? 0) + Array.from(part.value).length);
+        }
+    }
+    const occurrences = new Map();
+    return parts.flatMap((part, index) => {
+        if (part.type === 'integer' || part.type === 'exponentInteger') {
+            return Array.from(part.value, text => {
+                const position = (remaining.get(part.type) ?? 1) - 1;
+                remaining.set(part.type, position);
+                return { key: `${part.type}-${position}`, text, digit: true };
+            });
+        }
+        if (part.type === 'fraction') {
+            return Array.from(part.value, (text, position) => ({ key: `fraction-${position}`, text, digit: true }));
+        }
+        const identity = part.type === 'literal'
+            ? `literal-${part.value}-${parts.slice(index + 1).find(next => next.type !== 'literal')?.type ?? 'end'}`
+            : part.type;
+        const occurrence = occurrences.get(identity) ?? 0;
+        occurrences.set(identity, occurrence + 1);
+        const key = part.type === 'group' ? `group-${remaining.get('integer')}` : `${identity}-${occurrence}`;
+        return [{ key, text: part.value, digit: false }];
+    });
+}
+export function rollingColumns(from, to) {
+    const old = new Map(from.map(token => [token.key, token]));
+    const next = new Map(to.map(token => [token.key, token]));
+    const result = to.map(token => ({
+        key: token.key, from: old.get(token.key)?.text ?? '', to: token.text, digit: token.digit,
+    }));
+    // Departing places retain their old order until their width reaches zero.
+    for (let index = from.length - 1; index >= 0; index -= 1) {
+        const token = from[index];
+        if (next.has(token.key))
+            continue;
+        const following = from[index + 1];
+        const insertion = following ? result.findIndex(column => column.key === following.key) : -1;
+        result.splice(insertion < 0 ? result.length : insertion, 0, {
+            key: token.key, from: token.text, to: '', digit: token.digit,
+        });
+    }
+    return result;
+}

package/dist/pagination/index.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { ButtonVariant } from '../Button.js';
 export interface PaginationLabels {
     nav: string;
     first: string;
@@ -7,6 +8,8 @@ export interface PaginationLabels {
     last: string;
     page: (page: number) => string;
     ellipsis: string;
+    pageSize?: string;
+    pageSizeOption?: (pageSize: number) => string;
 }
 export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onChange'> {
     totalPages: number;
@@ -28,5 +31,19 @@ export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'chil
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     labels?: Partial<PaginationLabels>;
+    /** Appearance of numbered and boundary buttons; defaults to ghost. */
+    variant?: ButtonVariant;
+    /** Logical alignment of the size selector and page controls. */
+    align?: 'start' | 'center' | 'end';
+    /** Wrap page controls instead of scrolling them horizontally. */
+    wrap?: boolean;
+    /** Controlled positive safe-integer page size. Does not paginate caller data. */
+    pageSize?: number;
+    /** Initial uncontrolled page size; defaults to 10. */
+    defaultPageSize?: number;
+    /** Enable the size selector with positive safe integers; invalid entries are ignored. */
+    pageSizeOptions?: readonly number[];
+    /** Requests a page size, then requests page 1 when the current page is above 1. */
+    onPageSizeChange?: (pageSize: number) => void;
 }
 export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/pagination/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useInkraLocale } from '../i18n/index.js';
 import { forwardRef, useEffect, useState } from 'react';
 import { Button } from '../Button.js';
+import { Select } from '../select/index.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
@@ -9,12 +10,20 @@ import { clampPage, getPaginationEntries, normalizeTotal } from './model.js';
 const defaultLabels = (t) => ({
     nav: t('pagination.nav'), first: t('pagination.first'), previous: t('common.previousPage'), next: t('common.nextPage'), last: t('pagination.last'),
     page: page => t('pagination.page', { page }), ellipsis: t('pagination.more'),
+    pageSize: t('pagination.pageSize'), pageSizeOption: pageSize => t('pagination.pageSizeOption', { pageSize }),
 });
-export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, showPreviousNext = true, hideOnSinglePage = false, simple = false, renderPage, renderSummary, disabled = false, size = 'md', labels, className, ...props }, ref) {
+export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, showPreviousNext = true, hideOnSinglePage = false, simple = false, renderPage, renderSummary, disabled = false, size = 'md', labels, className, variant = 'ghost', align = 'start', wrap = false, pageSize, defaultPageSize = 10, pageSizeOptions, onPageSizeChange, ...props }, ref) {
     const { t } = useInkraLocale();
     const total = normalizeTotal(totalPages);
     const [internalPage, setInternalPage] = useState(() => clampPage(defaultPage, total));
     const current = clampPage(page ?? internalPage, total);
+    const [internalPageSize, setInternalPageSize] = useState(() => normalizePageSize(defaultPageSize) ?? 10);
+    const currentPageSize = normalizePageSize(pageSize ?? internalPageSize) ?? 10;
+    const sizeOptions = [...new Set((pageSizeOptions ?? []).filter(value => normalizePageSize(value) !== undefined))];
+    if (sizeOptions.length && !sizeOptions.includes(currentPageSize))
+        sizeOptions.push(currentPageSize);
+    sizeOptions.sort((left, right) => left - right);
+    const showPages = !hideOnSinglePage || total > 1;
     const text = { ...defaultLabels(t), ...labels };
     useEffect(() => {
         if (page === undefined)
@@ -28,6 +37,18 @@ export const Pagination = forwardRef(function Pagination({ totalPages, page, def
             setInternalPage(target);
         onPageChange?.(target);
     }
+    function selectPageSize(value) {
+        const next = normalizePageSize(Number(value));
+        if (disabled || next === undefined || !sizeOptions.includes(next) || next === currentPageSize)
+            return;
+        if (pageSize === undefined)
+            setInternalPageSize(next);
+        if (page === undefined)
+            setInternalPage(clampPage(1, total));
+        onPageSizeChange?.(next);
+        if (current > 1)
+            onPageChange?.(1);
+    }
     const arrow = (kind, target, unavailable) => {
         const backwards = kind === 'first' || kind === 'previous';
         const paths = [{ d: backwards ? 'm15 18-6-6 6-6' : 'm9 18 6-6-6-6' }];
@@ -35,11 +56,14 @@ export const Pagination = forwardRef(function Pagination({ totalPages, page, def
             paths.push({ d: 'M5 6v12' });
         if (kind === 'last')
             paths.push({ d: 'M19 6v12' });
-        return _jsx("li", { children: _jsx(Button, { variant: "ghost", size: size === 'md' ? 'icon' : `icon-${size}`, "aria-label": text[kind], title: text[kind], disabled: disabled || unavailable, onClick: () => select(target), children: _jsx(PencilIcon, { className: "inkra-pagination__arrow", paths: paths, size: 20, sourceSize: 24 }) }) }, kind);
+        return _jsx("li", { children: _jsx(Button, { variant: variant, size: size === 'md' ? 'icon' : `icon-${size}`, "aria-label": text[kind], title: text[kind], disabled: disabled || unavailable, onClick: () => select(target), children: _jsx(PencilIcon, { className: "inkra-pagination__arrow", paths: paths, size: 20, sourceSize: 24 }) }) }, kind);
     };
-    if (hideOnSinglePage && total <= 1)
+    if (!showPages && !sizeOptions.length)
         return null;
-    return _jsx("nav", { "aria-label": text.nav, ...props, ref: ref, className: ['inkra-pagination', className].filter(Boolean).join(' '), "data-empty": !total || undefined, "data-simple": simple || undefined, children: _jsxs("ul", { className: "inkra-pagination__list", children: [showFirstLast && arrow('first', 1, current <= 1), showPreviousNext && arrow('previous', current - 1, current <= 1), simple ? _jsx("li", { className: "inkra-pagination__summary", "aria-live": "polite", "aria-atomic": "true", children: renderSummary ? renderSummary(current, total) : _jsx(PencilText, { children: `${current} / ${total}` }) }) : getPaginationEntries(total, current, siblingCount, boundaryCount).map(entry => typeof entry === 'number'
-                    ? _jsx("li", { className: "inkra-pagination__page-item", children: _jsxs(Button, { size: size, variant: "ghost", className: "inkra-pagination__page", "aria-label": text.page(entry), "aria-current": entry === current ? 'page' : undefined, disabled: disabled, onClick: () => select(entry), children: [entry === current && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-pagination__selection", seed: `page-${entry}` }), renderPage ? renderPage(entry, { isCurrent: entry === current }) : _jsx(PencilText, { children: String(entry) })] }) }, entry)
-                    : _jsxs("li", { className: "inkra-pagination__ellipsis", children: [_jsx("span", { className: "inkra-pagination__sr-only", children: text.ellipsis }), _jsx(PencilText, { "aria-hidden": "true", children: "..." })] }, entry)), showPreviousNext && arrow('next', current + 1, !total || current >= total), showFirstLast && arrow('last', total, !total || current >= total)] }) });
+    return _jsxs("nav", { "aria-label": text.nav, ...props, ref: ref, className: ['inkra-pagination', className].filter(Boolean).join(' '), "data-empty": !total || undefined, "data-simple": simple || undefined, "data-align": align, "data-wrap": wrap || undefined, children: [sizeOptions.length > 0 && _jsx("div", { className: "inkra-pagination__size", children: _jsxs(Select.Root, { dir: props.dir === 'rtl' ? 'rtl' : props.dir === 'ltr' ? 'ltr' : undefined, value: String(currentPageSize), onValueChange: selectPageSize, disabled: disabled, children: [_jsx(Select.Trigger, { "aria-label": text.pageSize, size: size, fullWidth: false, children: _jsx(Select.Value, { children: _jsx(PencilText, { children: text.pageSizeOption(currentPageSize) }) }) }), _jsx(Select.Portal, { children: _jsx(Select.Content, { children: _jsx(Select.Viewport, { children: sizeOptions.map(value => _jsxs(Select.Item, { value: String(value), children: [_jsx(Select.ItemText, { children: text.pageSizeOption(value) }), _jsx(Select.ItemIndicator, {})] }, value)) }) }) })] }) }), showPages && _jsxs("ul", { className: "inkra-pagination__list", children: [showFirstLast && arrow('first', 1, current <= 1), showPreviousNext && arrow('previous', current - 1, current <= 1), simple ? _jsx("li", { className: "inkra-pagination__summary", "aria-live": "polite", "aria-atomic": "true", children: renderSummary ? renderSummary(current, total) : _jsx(PencilText, { children: `${current} / ${total}` }) }) : getPaginationEntries(total, current, siblingCount, boundaryCount).map(entry => typeof entry === 'number'
+                        ? _jsx("li", { className: "inkra-pagination__page-item", children: _jsxs(Button, { size: size, variant: variant, className: "inkra-pagination__page", "aria-label": text.page(entry), "aria-current": entry === current ? 'page' : undefined, disabled: disabled, onClick: () => select(entry), children: [entry === current && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-pagination__selection", seed: `page-${entry}` }), renderPage ? renderPage(entry, { isCurrent: entry === current }) : _jsx(PencilText, { children: String(entry) })] }) }, entry)
+                        : _jsxs("li", { className: "inkra-pagination__ellipsis", children: [_jsx("span", { className: "inkra-pagination__sr-only", children: text.ellipsis }), _jsx(PencilText, { "aria-hidden": "true", children: "..." })] }, entry)), showPreviousNext && arrow('next', current + 1, !total || current >= total), showFirstLast && arrow('last', total, !total || current >= total)] })] });
 });
+function normalizePageSize(value) {
+    return Number.isSafeInteger(value) && value > 0 ? value : undefined;
+}

package/dist/styles/base.css

@@ -373,6 +373,14 @@
   opacity: 0;
 }
 
+.inkra-button[data-variant="ghost"] > .inkra-button__surface > .inkra-pencil-surface__border {
+  display: none;
+}
+
+.inkra-button[data-variant="ghost"] > .inkra-button__surface > .inkra-pencil-surface__content {
+  clip-path: none;
+}
+
 .inkra-button[data-variant="ghost"]:hover:not(:disabled):not([aria-disabled="true"])
   .inkra-button__surface > .inkra-pencil-surface__ink,
 .inkra-button[data-variant="ghost"]:focus-visible
@@ -391,7 +399,7 @@
 .inkra-button[data-variant="ghost"]:focus-visible
   .inkra-button__surface[data-pencil-fallback="true"] {
   background: var(--inkra-surface-muted);
-  border-color: var(--inkra-border);
+  border-color: transparent;
 }
 
 .inkra-button[data-variant="link"] .inkra-button__label {

package/dist/styles/form.css

@@ -228,6 +228,16 @@
   resize: none;
 }
 
+/* Native rows establish the initial editor height; counters remain a separate row. */
+.inkra-field-control-hit--textarea[data-row-sizing="true"] .inkra-field-control--textarea {
+  min-height: 0;
+}
+
+.inkra-field-control-hit--textarea[data-row-sizing="true"] .inkra-textarea {
+  flex: none;
+  min-height: 0;
+}
+
 .inkra-textarea__footer {
   display: flex;
   align-items: center;

package/dist/styles/guide.css

@@ -0,0 +1,202 @@
+.inkra-guide__spotlight,
+.inkra-guide__backdrop {
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0));
+}
+
+.inkra-guide__backdrop {
+  background: var(--inkra-overlay);
+}
+
+.inkra-guide__spotlight {
+  box-shadow: 0 0 0 100vmax var(--inkra-overlay);
+  overflow: visible;
+}
+
+.inkra-guide__spotlight > .inkra-pencil-surface__ink,
+.inkra-guide__spotlight > .inkra-pencil-surface__border {
+  border-radius: var(--inkra-guide-highlight-radius, 8px);
+}
+
+.inkra-guide__content {
+  max-height: min(70dvh, var(--radix-popover-content-available-height, 70dvh));
+  max-width: min(24rem, calc(100dvw - var(--inkra-space-6)));
+  outline: 0;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  width: min(22rem, calc(100dvw - var(--inkra-space-6)));
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 1);
+}
+
+.inkra-guide__content:focus-visible {
+  outline: var(--inkra-focus-width) solid var(--inkra-focus);
+  outline-offset: var(--inkra-focus-offset);
+}
+
+.inkra-guide__skip-layer {
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 2);
+}
+
+.inkra-guide__skip {
+  color: var(--inkra-ink-muted);
+  opacity: .72;
+  pointer-events: auto;
+  position: absolute;
+}
+
+.inkra-guide__skip:is(:hover, :focus-visible) {
+  color: var(--inkra-ink);
+  opacity: 1;
+}
+
+.inkra-guide__skip[data-placement^="top"] {
+  inset-block-start: max(var(--inkra-space-4), env(safe-area-inset-top));
+}
+
+.inkra-guide__skip[data-placement^="bottom"] {
+  inset-block-end: max(var(--inkra-space-4), env(safe-area-inset-bottom));
+}
+
+.inkra-guide__skip[data-placement$="start"] {
+  inset-inline-start: max(var(--inkra-space-4), env(safe-area-inset-left));
+}
+
+.inkra-guide__skip[data-placement$="end"] {
+  inset-inline-end: max(var(--inkra-space-4), env(safe-area-inset-right));
+}
+
+.inkra-guide__surface {
+  color: var(--inkra-ink);
+  display: block;
+  max-height: inherit;
+  width: 100%;
+}
+
+.inkra-guide__panel {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--inkra-space-4);
+  max-height: inherit;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  overscroll-behavior: contain;
+  padding: var(--inkra-space-5);
+}
+
+.inkra-guide__header,
+.inkra-guide__footer,
+.inkra-guide__navigation {
+  align-items: center;
+  display: flex;
+  gap: var(--inkra-space-2);
+}
+
+.inkra-guide__header {
+  align-items: flex-start;
+}
+
+.inkra-guide__heading {
+  display: grid;
+  flex: 1;
+  gap: var(--inkra-space-1);
+  min-width: 0;
+}
+
+.inkra-guide__progress {
+  color: var(--inkra-ink-subtle);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-sm);
+  line-height: var(--inkra-line-ui);
+}
+
+.inkra-guide__title {
+  font-family: var(--inkra-font-display);
+  font-size: var(--inkra-text-xl);
+  font-weight: var(--inkra-weight-regular);
+  line-height: var(--inkra-line-ui);
+  margin: 0;
+}
+
+.inkra-guide__description {
+  color: var(--inkra-ink-muted);
+  font-family: var(--inkra-font-body);
+  font-size: var(--inkra-text-md);
+  line-height: var(--inkra-line-body);
+}
+
+.inkra-guide__close {
+  flex: none;
+}
+
+.inkra-guide__footer {
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.inkra-guide__footer > :empty {
+  display: none;
+}
+
+.inkra-guide__navigation {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+.inkra-guide__footer .inkra-button {
+  max-width: 100%;
+}
+
+@media (max-width: 30rem) {
+  .inkra-guide__content {
+    max-height: calc(100dvh - var(--inkra-space-4));
+    max-width: calc(100dvw - var(--inkra-space-4));
+    width: calc(100dvw - var(--inkra-space-4));
+  }
+
+  .inkra-guide__panel {
+    padding: var(--inkra-space-4);
+  }
+
+  .inkra-guide__footer,
+  .inkra-guide__navigation {
+    width: 100%;
+  }
+
+  .inkra-guide__footer > .inkra-button,
+  .inkra-guide__navigation > .inkra-button {
+    flex: 1 1 auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-guide__content {
+    animation: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .inkra-guide__backdrop {
+    background: CanvasText;
+    opacity: 0.25;
+  }
+
+  .inkra-guide__spotlight {
+    box-shadow: 0 0 0 100vmax color-mix(in srgb, CanvasText 25%, transparent);
+    outline: 2px solid Highlight;
+  }
+
+  .inkra-guide__surface {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
+
+  .inkra-guide__skip {
+    color: ButtonText;
+    opacity: 1;
+  }
+}

package/dist/styles/image-viewer.css

@@ -79,6 +79,7 @@
 }
 
 .inkra-image-viewer__body {
+  position: relative;
   display: grid;
   flex: 1 1 auto;
   min-block-size: var(--inkra-touch-target);
@@ -226,6 +227,24 @@
   padding: var(--inkra-focus-offset);
   position: relative;
   scrollbar-gutter: auto;
+  pointer-events: auto;
+}
+
+.inkra-image-viewer__floating-tools {
+  position: absolute;
+  inset-inline: max(var(--inkra-space-3), env(safe-area-inset-left)) max(var(--inkra-space-3), env(safe-area-inset-right));
+  inset-block-start: max(var(--inkra-space-3), env(safe-area-inset-top));
+  display: flex;
+  justify-content: center;
+  padding-inline: var(--inkra-touch-target);
+  pointer-events: none;
+  z-index: 6;
+}
+
+.inkra-image-viewer__floating-tools[data-position="bottom"] {
+  inset-block-start: auto;
+  inset-block-end: max(var(--inkra-space-3), env(safe-area-inset-bottom));
+  padding-inline: 0;
 }
 
 .inkra-image-viewer__video-navigation {
@@ -345,6 +364,7 @@
 @media print {
   .inkra-image-viewer__close-control,
   .inkra-image-viewer__navigation,
+  .inkra-image-viewer__floating-tools,
   .inkra-image-viewer__bottom { display: none; }
 }
 

package/dist/styles/infinite-scroll.css

@@ -0,0 +1,171 @@
+.inkra-infinite-scroll {
+  --inkra-infinite-scroll-pull-distance: 0px;
+  --inkra-infinite-scroll-indicator-inline-offset: 0px;
+  --inkra-infinite-scroll-indicator-block-offset: 0px;
+  --inkra-infinite-scroll-indicator-viewport-inline-size: 100%;
+  --inkra-infinite-scroll-indicator-viewport-block-size: 100%;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(min-content, 1fr) auto;
+  max-inline-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  color: var(--inkra-ink);
+}
+
+.inkra-infinite-scroll__body {
+  display: grid;
+  grid-template-columns: auto minmax(min-content, 1fr) auto;
+  grid-row: 2;
+  min-block-size: 0;
+  min-inline-size: 0;
+  transform: translate3d(0, 0, 0);
+  transition: transform var(--inkra-motion-slow) cubic-bezier(0.22, 1.45, 0.36, 1);
+}
+
+.inkra-infinite-scroll[data-pull-direction] > .inkra-infinite-scroll__body {
+  transition: none;
+}
+
+.inkra-infinite-scroll__content {
+  grid-column: 2;
+  grid-row: 1;
+  min-block-size: 100%;
+  min-inline-size: 100%;
+}
+
+.inkra-infinite-scroll[data-pull-direction="top"] > .inkra-infinite-scroll__body {
+  transform: translate3d(0, var(--inkra-infinite-scroll-pull-distance), 0);
+}
+.inkra-infinite-scroll[data-pull-direction="bottom"] > .inkra-infinite-scroll__body {
+  transform: translate3d(0, calc(-1 * var(--inkra-infinite-scroll-pull-distance)), 0);
+}
+.inkra-infinite-scroll[data-pull-direction="left"] > .inkra-infinite-scroll__body {
+  transform: translate3d(var(--inkra-infinite-scroll-pull-distance), 0, 0);
+}
+.inkra-infinite-scroll[data-pull-direction="right"] > .inkra-infinite-scroll__body {
+  transform: translate3d(calc(-1 * var(--inkra-infinite-scroll-pull-distance)), 0, 0);
+}
+
+.inkra-infinite-scroll__indicator {
+  position: relative;
+  display: none;
+  min-block-size: 0;
+  min-inline-size: 0;
+  z-index: 1;
+}
+.inkra-infinite-scroll__indicator[data-active] { display: flex; }
+.inkra-infinite-scroll__indicator[data-direction="top"],
+.inkra-infinite-scroll__indicator[data-direction="bottom"] {
+  inline-size: 100%;
+}
+.inkra-infinite-scroll__indicator[data-visible][data-direction="top"],
+.inkra-infinite-scroll__indicator[data-visible][data-direction="bottom"] {
+  min-block-size: 52px;
+}
+.inkra-infinite-scroll__indicator[data-direction="left"],
+.inkra-infinite-scroll__indicator[data-direction="right"] {
+  align-self: stretch;
+  grid-row: 1;
+}
+.inkra-infinite-scroll__indicator[data-visible][data-direction="left"],
+.inkra-infinite-scroll__indicator[data-visible][data-direction="right"] {
+  min-inline-size: 112px;
+}
+.inkra-infinite-scroll__indicator[data-direction="top"] { grid-row: 1; }
+.inkra-infinite-scroll__indicator[data-direction="bottom"] { grid-row: 3; }
+.inkra-infinite-scroll__indicator[data-direction="left"] { grid-column: 1; }
+.inkra-infinite-scroll__indicator[data-direction="right"] { grid-column: 3; }
+
+/* Pull feedback reveals inside the elastic gap, without changing scroll layout. */
+.inkra-infinite-scroll__indicator[data-pulling] {
+  position: absolute;
+  grid-area: auto;
+  left: var(--inkra-pull-left, 0px);
+  top: var(--inkra-pull-top, 0px);
+  inline-size: var(--inkra-pull-width, 0px);
+  block-size: var(--inkra-pull-height, 0px);
+  min-inline-size: 0 !important;
+  min-block-size: 0 !important;
+  overflow: clip;
+  pointer-events: none;
+}
+.inkra-infinite-scroll__indicator[data-pulling] .inkra-infinite-scroll__indicator-surface {
+  padding: 0;
+  max-inline-size: none;
+  min-block-size: 0;
+}
+.inkra-infinite-scroll__indicator[data-pulling][data-direction="left"] .inkra-infinite-scroll__loading-label,
+.inkra-infinite-scroll__indicator[data-pulling][data-direction="right"] .inkra-infinite-scroll__loading-label {
+  display: none;
+}
+
+.inkra-infinite-scroll__indicator-surface {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--inkra-space-1) var(--inkra-space-2);
+}
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__indicator-surface,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__indicator-surface {
+  min-block-size: 100%;
+  max-inline-size: 144px;
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="top"] .inkra-infinite-scroll__indicator-surface {
+  inline-size: var(--inkra-infinite-scroll-indicator-viewport-inline-size);
+  transform: translate3d(var(--inkra-infinite-scroll-indicator-inline-offset), 0, 0);
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="bottom"] .inkra-infinite-scroll__indicator-surface {
+  inline-size: var(--inkra-infinite-scroll-indicator-viewport-inline-size);
+  transform: translate3d(var(--inkra-infinite-scroll-indicator-inline-offset), 0, 0);
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="left"] .inkra-infinite-scroll__indicator-surface {
+  block-size: var(--inkra-infinite-scroll-indicator-viewport-block-size);
+  min-block-size: 0;
+  transform: translate3d(0, var(--inkra-infinite-scroll-indicator-block-offset), 0);
+}
+.inkra-infinite-scroll__indicator[data-status="loading"][data-direction="right"] .inkra-infinite-scroll__indicator-surface {
+  block-size: var(--inkra-infinite-scroll-indicator-viewport-block-size);
+  min-block-size: 0;
+  transform: translate3d(0, var(--inkra-infinite-scroll-indicator-block-offset), 0);
+}
+.inkra-infinite-scroll__indicator-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--inkra-space-2);
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  text-align: center;
+}
+.inkra-infinite-scroll__indicator-content > .inkra-progress { max-inline-size: 240px; }
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__indicator-content > .inkra-progress,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__indicator-content > .inkra-progress { min-inline-size: 96px; }
+.inkra-infinite-scroll__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--inkra-space-2);
+  min-inline-size: 0;
+}
+.inkra-infinite-scroll__loading > .inkra-progress { flex: 0 0 auto; }
+.inkra-infinite-scroll__loading-label { min-inline-size: 0; white-space: nowrap; }
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__loading,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__loading { flex-wrap: wrap; }
+.inkra-infinite-scroll__indicator[data-direction="left"] .inkra-infinite-scroll__loading-label,
+.inkra-infinite-scroll__indicator[data-direction="right"] .inkra-infinite-scroll__loading-label { white-space: normal; }
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-infinite-scroll__body { transition-duration: 0ms; }
+}
+
+@media print {
+  .inkra-infinite-scroll { overflow: visible; }
+  .inkra-infinite-scroll__body { transform: none !important; }
+}