@inkra/react 0.5.0 → 0.8.0

package/dist/layout/swipeNavigation.js

@@ -0,0 +1,121 @@
+const ignored = 'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="slider"], [role="spinbutton"], [role="combobox"], [role="separator"], [role="listbox"], video, audio, [data-layout-swipe-ignore]';
+const positive = (value, fallback) => value !== undefined && Number.isFinite(value) && value > 0 ? value : fallback;
+// Listen only for the lifetime of one edge/closing gesture. Vertical scroll and
+// nested horizontal tools keep their native behavior; no global touch-action override.
+export function createLayoutSwipeNavigation(read) {
+    let cancel = () => { };
+    let clearClick = () => { };
+    function start(event, root) {
+        clearClick();
+        cancel();
+        const options = read();
+        const view = root.ownerDocument.defaultView;
+        if (!options || options.enabled === false || !view || event.defaultPrevented || event.touches.length !== 1)
+            return;
+        const target = event.target;
+        if (!target?.closest || target.closest(ignored) || target.closest('.inkra-layout') !== root)
+            return;
+        for (let node = target; node && node !== root; node = node.parentElement) {
+            if (node.scrollWidth > node.clientWidth + 1 && /auto|scroll/.test(view.getComputedStyle(node).overflowX))
+                return;
+        }
+        const rect = root.getBoundingClientRect();
+        if (!rect.width || !root.clientWidth)
+            return;
+        const scale = root.clientWidth / rect.width;
+        const touch = event.touches[0];
+        const rtl = view.getComputedStyle(root).direction === 'rtl';
+        const right = (options.side === 'end') !== rtl;
+        const edge = Math.min(root.clientWidth / 2, positive(options.edgeWidth, 24));
+        const startX = (touch.clientX - rect.left) * scale;
+        if (!options.open && (right ? root.clientWidth - startX : startX) > edge)
+            return;
+        const direction = (right ? -1 : 1) * (options.open ? -1 : 1);
+        const threshold = positive(options.threshold, 48);
+        const doc = root.ownerDocument;
+        let locked = false;
+        let stopped = false;
+        let travel = 0;
+        const suppressClick = () => {
+            clearClick();
+            const block = (click) => {
+                if (!click.detail || ('pointerType' in click && click.pointerType !== 'touch'))
+                    return;
+                click.preventDefault();
+                click.stopImmediatePropagation();
+                clearClick();
+            };
+            root.addEventListener('click', block, { capture: true });
+            const timer = view.setTimeout(() => clearClick(), 700);
+            clearClick = () => {
+                root.removeEventListener('click', block, { capture: true });
+                view.clearTimeout(timer);
+                clearClick = () => { };
+            };
+        };
+        const cleanup = () => {
+            stopped = true;
+            doc.removeEventListener('touchstart', multi);
+            doc.removeEventListener('touchmove', move);
+            doc.removeEventListener('touchend', end);
+            doc.removeEventListener('touchcancel', abort);
+            view.removeEventListener('blur', abort);
+            if (locked)
+                suppressClick();
+            cancel = () => { };
+        };
+        const valid = () => {
+            const next = read();
+            return root.isConnected && next && next.enabled !== false && next.open === options.open
+                && (next.side ?? 'start') === (options.side ?? 'start')
+                && (view.getComputedStyle(root).direction === 'rtl') === rtl
+                && Math.abs(root.getBoundingClientRect().width - rect.width) < 1;
+        };
+        const abort = () => cleanup();
+        const multi = (next) => { if (next.touches.length !== 1)
+            cleanup(); };
+        const move = (next) => {
+            if (stopped)
+                return;
+            const point = Array.from(next.touches).find(item => item.identifier === touch.identifier);
+            if (!valid() || next.defaultPrevented || next.touches.length !== 1 || !point) {
+                cleanup();
+                return;
+            }
+            const dx = (point.clientX - touch.clientX) * scale;
+            const dy = (point.clientY - touch.clientY) * scale;
+            if (!locked) {
+                if (Math.max(Math.abs(dx), Math.abs(dy)) < 8)
+                    return;
+                if (dx * direction <= 0 || Math.abs(dx) < Math.abs(dy) * 1.25) {
+                    cleanup();
+                    return;
+                }
+            }
+            if (!next.cancelable) {
+                cleanup();
+                return;
+            }
+            locked = true;
+            travel = Math.abs(dx) >= Math.abs(dy) * 1.25 ? dx * direction : 0;
+            next.preventDefault();
+        };
+        const end = (next) => {
+            const point = Array.from(next.changedTouches).find(item => item.identifier === touch.identifier);
+            const dx = point ? (point.clientX - touch.clientX) * scale : 0;
+            const dy = point ? (point.clientY - touch.clientY) * scale : 0;
+            const commit = !next.defaultPrevented && next.touches.length === 0 && valid() && locked
+                && point && travel >= threshold && dx * direction >= threshold && Math.abs(dx) >= Math.abs(dy) * 1.25;
+            cleanup();
+            if (commit)
+                read()?.onOpenChange(!options.open);
+        };
+        doc.addEventListener('touchstart', multi, { passive: true });
+        doc.addEventListener('touchmove', move, { passive: false });
+        doc.addEventListener('touchend', end);
+        doc.addEventListener('touchcancel', abort);
+        view.addEventListener('blur', abort);
+        cancel = cleanup;
+    }
+    return { start, cancel: () => cancel(), dispose: () => { cancel(); clearClick(); } };
+}

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/select/StepperSelect.js

@@ -115,7 +115,7 @@ export const SelectStepper = forwardRef(function SelectStepper(inkraProps, forwa
                             forwardedRef(node);
                         else if (forwardedRef)
                             forwardedRef.current = node;
-                    }, role: "spinbutton", type: "button", children: _jsx(PencilText, { ellipsis: true, seed: `${seed}-value`, children: visibleLabel }) }), _jsx(InputAction, { disabled: interactionDisabled || next == null, seed: `${seed}-next`, children: _jsx(Button, { "aria-label": nextLabel, className: "inkra-select-stepper__button inkra-select-stepper__button--next", disabled: interactionDisabled || next == null, onClick: () => change(next), size: buttonSize, type: "button", variant: "ghost", children: _jsx(PencilIcon, { paths: nextPaths, size: iconSize, sourceSize: 24 }) }) }), _jsxs("select", { "aria-hidden": "true", className: "inkra-select-stepper__native", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => {
+                    }, role: "spinbutton", type: "button", children: _jsx(PencilText, { ellipsis: true, seed: `${seed}-value`, children: visibleLabel }) }), _jsx("span", { className: "inkra-input__actions", children: _jsx(InputAction, { disabled: interactionDisabled || next == null, seed: `${seed}-next`, children: _jsx(Button, { "aria-label": nextLabel, className: "inkra-select-stepper__button inkra-select-stepper__button--next", disabled: interactionDisabled || next == null, onClick: () => change(next), size: buttonSize, type: "button", variant: "ghost", children: _jsx(PencilIcon, { paths: nextPaths, size: iconSize, sourceSize: 24 }) }) }) }), _jsxs("select", { "aria-hidden": "true", className: "inkra-select-stepper__native", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => {
                         event.preventDefault();
                         controlRef.current?.focus({ preventScroll: true });
                     }, ref: selectRef, required: state.required && !state.readOnly, tabIndex: -1, value: nativeValue, children: [_jsx("option", { value: "" }), items.map(item => _jsx("option", { disabled: item.disabled, value: item.value, children: item.label }, item.value))] })] }) }));

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/breadcrumb.css

@@ -1,7 +1,98 @@
-.inkra-breadcrumb { min-width: 0; color: var(--inkra-ink); }
-.inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.inkra-breadcrumb {
+  --inkra-breadcrumb-item-height: var(--inkra-control-md);
+  --inkra-breadcrumb-item-padding: var(--inkra-space-3);
+  --inkra-breadcrumb-item-font-size: var(--inkra-text-md);
+  --inkra-breadcrumb-item-icon-size: var(--inkra-icon-md);
+  --inkra-breadcrumb-item-gap: var(--inkra-space-2);
+  color: var(--inkra-ink);
+  max-width: 100%;
+  min-width: 0;
+}
+.inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
 .inkra-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
-.inkra-breadcrumb__link { max-width: 100%; color: var(--inkra-ink-muted); }
-.inkra-breadcrumb__link .inkra-button__label { white-space: normal; overflow-wrap: anywhere; }
-.inkra-breadcrumb__page { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; overflow-wrap: anywhere; }
+.inkra-breadcrumb__link,
+.inkra-breadcrumb__trigger {
+  --inkra-button-visual-height: var(--inkra-breadcrumb-item-height);
+  --inkra-button-visual-padding: var(--inkra-breadcrumb-item-padding);
+  --inkra-button-font-size: var(--inkra-breadcrumb-item-font-size);
+  --inkra-button-icon-size: var(--inkra-breadcrumb-item-icon-size);
+  --inkra-button-content-gap: var(--inkra-breadcrumb-item-gap);
+  color: var(--inkra-accent-strong);
+  max-width: 100%;
+}
+.inkra-breadcrumb__link .inkra-button__label,
+.inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text,
+.inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source,
+.inkra-breadcrumb__trigger .inkra-button__label,
+.inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text,
+.inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source {
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__surface {
+  height: auto;
+  max-width: 100%;
+  min-height: var(--inkra-breadcrumb-item-height);
+  min-width: var(--inkra-breadcrumb-item-height);
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__content {
+  max-width: 100%;
+  min-width: 0;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__focus-ring {
+  height: 100%;
+  inset-inline: 0;
+  top: 0;
+  transform: none;
+}
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):hover:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface,
+.inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):active:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface {
+  transform: none;
+}
+.inkra-breadcrumb__page {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
+  font-size: var(--inkra-breadcrumb-item-font-size);
+  gap: var(--inkra-breadcrumb-item-gap);
+  justify-content: center;
+  letter-spacing: var(--inkra-letter-spacing);
+  line-height: var(--inkra-line-ui);
+  max-width: 100%;
+  min-height: var(--inkra-breadcrumb-item-height);
+  min-width: var(--inkra-breadcrumb-item-height);
+  overflow-wrap: anywhere;
+  padding-inline: var(--inkra-breadcrumb-item-padding);
+}
+.inkra-breadcrumb__label,
+.inkra-breadcrumb__label > .inkra-pencil-text {
+  align-items: center;
+  display: inline-flex;
+  min-width: 0;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.inkra-breadcrumb__label > .inkra-pencil-text > .inkra-pencil-text__source {
+  display: block;
+  min-width: 0;
+  white-space: inherit;
+}
+.inkra-breadcrumb__icon {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--inkra-breadcrumb-item-icon-size);
+  height: var(--inkra-breadcrumb-item-icon-size);
+  justify-content: center;
+  width: var(--inkra-breadcrumb-item-icon-size);
+}
+.inkra-breadcrumb__icon > :is(svg, canvas) {
+  height: 100% !important;
+  max-height: 100%;
+  max-width: 100%;
+  width: 100% !important;
+}
 .inkra-breadcrumb__separator { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 16px; color: var(--inkra-ink-subtle); pointer-events: none; }

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/inventory-grid.css

@@ -0,0 +1,31 @@
+.inkra-inventory-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; min-width: 0; max-width: 100%; color: var(--inkra-ink); }
+.inkra-inventory-grid__container { min-width: 0; max-width: 100%; }
+.inkra-inventory-grid__header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 8px; padding-bottom: 8px; }
+.inkra-inventory-grid__scroll { max-width: 100%; overflow: auto; padding: 4px; }
+.inkra-inventory-grid__board { position: relative; isolation: isolate; direction: ltr; }
+.inkra-inventory-grid__lines { position: absolute; inset: 0; color: var(--inkra-border); pointer-events: none; }
+.inkra-inventory-grid__lines > canvas { position: absolute; }
+.inkra-inventory-grid__item, .inkra-inventory-grid__preview, .inkra-inventory-grid__cell, .inkra-inventory-grid__blocked { position: absolute; }
+.inkra-inventory-grid__item { outline: none; pointer-events: none; }
+.inkra-inventory-grid__cell { box-sizing: border-box; display: grid; place-items: center; pointer-events: auto; touch-action: none; cursor: grab; }
+.inkra-inventory-grid__cell-surface { position: absolute; inset: 2px; pointer-events: none; }
+.inkra-inventory-grid__item-content { position: relative; z-index: 1; padding: 4px; max-width: 100%; max-height: 100%; overflow: hidden; pointer-events: none; font-size: 13px; overflow-wrap: anywhere; text-align: center; }
+.inkra-inventory-grid__item[data-selected] .inkra-inventory-grid__cell-surface { color: var(--inkra-accent-strong); }
+.inkra-inventory-grid__cell-focus { position: absolute; inset: 3px; pointer-events: none; opacity: 0; color: var(--inkra-focus); }
+.inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__cell-focus { opacity: 1; }
+.inkra-inventory-grid__item[data-dragging] { opacity: .28; }
+.inkra-inventory-grid__item[data-disabled] .inkra-inventory-grid__cell { cursor: default; touch-action: auto; }
+.inkra-inventory-grid__container[data-disabled], .inkra-inventory-grid[data-disabled] { opacity: .55; }
+.inkra-inventory-grid__preview { z-index: 2; pointer-events: none; color: var(--inkra-accent-strong); }
+.inkra-inventory-grid__preview[data-valid="false"] { color: var(--inkra-danger); }
+.inkra-inventory-grid__preview[data-valid="false"] .inkra-inventory-grid__cell { outline: 2px solid var(--inkra-danger); outline-offset: -4px; }
+.inkra-inventory-grid__preview .inkra-inventory-grid__cell, .inkra-inventory-grid__overlay .inkra-inventory-grid__cell { pointer-events: none; }
+.inkra-inventory-grid__overlay { position: relative; opacity: .8; pointer-events: none; color: var(--inkra-ink); }
+.inkra-inventory-grid__blocked { display: grid; place-items: center; color: var(--inkra-ink-muted); pointer-events: none; }
+.inkra-inventory-grid__announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (forced-colors: active) {
+  .inkra-inventory-grid__board { border: 1px solid CanvasText; }
+  .inkra-inventory-grid__cell { border: 1px solid CanvasText; background: Canvas; }
+  .inkra-inventory-grid__item:focus-visible .inkra-inventory-grid__cell { outline: 2px solid Highlight; outline-offset: -3px; }
+  .inkra-inventory-grid__preview .inkra-inventory-grid__cell { border: 3px solid Highlight; }
+}

package/dist/styles/layout.css

@@ -4,6 +4,8 @@
 .inkra-layout,
 .inkra-layout__body,
 .inkra-layout__header,
+.inkra-layout__header-sidebar,
+.inkra-layout__header-content,
 .inkra-layout__sidebar,
 .inkra-layout__content,
 .inkra-layout__footer {
@@ -37,6 +39,33 @@
 .inkra-layout__body { display: flex; flex: 1; align-items: stretch; }
 .inkra-layout__header,
 .inkra-layout__footer { position: relative; flex: none; }
+.inkra-layout__header[data-shared-sidebar] { display: flex; align-items: stretch; }
+.inkra-layout__header-sidebar,
+.inkra-layout__header-content {
+  display: flex;
+  align-items: center;
+  padding: var(--inkra-layout-header-padding, 20px);
+  overflow-wrap: anywhere;
+}
+.inkra-layout__header-sidebar {
+  position: relative;
+  flex: 0 0 min(var(--inkra-layout-shared-sidebar-width, 240px), 100%);
+  max-width: 100%;
+}
+.inkra-layout__header-content { flex: 1; }
+.inkra-layout__header-content > * { min-width: 0; }
+.inkra-layout__header-sidebar-divider[data-orientation="vertical"] {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  height: min(32px, max(0px, calc(100% - 2 * var(--inkra-layout-header-padding, 20px))));
+  color: var(--inkra-ink-muted);
+  opacity: 0.56;
+  transform: translate(50%, -50%);
+}
+.inkra-layout__header-sidebar-divider[data-orientation="vertical"]:dir(rtl) { transform: translate(-50%, -50%); }
+.inkra-layout__header-sidebar[hidden],
+.inkra-layout__sidebar[hidden] { display: none; }
 .inkra-layout__sidebar {
   position: relative;
   flex: 0 0 min(var(--inkra-layout-sidebar-width, 240px), 100%);
@@ -55,6 +84,9 @@
 }
 .inkra-layout__sidebar-divider-mobile { display: none; }
 @container inkra-layout (max-width: 639px) {
+  .inkra-layout[data-collapse-at="sm"] > .inkra-layout__header[data-shared-sidebar] { flex-direction: column; }
+  .inkra-layout[data-collapse-at="sm"] > .inkra-layout__header > .inkra-layout__header-sidebar { flex-basis: auto; width: 100%; }
+  .inkra-layout[data-collapse-at="sm"] > .inkra-layout__header > .inkra-layout__header-sidebar > .inkra-layout__header-sidebar-divider { display: none !important; }
   .inkra-layout[data-collapse-at="sm"] > .inkra-layout__body { flex-direction: column; }
   .inkra-layout[data-collapse-at="sm"] > .inkra-layout__body > .inkra-layout__sidebar { flex-basis: auto; width: 100%; }
   .inkra-layout[data-collapse-at="sm"] > .inkra-layout__body > .inkra-layout__sidebar > .inkra-layout__sidebar-divider { display: none; }
@@ -63,6 +95,9 @@
   }
 }
 @container inkra-layout (max-width: 767px) {
+  .inkra-layout[data-collapse-at="md"] > .inkra-layout__header[data-shared-sidebar] { flex-direction: column; }
+  .inkra-layout[data-collapse-at="md"] > .inkra-layout__header > .inkra-layout__header-sidebar { flex-basis: auto; width: 100%; }
+  .inkra-layout[data-collapse-at="md"] > .inkra-layout__header > .inkra-layout__header-sidebar > .inkra-layout__header-sidebar-divider { display: none !important; }
   .inkra-layout[data-collapse-at="md"] > .inkra-layout__body { flex-direction: column; }
   .inkra-layout[data-collapse-at="md"] > .inkra-layout__body > .inkra-layout__sidebar { flex-basis: auto; width: 100%; }
   .inkra-layout[data-collapse-at="md"] > .inkra-layout__body > .inkra-layout__sidebar > .inkra-layout__sidebar-divider { display: none; }
@@ -70,3 +105,53 @@
     display: block; position: absolute; bottom: -4px; inset-inline: 0; width: 100%;
   }
 }
+@media (forced-colors: active), print {
+  .inkra-layout__header-sidebar-divider[data-orientation="vertical"] { opacity: 1; }
+}
+.inkra-grid-resizable,
+.inkra-grid-resizable > .inkra-resizable,
+.inkra-grid-resizable .inkra-resizable__panel > .inkra-resizable {
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+.inkra-grid-resizable__cell {
+  box-sizing: border-box;
+  block-size: 100%;
+  min-inline-size: 0;
+  overflow: auto;
+}
+.inkra-grid-board { min-inline-size: 0; inline-size: 100%; }
+.inkra-grid-board__canvas { position: relative; min-inline-size: 0; }
+.inkra-grid-board__item { position: absolute; transition: transform var(--inkra-motion-fast) var(--inkra-ease); }
+.inkra-grid-board__item.resizing,
+.inkra-grid-board__item.react-draggable-dragging { transition: none; z-index: 2; }
+.inkra-grid-board__surface { box-sizing: border-box; display: flex; flex-direction: column; block-size: 100%; min-inline-size: 0; }
+.inkra-grid-board__surface > .inkra-pencil-surface__content { display: flex; flex-direction: column; block-size: 100%; min-block-size: 0; }
+.inkra-grid-board__header { display: flex; flex-shrink: 0; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 12px 4px; }
+.inkra-grid-board__title { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.inkra-grid-board__content { padding: 4px 12px 24px; min-block-size: 0; overflow: auto; flex: 1; }
+.inkra-grid-board__move,
+.inkra-grid-board__resize {
+  appearance: none; border: 0; background: transparent; color: var(--inkra-ink-muted);
+  display: inline-flex; align-items: center; justify-content: center;
+  inline-size: 44px; block-size: 44px; padding: 0; flex: 0 0 44px;
+}
+.inkra-grid-board__move { cursor: grab; touch-action: none; position: relative; }
+.inkra-grid-board__resize { position: absolute; right: 0; bottom: 0; cursor: se-resize; touch-action: none; z-index: 1; }
+.inkra-grid-board__move:hover,
+.inkra-grid-board__resize:hover { color: var(--inkra-accent-strong); }
+.inkra-grid-board__move:focus-visible,
+.inkra-grid-board__resize:focus-visible { outline: none; }
+.inkra-grid-board__focus { position: absolute; inset: 4px; opacity: 0; pointer-events: none; }
+.inkra-grid-board__move:focus-visible .inkra-grid-board__focus,
+.inkra-grid-board__resize:focus-visible .inkra-grid-board__focus { opacity: 1; }
+.inkra-grid-board__item.react-resizable-hide > .inkra-grid-board__resize { display: none; }
+.inkra-grid-board[data-stacked] .inkra-grid-board__canvas { display: grid; gap: var(--inkra-grid-board-gap); }
+.inkra-grid-board[data-stacked] .inkra-grid-board__item { position: relative !important; transform: none !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; min-block-size: 160px; }
+.inkra-grid-board[data-stacked] .inkra-grid-board__resize { display: none; }
+@media (prefers-reduced-motion: reduce) { .inkra-grid-board__item { transition: none; } }
+@media (forced-colors: active) {
+  .inkra-grid-board__focus { display: none; }
+  .inkra-grid-board__move:focus-visible, .inkra-grid-board__resize:focus-visible { outline: 2px solid Highlight; outline-offset: -4px; }
+}

package/dist/styles/pagination.css

@@ -1,4 +1,14 @@
 .inkra-pagination { min-inline-size: 0; max-inline-size: 100%; color: var(--inkra-ink); }
+.inkra-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inkra-space-2); }
+.inkra-pagination[data-align="start"] { justify-content: flex-start; }
+.inkra-pagination[data-align="center"] { justify-content: center; }
+.inkra-pagination[data-align="end"] { justify-content: flex-end; }
+.inkra-pagination__size { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; }
+.inkra-pagination__size .inkra-select__trigger { max-inline-size: 100%; }
+.inkra-pagination__list { min-inline-size: 0; }
+.inkra-pagination[data-wrap="true"] .inkra-pagination__list { flex-wrap: wrap; }
+.inkra-pagination[data-wrap="true"][data-align="center"] .inkra-pagination__list { justify-content: center; }
+.inkra-pagination[data-wrap="true"][data-align="end"] .inkra-pagination__list { justify-content: flex-end; }
 .inkra-pagination__list { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--inkra-space-1); max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 8px; list-style: none; padding: 8px; margin: 0; }
 .inkra-pagination__list > li { display: flex; flex: 0 0 auto; }
 .inkra-pagination__summary { align-items: center; box-sizing: border-box; font-variant-numeric: tabular-nums; justify-content: center; max-inline-size: 100%; min-block-size: var(--inkra-touch-target); min-inline-size: 0; overflow-wrap: anywhere; padding-inline: var(--inkra-space-2); text-align: center; white-space: normal; }

package/dist/styles/select.css

@@ -58,13 +58,18 @@
   inline-size: 100%;
 }
 
-.inkra-select-stepper .inkra-select-stepper__control,
-.inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
+.inkra-select-stepper .inkra-select-stepper__control {
   flex-wrap: nowrap;
   gap: 0;
   padding-inline: 0;
 }
 
+.inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
+  flex-wrap: nowrap;
+  gap: 0;
+  padding-inline: var(--inkra-field-control-padding);
+}
+
 .inkra-select-stepper__control {
   outline: 0;
 }