@navette-js/infolists 1.0.0-beta.3 → 1.0.0-beta.4

package/lib/index.js

@@ -1,198 +1,890 @@
 // @navette-js/infolists — read-only entries (TextEntry, IconEntry…).
-import { Component, Schema } from '@navette-js/schemas';
-import { Attributes, e, icon, js, configured } from '@navette-js/support';
-import { t } from '@navette-js/support/i18n';
+import { Component, Schema, Text, renderInlineItems } from '@navette-js/schemas';
+import { Attributes, HtmlString, cls, e, evaluate, findShade, icon, isSafeUrl, js, markdownToHtml, sanitizeHtml, configured } from '@navette-js/support';
+import { diffForHumans, t, tc } from '@navette-js/support/i18n';
 const headline = (s) => s.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').toLowerCase().replace(/^./, (c) => c.toUpperCase());
 /** Default label: "Department" for `department.name`. */
 const defaultLabel = (name) => headline(name.includes('.') ? name.split('.').slice(-2, -1)[0] : name);
 let colorManager = null;
 export const useColorManager = (manager) => { colorManager = manager; };
+/** Filament-style merge: the defaults come first (and keep their position), `class` and `style` are concatenated defaults-first. */
+function mergeAttrs(defaults, attributes) {
+    const out = {};
+    for (const [key, value] of Object.entries(defaults))
+        if (value !== null && value !== undefined && value !== false)
+            out[key] = value;
+    for (const [key, value] of Object.entries(attributes)) {
+        if (value === null || value === undefined || value === false)
+            continue;
+        out[key] = (key === 'class' || key === 'style') && out[key] ? [out[key], value].filter((part) => part !== '').join(' ') : value;
+    }
+    return out;
+}
+/** Appends classes (the attribute keeps its position, or goes last). */
+function withClass(attributes, list) {
+    const added = cls(list);
+    return added ? { ...attributes, class: attributes.class ? `${attributes.class} ${added}` : added } : attributes;
+}
+function withStyle(attributes, styles) {
+    const added = styles.filter(Boolean).join('; ');
+    if (!added)
+        return attributes;
+    const existing = String(attributes.style ?? '').replace(/[;\s]+$/, '');
+    return { ...attributes, style: `${existing ? `${existing}; ` : ''}${added};` };
+}
+/** Values are expected to be escaped already; only `"` is escaped again. */
+const renderAttrs = (attributes) => new Attributes(attributes).toHtml();
+const ATTRIBUTE_NAME = /^[a-zA-Z_:@][a-zA-Z0-9_:.@-]*$/;
+/** Developer-supplied attributes: valid names only, values escaped. */
+const escapeAttributes = (attributes) => Object.fromEntries(Object.entries(attributes)
+    .filter(([name, value]) => ATTRIBUTE_NAME.test(name) && value !== null && value !== undefined && value !== false)
+    .map(([name, value]) => [name, value === true ? true : e(value)]));
+const isBlank = (value) => value === null || value === undefined || (typeof value === 'string' && value.trim() === '') || (Array.isArray(value) && value.length === 0);
+const ALIGNMENTS = new Set(['start', 'center', 'end', 'left', 'right', 'justify', 'between']);
+const alignmentClass = (alignment) => (alignment && ALIGNMENTS.has(alignment) ? `fi-align-${alignment}` : null);
+const safeName = (value) => value.replace(/[^a-zA-Z0-9_-]/g, '');
+const ICON_NAME = /^[a-zA-Z0-9][a-zA-Z0-9-]*$/;
+const renderIcon = (name, options = {}) => (typeof name === 'string' && ICON_NAME.test(name) ? icon(name, options) : '');
+const tooltipJs = (text) => (text === null || text === undefined || text === '' ? null : `{ content: ${js(String(text))}, theme: $store.theme, allowHTML: false }`);
+const decodeEntities = (html) => html.replace(/&nbsp;/g, ' ').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#0?39;/g, "'").replace(/&amp;/g, '&');
+const stripTags = (html) => decodeEntities(html.replace(/<[^>]*>/g, ''));
+const isNumericValue = (value) => (typeof value === 'number' && Number.isFinite(value)) || (typeof value === 'string' && value.trim() !== '' && Number.isFinite(Number(value)));
+/** Simple CSS length (`40px`, `2.5rem`, `50%`, `auto`); a number is a length in pixels. Anything else is rejected. */
+const cssLength = (value) => {
+    if (typeof value === 'number')
+        return Number.isFinite(value) && value >= 0 ? `${value}px` : null;
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    return /^(\d+(\.\d+)?|\.\d+)(px|rem|em|%|vh|vw|ch)$/.test(trimmed) || trimmed === 'auto' ? trimmed : null;
+};
+/** Image sources: same-site paths (`/…`) and http(s) URLs only. */
+const isImageUrl = (value) => typeof value === 'string' && /^(\/(?!\/)|https?:\/\/)/i.test(value.trim());
+const resolveItem = (option, record, state) => (typeof option === 'function' ? option(record, state) : option);
+const resolveMap = (option, record, state) => {
+    if (option !== null && typeof option === 'object')
+        return option[String(state)] ?? null;
+    return resolveItem(option, record, state);
+};
+const TEXT_SIZES = new Set(['xs', 'sm', 'md', 'lg']);
+const textSize = (size) => (size === 'base' ? 'md' : size && TEXT_SIZES.has(size) ? size : size ? safeName(size) || 'sm' : 'sm');
+const FONT_WEIGHTS = new Set(['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black']);
+const FONT_FAMILIES = new Set(['sans', 'serif', 'mono']);
+const fontClass = (value, allowed) => (!value ? null : allowed.has(value) ? `fi-font-${value}` : safeName(value) || null);
+/** Text color classes of a text entry item (Filament's `TextEntryComponent\ItemComponent` color map). */
+const itemColorCache = new Map();
+function itemColorClasses(color) {
+    if (!color)
+        return [];
+    const base = ['fi-color', `fi-color-${safeName(color)}`];
+    const palette = colorManager?.getColor(color), gray = colorManager?.getColor('gray');
+    if (!palette || !gray)
+        return base;
+    const key = `${color}|${Object.values(palette).join(',')}|${gray[800]}`;
+    let classes = itemColorCache.get(key);
+    if (!classes) {
+        const text = findShade(palette, 'oklch(1 0 0)') ?? 900;
+        const dark = findShade(palette, gray[800], { maxShade: 600, fromDarkest: true }) ?? 200;
+        classes = [...base, `fi-text-color-${text}`, `dark:fi-text-color-${dark}`];
+        itemColorCache.set(key, classes);
+    }
+    return classes;
+}
+const badgeColorClasses = (color) => (color && color !== 'gray' ? (colorManager?.getComponentClasses('badge', color) ?? []) : []);
+/** Icon entries: 3:1 contrast shades; gray is the default and gets no classes. */
+const iconColorClasses = (color) => (color && color !== 'gray' ? (colorManager?.getComponentClasses('icon-column', color) ?? []) : []);
+// ------------------------------------------------------------------ dates
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const pad = (value, length = 2) => String(Math.abs(value)).padStart(length, '0');
+const ordinal = (value) => (value % 10 === 1 && value % 100 !== 11 ? 'st' : value % 10 === 2 && value % 100 !== 12 ? 'nd' : value % 10 === 3 && value % 100 !== 13 ? 'rd' : 'th');
+/** Date state: a `Date`, a timestamp in milliseconds, or a string. Strings without a time zone (SQL values) are read as UTC; a time alone is today's. */
+function parseDate(value) {
+    if (value instanceof Date)
+        return Number.isNaN(value.getTime()) ? null : value;
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? new Date(value) : null;
+    if (typeof value !== 'string' || value.trim() === '')
+        return null;
+    let text = value.trim();
+    const time = /^(\d{1,2}):(\d{2})(?::(\d{2}))?(\.\d+)?$/.exec(text);
+    if (time)
+        text = `${new Date().toISOString().slice(0, 10)}T${pad(Number(time[1]))}:${time[2]}:${time[3] ?? '00'}Z`;
+    else if (/^\d{4}-\d{2}-\d{2}$/.test(text))
+        text = `${text}T00:00:00Z`;
+    else if (!/[zZ]$|[+-]\d\d:?\d\d$/.test(text))
+        text = `${text.replace(' ', 'T').replace(/(\.\d{3})\d+/, '$1')}Z`;
+    const date = new Date(text);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+const isTimeZone = (zone) => { try {
+    new Intl.DateTimeFormat('en-US', { timeZone: zone });
+    return true;
+}
+catch {
+    return false;
+} };
+function dateParts(date, timeZone) {
+    const zone = isTimeZone(timeZone) ? timeZone : 'UTC';
+    const parts = Object.fromEntries(new Intl.DateTimeFormat('en-US', { timeZone: zone, year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hourCycle: 'h23', timeZoneName: 'short' }).formatToParts(date).map((part) => [part.type, part.value]));
+    const year = Number(parts.year), month = Number(parts.month), day = Number(parts.day), hour = Number(parts.hour) % 24, minute = Number(parts.minute), second = Number(parts.second);
+    const offset = Math.round((Date.UTC(year, month - 1, day, hour, minute, second) - Math.floor(date.getTime() / 1000) * 1000) / 60000);
+    return { year, month, day, hour, minute, second, ms: date.getUTCMilliseconds(), weekday: new Date(Date.UTC(year, month - 1, day)).getUTCDay(), offset, zone: parts.timeZoneName ?? zone, timestamp: Math.floor(date.getTime() / 1000) };
+}
+const offsetText = (minutes, colon) => `${minutes < 0 ? '-' : '+'}${pad(Math.floor(Math.abs(minutes) / 60))}${colon ? ':' : ''}${pad(Math.abs(minutes) % 60)}`;
+const isLeapYear = (year) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+/** PHP `date()` format (`M j, Y`, `d/m/Y H:i`…), with English month and day names. A backslash escapes a character. */
+export function formatPhpDate(date, format, timeZone = 'UTC') {
+    const p = dateParts(date, timeZone);
+    const hour12 = p.hour % 12 || 12;
+    const tokens = {
+        d: () => pad(p.day), D: () => DAYS[p.weekday].slice(0, 3), j: () => String(p.day), l: () => DAYS[p.weekday], N: () => String(p.weekday || 7), S: () => ordinal(p.day), w: () => String(p.weekday),
+        z: () => String(Math.round((Date.UTC(p.year, p.month - 1, p.day) - Date.UTC(p.year, 0, 1)) / 86400000)),
+        F: () => MONTHS[p.month - 1], M: () => MONTHS[p.month - 1].slice(0, 3), m: () => pad(p.month), n: () => String(p.month), t: () => String(new Date(Date.UTC(p.year, p.month, 0)).getUTCDate()),
+        L: () => (isLeapYear(p.year) ? '1' : '0'), Y: () => String(p.year), y: () => pad(p.year % 100),
+        a: () => (p.hour < 12 ? 'am' : 'pm'), A: () => (p.hour < 12 ? 'AM' : 'PM'), g: () => String(hour12), G: () => String(p.hour), h: () => pad(hour12), H: () => pad(p.hour),
+        i: () => pad(p.minute), s: () => pad(p.second), u: () => pad(p.ms * 1000, 6), v: () => pad(p.ms, 3),
+        e: () => (isTimeZone(timeZone) ? timeZone : 'UTC'), T: () => p.zone, P: () => offsetText(p.offset, true), O: () => offsetText(p.offset, false), p: () => (p.offset === 0 ? 'Z' : offsetText(p.offset, true)), Z: () => String(p.offset * 60),
+        U: () => String(p.timestamp),
+        c: () => `${p.year}-${pad(p.month)}-${pad(p.day)}T${pad(p.hour)}:${pad(p.minute)}:${pad(p.second)}${offsetText(p.offset, true)}`,
+        r: () => `${DAYS[p.weekday].slice(0, 3)}, ${pad(p.day)} ${MONTHS[p.month - 1].slice(0, 3)} ${p.year} ${pad(p.hour)}:${pad(p.minute)}:${pad(p.second)} ${offsetText(p.offset, false)}`,
+    };
+    let out = '';
+    for (let index = 0; index < format.length; index++) {
+        const character = format[index];
+        if (character === '\\' && index + 1 < format.length) {
+            out += format[++index];
+            continue;
+        }
+        out += Object.hasOwn(tokens, character) ? tokens[character]() : character;
+    }
+    return out;
+}
+/** English macro formats of Carbon's `isoFormat()`. */
+const ISO_MACROS = {
+    LT: 'h:mm A', LTS: 'h:mm:ss A', L: 'MM/DD/YYYY', LL: 'MMMM D, YYYY', LLL: 'MMMM D, YYYY h:mm A', LLLL: 'dddd, MMMM D, YYYY h:mm A',
+    l: 'M/D/YYYY', ll: 'MMM D, YYYY', lll: 'MMM D, YYYY h:mm A', llll: 'ddd, MMM D, YYYY h:mm A',
+};
+const ISO_TOKEN = /\[[^\]]*\]|LTS|LT|LLLL|LLL|LL|L|llll|lll|ll|l|YYYY|YY|Qo|Q|MMMM|MMM|MM|Mo|M|DDDD|DDDo|DDD|Do|DD|D|dddd|ddd|dd|do|d|E|e|HH|H|hh|h|kk|k|mm|m|ss|s|SSS|SS|S|A|a|ZZ|Z|X|x|zz|z/g;
+/** Carbon `isoFormat()` format (`L`, `LLL`, `dddd D MMMM YYYY`…), in English. Text in `[brackets]` is kept as is. */
+export function formatIsoDate(date, format, timeZone = 'UTC') {
+    const p = dateParts(date, timeZone);
+    const hour12 = p.hour % 12 || 12;
+    const dayOfYear = Math.round((Date.UTC(p.year, p.month - 1, p.day) - Date.UTC(p.year, 0, 1)) / 86400000) + 1;
+    const tokens = {
+        YYYY: () => String(p.year), YY: () => pad(p.year % 100), Q: () => String(Math.ceil(p.month / 3)), Qo: () => `${Math.ceil(p.month / 3)}${ordinal(Math.ceil(p.month / 3))}`,
+        MMMM: () => MONTHS[p.month - 1], MMM: () => MONTHS[p.month - 1].slice(0, 3), MM: () => pad(p.month), Mo: () => `${p.month}${ordinal(p.month)}`, M: () => String(p.month),
+        DDDD: () => pad(dayOfYear, 3), DDDo: () => `${dayOfYear}${ordinal(dayOfYear)}`, DDD: () => String(dayOfYear), Do: () => `${p.day}${ordinal(p.day)}`, DD: () => pad(p.day), D: () => String(p.day),
+        dddd: () => DAYS[p.weekday], ddd: () => DAYS[p.weekday].slice(0, 3), dd: () => DAYS[p.weekday].slice(0, 2), do: () => `${p.weekday}${ordinal(p.weekday)}`, d: () => String(p.weekday), e: () => String(p.weekday), E: () => String(p.weekday || 7),
+        HH: () => pad(p.hour), H: () => String(p.hour), hh: () => pad(hour12), h: () => String(hour12), kk: () => pad(p.hour || 24), k: () => String(p.hour || 24),
+        mm: () => pad(p.minute), m: () => String(p.minute), ss: () => pad(p.second), s: () => String(p.second),
+        SSS: () => pad(p.ms, 3), SS: () => pad(Math.floor(p.ms / 10)), S: () => String(Math.floor(p.ms / 100)),
+        A: () => (p.hour < 12 ? 'AM' : 'PM'), a: () => (p.hour < 12 ? 'am' : 'pm'), Z: () => offsetText(p.offset, true), ZZ: () => offsetText(p.offset, false),
+        X: () => String(p.timestamp), x: () => String(date.getTime()), z: () => p.zone, zz: () => p.zone,
+    };
+    return format.replace(ISO_TOKEN, (token) => {
+        if (token.startsWith('['))
+            return token.slice(1, -1);
+        if (Object.hasOwn(ISO_MACROS, token))
+            return formatIsoDate(date, ISO_MACROS[token], timeZone);
+        return tokens[token]();
+    });
+}
+/** Relative date: "2 days ago", or "in 3 hours" style for a future date ("3 hours from now"). */
+function since(date, now = new Date()) {
+    if (date.getTime() <= now.getTime())
+        return diffForHumans(date, now) ?? '';
+    return (diffForHumans(now, date) ?? '').replace(/ ago$/, ' from now');
+}
+// ------------------------------------------------------------------ numbers
+/** PHP `number_format()`: rounded to `decimals`, with the given separators. */
+function numberFormat(value, decimals, decimalSeparator, thousandsSeparator) {
+    const fixed = Math.abs(value).toFixed(Math.max(0, Math.min(20, Math.floor(decimals))));
+    const [integer, fraction] = fixed.split('.');
+    const sign = value < 0 && Number(fixed) !== 0 ? '-' : '';
+    return `${sign}${integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator)}${fraction ? `${decimalSeparator}${fraction}` : ''}`;
+}
+const fractionDigits = (digits) => (typeof digits === 'number' && Number.isFinite(digits) ? Math.max(0, Math.min(20, Math.floor(digits))) : null);
 /** Base entry: a label and a value read from the record (dotted paths allowed) or computed. */
 class Entry extends Component {
     _label = null;
     _state = null;
+    _default = null;
+    _hiddenLabel = false;
+    _placeholder = null;
+    _url = null;
+    _openUrlInNewTab = false;
+    _tooltip = null;
+    _emptyTooltip = null;
+    _inlineLabel = false;
+    _alignment = null;
+    _hiddenJs = null;
+    _visibleJs = null;
+    _extraEntryWrapperAttributes = {};
+    _slots = {};
     constructor(name) { super(); this._name = name; }
     hasStatePath() { return true; }
+    /** Label: a string or a function of the context. Escaped when rendered. */
     label(label) { this._label = label; return this; }
-    _hiddenLabel = false;
     /** Keeps the label for screen readers only. */
     hiddenLabel(condition = true) { this._hiddenLabel = condition; return this; }
     /** Computed value; without it, the record attribute of the same name is shown. */
     state(resolver) { this._state = resolver; return this; }
+    /** State used when the real state is `null` or `undefined`; it is displayed as if it were real. */
+    default(state) { this._default = state; return this; }
+    /** Gray text shown when the state is empty. */
+    placeholder(text) { this._placeholder = text; return this; }
+    /** Makes the content a link. Only `http(s)`, `mailto` and relative URLs are rendered: any other scheme is ignored. */
+    url(url, openInNewTab = null) {
+        this._url = url;
+        if (openInNewTab !== null)
+            this._openUrlInNewTab = openInNewTab;
+        return this;
+    }
+    openUrlInNewTab(condition = true) { this._openUrlInNewTab = condition; return this; }
+    /** Tooltip on the content: a string, or a function of the record and the state item. */
+    tooltip(tooltip) { this._tooltip = tooltip; return this; }
+    /** Tooltip shown on the content when the state is empty. */
+    emptyTooltip(tooltip) { this._emptyTooltip = tooltip; return this; }
+    /** Label next to the content instead of above it (from the `sm` breakpoint). */
+    inlineLabel(condition = true) { this._inlineLabel = condition; return this; }
+    /** Content alignment: `start`, `center`, `end`, `left`, `right`, `justify` or `between`. */
+    alignment(alignment) { this._alignment = alignment; return this; }
+    alignStart() { return this.alignment('start'); }
+    alignCenter() { return this.alignment('center'); }
+    alignEnd() { return this.alignment('end'); }
+    alignLeft() { return this.alignment('left'); }
+    alignRight() { return this.alignment('right'); }
+    alignJustify() { return this.alignment('justify'); }
+    /** Hides the entry in the browser while this JavaScript expression is true (`$get('role') !== 'staff'`). Written by the developer, never from user input. */
+    hiddenJs(expression) { this._hiddenJs = expression; return this; }
+    /** Shows the entry in the browser only while this JavaScript expression is true. */
+    visibleJs(expression) { this._visibleJs = expression; return this; }
+    /** Attributes of the outer element of the entry wrapper (label and content). Values are escaped. */
+    extraEntryWrapperAttributes(attributes) { Object.assign(this._extraEntryWrapperAttributes, attributes); return this; }
+    aboveLabel(content) { this._slots.aboveLabel = content; return this; }
+    belowLabel(content) { this._slots.belowLabel = content; return this; }
+    beforeLabel(content) { this._slots.beforeLabel = content; return this; }
+    /** Content after the label, aligned to the end. */
+    afterLabel(content) { this._slots.afterLabel = content; return this; }
+    aboveContent(content) { this._slots.aboveContent = content; return this; }
+    belowContent(content) { this._slots.belowContent = content; return this; }
+    beforeContent(content) { this._slots.beforeContent = content; return this; }
+    /** Content after the entry content, aligned to the end. */
+    afterContent(content) { this._slots.afterContent = content; return this; }
+    async getLabel() { return (await evaluate(this._label, this.context())) ?? defaultLabel(this._name); }
     async getState() {
         const ctx = this.context();
+        let state;
         if (this._state)
-            return this._state(ctx);
-        const record = ctx.record;
-        // `department.name`: flat `department_name` attribute (column computed by the adapter), otherwise a path into the object.
-        if (record && this._name.includes('.'))
-            return record[this._name.replace(/\./g, '_')] ?? this._name.split('.').reduce((node, key) => node?.[key], record);
-        return record?.[this._name];
+            state = await this._state(ctx);
+        else {
+            const record = ctx.record;
+            // `department.name`: flat `department_name` attribute (column computed by the adapter), otherwise a path into the object.
+            if (record && this._name.includes('.'))
+                state = record[this._name.replace(/\./g, '_')] ?? this._name.split('.').reduce((node, key) => node?.[key], record);
+            else
+                state = record?.[this._name];
+        }
+        return state === null || state === undefined ? (this._default ?? state) : state;
+    }
+    getExtraAttributesMap() { return escapeAttributes(this._extraAttributes); }
+    async getAlignment() { const alignment = await evaluate(this._alignment, this.context()); return alignment && ALIGNMENTS.has(alignment) ? alignment : null; }
+    getEmptyAttributes(base) { return mergeAttrs({ 'x-tooltip': tooltipJs(this._emptyTooltip) }, withClass(this.getExtraAttributesMap(), base)); }
+    emptyHtml(base) {
+        return `<div ${renderAttrs(this.getEmptyAttributes(base))}>${this._placeholder !== null ? `<p class="fi-in-placeholder">${e(this._placeholder)}</p>` : ''}</div>`;
+    }
+    /** Actions placed in the slots, so that they can be mounted (`schemaComponent` = entry key). */
+    getActions() {
+        const actions = [];
+        for (const slot of Object.values(this._slots)) {
+            let value = slot;
+            if (typeof value === 'function') {
+                try {
+                    value = slot(this.context());
+                }
+                catch {
+                    continue;
+                }
+                if (value instanceof Promise) {
+                    value.catch(() => { });
+                    continue;
+                }
+            }
+            for (const item of [].concat(value ?? [])) {
+                if (!item || typeof item !== 'object' || item instanceof Component || item instanceof HtmlString)
+                    continue;
+                actions.push(...(typeof item.getActions === 'function' ? item.getActions() : [item]));
+            }
+        }
+        return actions;
+    }
+    async renderSlot(name) {
+        const slot = this._slots[name];
+        if (slot === undefined || slot === null)
+            return null;
+        const value = await evaluate(slot, this.context());
+        const items = [].concat(value ?? []).map((item) => (typeof item === 'string' || item instanceof HtmlString ? Text.make(item) : item));
+        return renderInlineItems(this, items, { alignment: name === 'afterLabel' || name === 'afterContent' ? 'end' : null, scope: { path: this.getStatePath(), containerPath: this.container.getStatePath() }, mountKey: this.getKey(), actionView: 'link' });
     }
-    /** Wraps the content with the entry label. */
-    wrap(content) {
-        if (this._hiddenLabel)
-            return `<div class="fi-in-entry"><div class="fi-in-entry-label fi-sr-only" role="term">${e(this._label ?? defaultLabel(this._name))}</div><div class="fi-in-entry-content-col"><div class="fi-in-entry-content-ctn" role="definition"><div class="fi-in-entry-content">${content}</div></div></div></div>`;
-        return `<div class="fi-in-entry"><div class="fi-in-entry-label-col"><div class="fi-in-entry-label-ctn"><div class="fi-in-entry-label" role="term">${e(this._label ?? defaultLabel(this._name))}</div></div></div><div class="fi-in-entry-content-col"><div class="fi-in-entry-content-ctn" role="definition"><div class="fi-in-entry-content">${content}</div></div></div></div>`;
+    /** Places the content in the entry wrapper: label column, content column, slots and link. */
+    async wrapEmbeddedHtml(content) {
+        const ctx = this.context();
+        const label = await this.getLabel();
+        const hasLabel = label !== '';
+        const isLabelHidden = Boolean(await evaluate(this._hiddenLabel, ctx));
+        const hasInlineLabel = Boolean(await evaluate(this._inlineLabel, ctx));
+        const alignment = await this.getAlignment();
+        const url = await evaluate(this._url, ctx);
+        const href = typeof url === 'string' && url.trim() !== '' && isSafeUrl(url) ? url : null;
+        const [aboveLabel, belowLabel, beforeLabel, afterLabel, aboveContent, beforeContent, afterContent, belowContent] = await Promise.all(['aboveLabel', 'belowLabel', 'beforeLabel', 'afterLabel', 'aboveContent', 'beforeContent', 'afterContent', 'belowContent'].map((name) => this.renderSlot(name)));
+        const attributes = withClass(escapeAttributes(this._extraEntryWrapperAttributes), ['fi-in-entry', { 'fi-in-entry-has-inline-label': hasInlineLabel }]);
+        let html = `<div ${renderAttrs(attributes)}>`;
+        if (hasLabel && isLabelHidden)
+            html += `<div class="fi-in-entry-label fi-sr-only" role="term">${e(label)}</div>`;
+        if ((hasLabel && !isLabelHidden) || hasInlineLabel || aboveLabel || belowLabel || beforeLabel || afterLabel) {
+            html += `<div class="fi-in-entry-label-col">${aboveLabel ?? ''}`;
+            if ((hasLabel && !isLabelHidden) || beforeLabel || afterLabel) {
+                html += `<div class="fi-in-entry-label-ctn">${beforeLabel ?? ''}${hasLabel && !isLabelHidden ? `<div class="fi-in-entry-label" role="term">${e(label)}</div>` : ''}${afterLabel ?? ''}</div>`;
+            }
+            html += `${belowLabel ?? ''}</div>`;
+        }
+        html += '<div class="fi-in-entry-content-col">';
+        if (aboveContent !== null)
+            html += `<div class="fi-in-entry-content-slot">${aboveContent}</div>`;
+        html += '<div class="fi-in-entry-content-ctn" role="definition">';
+        if (beforeContent !== null)
+            html += `<div class="fi-in-entry-content-slot">${beforeContent}</div>`;
+        const contentClass = cls(['fi-in-entry-content', alignmentClass(alignment)]);
+        html += href !== null
+            ? `<a href="${e(href)}"${(await evaluate(this._openUrlInNewTab, ctx)) ? ' target="_blank"' : ''} class="${contentClass}">${content}</a>`
+            : `<div class="${contentClass}">${content}</div>`;
+        html += `${afterContent ?? ''}</div>${belowContent ?? ''}</div></div>`;
+        return html;
+    }
+    /** `hiddenJs()` / `visibleJs()`: the grid wrapper becomes a `<fieldset>` toggled by Alpine, as in Filament. */
+    async toSchemaHtml(isVisible) {
+        const html = await super.toSchemaHtml(isVisible);
+        const hidden = this._hiddenJs?.trim() || null, visible = this._visibleJs?.trim() || null;
+        const visibility = hidden && visible ? `(! (${hidden})) && (${visible})` : hidden ? `! (${hidden})` : visible;
+        const start = html.indexOf('<div');
+        const end = /><div class="fi-sc-component[ "]/.exec(html)?.index;
+        if (!isVisible || visibility === null || start < 0 || end === undefined || html.slice(start, end).includes('fi-sc-visibility-fieldset'))
+            return html;
+        let tag = html.slice(start, end).replace(/^<div/, '<fieldset disabled role="none"');
+        const toggle = ` x-bind:class="${e(`{ 'fi-hidden': ! (${visibility}) }`)}" x-bind:disabled="${e(`! (${visibility})`)}" x-cloak`;
+        const dataStart = tag.indexOf(' x-data="');
+        if (dataStart >= 0) {
+            const dataEnd = tag.indexOf('"', dataStart + 9);
+            tag = `${tag.slice(0, dataEnd + 1)}${toggle}${tag.slice(dataEnd + 1)}`;
+        }
+        else
+            tag += toggle;
+        tag = /\sclass="/.test(tag) ? tag.replace(/(\sclass="[^"]*)"/, '$1 fi-sc-visibility-fieldset"') : `${tag} class="fi-sc-visibility-fieldset"`;
+        const close = html.lastIndexOf('</div>');
+        return `${html.slice(0, start)}${tag}>${html.slice(end + 1, close)}</fieldset>${html.slice(close + '</div>'.length)}`;
     }
 }
 let htmlSanitizer = null;
 const TIGHT_ITEM = new RegExp('<li><p>((?:(?!</?p>|</?li>)[^])*)</p></li>', 'g');
-/** Sanitizer applied to HTML an entry renders as is (`markdown()`). Without one, the content is escaped. */
+/**
+ * Sanitizer applied to the HTML an entry renders as is (`html()`, `markdown()`, `prose()`).
+ * Without one, `sanitizeHtml()` from `@navette-js/support` is used.
+ */
 export const useHtmlSanitizer = (sanitizer) => { htmlSanitizer = sanitizer; };
-/** Read-only text: badge, color, icon, money, date, placeholder. */
+const sanitize = (html) => (htmlSanitizer ?? sanitizeHtml)(html);
+/** Read-only text: badge, color, icon, money, number, date, list, Markdown and HTML. */
 export class TextEntry extends Entry {
     _badge = false;
     _color = null;
     _icon = null;
+    _iconColor = null;
+    _iconPosition = 'before';
     _format = null;
-    _money = null;
-    _date = false;
-    _placeholder = null;
+    _formatter = null;
+    _formatterKind = null;
+    _isDate = false;
+    _isMoney = false;
+    _isNumeric = false;
+    _timezone = null;
+    _prefix = null;
+    _suffix = null;
+    _prose = false;
+    _markdown = false;
+    _html = false;
+    _characterLimit = null;
+    _wordLimit = null;
+    _listWithLineBreaks = false;
+    _bulleted = false;
+    _listLimit = null;
+    _expandableLimitedList = false;
+    _separator = null;
+    _copyable = false;
+    _copyableState = null;
+    _copyMessage = null;
+    _copyMessageDuration = 2000;
+    _size = null;
+    _weight = null;
+    _fontFamily = null;
+    _lineClamp = null;
+    _wrap = true;
     static make(name) { return configured(new TextEntry(name)); }
     badge(condition = true) { this._badge = condition; return this; }
+    /** Text (or badge) color: a name, or a function of the record and the state item. */
     color(color) { this._color = color; return this; }
-    icon(resolver) { this._icon = resolver; return this; }
+    /** Heroicon before the text: a name, or a function of the record and the state item returning a name or `null`. */
+    icon(icon) { this._icon = icon; return this; }
+    iconColor(color) { this._iconColor = color; return this; }
+    iconPosition(position) { this._iconPosition = position === 'after' ? 'after' : 'before'; return this; }
+    /** Displayed text computed from the raw state; it takes precedence over date, number and money formatting. */
     formatStateUsing(formatter) { this._format = formatter; return this; }
-    money(currency = 'usd') { this._money = currency.toUpperCase(); return this; }
-    date(condition = true) { this._date = condition; return this; }
-    placeholder(text) { this._placeholder = text; return this; }
-    _dateTime = false;
-    _time = null;
-    _suffix = null;
-    dateTime(condition = true) { this._dateTime = condition; return this; }
-    time(format = 'H:i:s') { this._time = format; return this; }
-    suffix(text) { this._suffix = text; return this; }
-    _prose = false;
-    _markdown = false;
-    /** Typographic styling of the content (`fi-prose`). */
-    prose(condition = true) { this._prose = condition; return this; }
+    setFormatter(kind, formatter) {
+        if (formatter) {
+            this._formatter = formatter;
+            this._formatterKind = kind;
+        }
+        else if (this._formatterKind === kind) {
+            this._formatter = null;
+            this._formatterKind = null;
+        }
+        return this;
+    }
+    dateFormatter(kind, format, timezone) {
+        return (state) => {
+            const date = parseDate(state);
+            if (!date)
+                return String(state);
+            const zone = timezone ?? this._timezone ?? 'UTC';
+            return kind === 'since' ? since(date) : kind === 'iso' ? formatIsoDate(date, format, zone) : formatPhpDate(date, format, zone);
+        };
+    }
+    /** Date in a PHP format, `M j, Y` by default ("Mar 5, 2024"). `false` turns date formatting off. */
+    date(format = null, timezone = null) {
+        this._isDate = format !== false;
+        return this.setFormatter('date', format === false ? null : this.dateFormatter('php', typeof format === 'string' ? format : 'M j, Y', timezone));
+    }
+    /** Date and time, `M j, Y H:i:s` by default. */
+    dateTime(format = null, timezone = null) {
+        return this.setFormatter('date', format === false ? null : this.dateFormatter('php', typeof format === 'string' ? format : 'M j, Y H:i:s', timezone));
+    }
+    /** Time, `H:i:s` by default. */
+    time(format = null, timezone = null) { return this.setFormatter('date', this.dateFormatter('php', format ?? 'H:i:s', timezone)); }
+    /** Date in a Carbon `isoFormat()` format, `L` by default ("03/05/2024"). */
+    isoDate(format = null, timezone = null) { return this.setFormatter('date', this.dateFormatter('iso', format ?? 'L', timezone)); }
+    /** Date and time in an `isoFormat()` format, `LLL` by default ("March 5, 2024 10:11 AM"). */
+    isoDateTime(format = null, timezone = null) { return this.setFormatter('date', this.dateFormatter('iso', format ?? 'LLL', timezone)); }
+    /** Time in an `isoFormat()` format, `LT` by default ("10:11 AM"). */
+    isoTime(format = null, timezone = null) { return this.setFormatter('date', this.dateFormatter('iso', format ?? 'LT', timezone)); }
+    /** Relative date: "2 days ago". */
+    since(timezone = null) { return this.setFormatter('date', this.dateFormatter('since', '', timezone)); }
+    dateTooltipFor(kind, format, timezone) {
+        const formatter = this.dateFormatter(kind, format, timezone);
+        return this.tooltip((_record, state) => (isBlank(state) ? null : formatter(state)));
+    }
+    /** Tooltip with the date in a PHP format (`M j, Y` by default). */
+    dateTooltip(format = null, timezone = null) { return this.dateTooltipFor('php', format ?? 'M j, Y', timezone); }
+    dateTimeTooltip(format = null, timezone = null) { return this.dateTooltipFor('php', format ?? 'M j, Y H:i:s', timezone); }
+    timeTooltip(format = null, timezone = null) { return this.dateTooltipFor('php', format ?? 'H:i:s', timezone); }
+    isoDateTooltip(format = null, timezone = null) { return this.dateTooltipFor('iso', format ?? 'L', timezone); }
+    isoDateTimeTooltip(format = null, timezone = null) { return this.dateTooltipFor('iso', format ?? 'LLL', timezone); }
+    isoTimeTooltip(format = null, timezone = null) { return this.dateTooltipFor('iso', format ?? 'LT', timezone); }
+    sinceTooltip(timezone = null) { return this.dateTooltipFor('since', '', timezone); }
+    /** IANA time zone in which dates are displayed (`UTC` by default). */
+    timezone(timezone) { this._timezone = timezone; return this; }
+    /**
+     * Formatted number. `numeric(2)`: two decimal places. Options: `decimalPlaces`, `maxDecimalPlaces`, `locale` (`en-US` by default),
+     * or `decimalSeparator` / `thousandsSeparator` for fixed separators. `false` turns number formatting off.
+     */
+    numeric(options = true) {
+        this._isNumeric = options !== false;
+        if (options === false)
+            return this.setFormatter('numeric', null);
+        const settings = typeof options === 'number' ? { decimalPlaces: options } : options && typeof options === 'object' ? options : {};
+        return this.setFormatter('numeric', (state) => {
+            if (!isNumericValue(state))
+                return String(state);
+            const value = Number(state);
+            const decimals = fractionDigits(settings.decimalPlaces);
+            if ((settings.decimalSeparator ?? null) !== null || (settings.thousandsSeparator ?? null) !== null)
+                return numberFormat(value, decimals ?? 0, settings.decimalSeparator ?? '.', settings.thousandsSeparator ?? ',');
+            const max = fractionDigits(settings.maxDecimalPlaces);
+            const digits = max !== null ? { maximumFractionDigits: max } : decimals !== null ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : {};
+            return new Intl.NumberFormat(settings.locale ?? 'en-US', digits).format(value);
+        });
+    }
     /**
-     * Rich text content, rendered as HTML after the sanitizer set with `useHtmlSanitizer()`.
-     * Existing HTML is kept (sanitized) and plain text becomes paragraphs; Markdown syntax itself is not converted.
+     * Amount of money in a currency (`usd` by default). `divideBy`: divides the state first (`100` for cents);
+     * `locale` (`en-US` by default) and `decimalPlaces` may be passed after it, or in an options object.
      */
+    money(currency = 'usd', divideBy = 0, locale = null, decimalPlaces = null) {
+        this._isMoney = true;
+        const settings = divideBy !== null && typeof divideBy === 'object' ? divideBy : { divideBy: divideBy, locale, decimalPlaces };
+        return this.setFormatter('money', (state, record) => {
+            if (!isNumericValue(state))
+                return String(state);
+            let value = Number(state);
+            if (settings.divideBy)
+                value /= settings.divideBy;
+            const code = (typeof currency === 'function' ? currency(record) : currency) || 'usd';
+            const decimals = fractionDigits(settings.decimalPlaces);
+            return new Intl.NumberFormat(settings.locale ?? 'en-US', { style: 'currency', currency: code.toUpperCase(), ...(decimals !== null ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : {}) }).format(value);
+        });
+    }
+    /** Text before the formatted state. A string is escaped; an `HtmlString` is inserted as is. */
+    prefix(text) { this._prefix = text; return this; }
+    /** Text after the formatted state. A string is escaped; an `HtmlString` is inserted as is. */
+    suffix(text) { this._suffix = text; return this; }
+    /** Truncates the text to `length` characters, followed by `end`. */
+    limit(length = 100, end = '...') { this._characterLimit = length && length > 0 ? { length: Math.floor(length), end } : null; return this; }
+    /** Truncates the text to a number of words, followed by `end`. */
+    words(words = 100, end = '...') { this._wordLimit = words && words > 0 ? { words: Math.floor(words), end } : null; return this; }
+    /** Clamps the text to a number of lines. */
+    lineClamp(lines) { this._lineClamp = lines && lines > 0 ? Math.floor(lines) : null; return this; }
+    /** `false`: long text does not wrap onto several lines. */
+    wrap(condition = true) { this._wrap = condition; return this; }
+    /** Text size: `xs`, `sm` (default), `md` (or `base`) or `lg`. */
+    size(size) { this._size = size; return this; }
+    /** Font weight: `thin`, `extralight`, `light`, `normal`, `medium`, `semibold`, `bold`, `extrabold` or `black`. */
+    weight(weight) { this._weight = weight; return this; }
+    /** Font family: `sans`, `serif` or `mono`. */
+    fontFamily(family) { this._fontFamily = family; return this; }
+    /** Typographic styling of rich content (`fi-prose`); the state is rendered as sanitized HTML. */
+    prose(condition = true) { this._prose = condition; return this; }
+    /** Renders Markdown as HTML. HTML in the state (from a rich editor) is sanitized instead. */
     markdown(condition = true) { this._markdown = condition; return this; }
-    _copyable = false;
-    _numeric = false;
+    /** Renders the state as HTML, after it has been sanitized. */
+    html(condition = true) { this._html = condition; return this; }
+    /** Each value of a list on its own line. */
+    listWithLineBreaks(condition = true) { this._listWithLineBreaks = condition; return this; }
+    /** Bulleted list (implies line breaks). */
+    bulleted(condition = true) { this._bulleted = condition; return this; }
+    /** Shows only the first values of a list, followed by "and N more". */
+    limitList(limit = 3) { this._listLimit = limit && limit > 0 ? Math.floor(limit) : null; return this; }
+    /** With `limitList()` and line breaks: a link reveals the other values. */
+    expandableLimitedList(condition = true) { this._expandableLimitedList = condition; return this; }
+    /** Splits a string state into a list on this separator. */
+    separator(separator = ',') { this._separator = separator; return this; }
     /** Clicking copies the value to the clipboard. */
     copyable(condition = true) { this._copyable = condition; return this; }
-    /** Formatted number (thousands separators), aligned as a number. */
-    numeric(condition = true) { this._numeric = condition; return this; }
+    /** Value copied, when it differs from the displayed text. */
+    copyableState(state) { this._copyableState = state; return this; }
+    copyMessage(message) { this._copyMessage = message; return this; }
+    copyMessageDuration(milliseconds) { this._copyMessageDuration = Number.isFinite(milliseconds) ? Math.max(0, Math.floor(milliseconds)) : 2000; return this; }
+    /** Displayed text of a state item, and whether it is (sanitized) HTML. */
+    formatItem(item, record) {
+        let isHtml = this._html || this._markdown || this._prose;
+        const value = this._format ? this._format({ state: item, record }) : this._formatter && !isBlank(item) ? this._formatter(item, record) : item;
+        let text;
+        if (value instanceof HtmlString) {
+            isHtml = true;
+            text = value.html;
+        }
+        else {
+            text = value === null || value === undefined ? '' : value instanceof Date ? formatPhpDate(value, 'Y-m-d H:i:s') : typeof value === 'object' ? JSON.stringify(value) : String(value);
+            // Markdown: content starting with a tag is HTML (from a rich editor), sanitized; otherwise HTML in it is shown as text.
+            if (isHtml)
+                text = this._markdown ? (/^\s*<[a-z][^>]*>/i.test(text) ? sanitize(text).replace(TIGHT_ITEM, '<li>$1</li>') : markdownToHtml(text)) : sanitize(text);
+        }
+        if (!isHtml) {
+            if (this._characterLimit && [...text].length > this._characterLimit.length)
+                text = `${[...text].slice(0, this._characterLimit.length).join('').trimEnd()}${this._characterLimit.end}`;
+            if (this._wordLimit) {
+                const match = new RegExp(`^\\s*(?:\\S+\\s*){1,${this._wordLimit.words}}`, 'u').exec(text);
+                if (match && match[0].length !== text.length)
+                    text = `${match[0].trimEnd()}${this._wordLimit.end}`;
+            }
+        }
+        if (!isHtml && (this._prefix instanceof HtmlString || this._suffix instanceof HtmlString)) {
+            isHtml = true;
+            text = e(text);
+        }
+        const affix = (value) => (value === null || value === '' ? '' : value instanceof HtmlString ? value.html : isHtml ? e(value) : value);
+        return { text: `${affix(this._prefix)}${text}${affix(this._suffix)}`, isHtml };
+    }
     async toHtml() {
         const record = this.context().record;
-        const state = await this.getState();
-        const empty = state === null || state === undefined || state === '';
-        if (empty && this._placeholder !== null)
-            return this.wrap(`<div class="fi-in-text"><p class="fi-in-placeholder">${e(this._placeholder)}</p></div>`);
-        // Empty value: bare container (with `fi-numeric` for money).
-        if (empty)
-            return this._state || (!this._money && !this._date && !this._badge) ? this.wrap('<div class="fi-in-text-item fi-size-sm fi-in-text fi-wrapped"></div>') : this.wrap(`<div class="${['fi-in-text', this._money || this._numeric ? 'fi-numeric' : null].filter(Boolean).join(' ')}"></div>`);
-        let shown = String(state);
-        if (this._numeric)
-            shown = new Intl.NumberFormat('en-US').format(Number(state));
-        if (this._money)
-            shown = new Intl.NumberFormat('en-US', { style: 'currency', currency: this._money }).format(Number(state));
-        if (this._date)
-            shown = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(new Date(`${shown.replace(' ', 'T').slice(0, 19)}Z`));
-        // `dateTime()`: "Jan 5, 2024 13:45:00" (`M j, Y H:i:s`).
-        if (this._dateTime)
-            shown = `${new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(new Date(`${shown.replace(' ', 'T').slice(0, 19)}Z`))} ${shown.slice(11, 19)}`;
-        // `time('H:i')` or `time()` (`H:i:s`): the time part of an `H:i:s` or `Y-m-d H:i:s` value.
-        if (this._time)
-            shown = (shown.length > 8 ? shown.slice(11, 19) : shown).slice(0, this._time === 'H:i' ? 5 : 8);
-        if (this._format)
-            shown = this._format({ state, record });
-        if (this._suffix !== null)
-            shown += this._suffix;
-        if (this._markdown) {
-            const source = String(state);
-            const html = /<[a-z][^>]*>/i.test(source)
-                // Tight lists: a list item's single paragraph is unwrapped.
-                ? (htmlSanitizer ? htmlSanitizer(source).replace(TIGHT_ITEM, '<li>$1</li>') : e(source))
-                : source.split(/\n{2,}/).map((paragraph) => `<p>${e(paragraph.trim()).replace(/\n/g, '<br />')}</p>`).join('');
-            return this.wrap(`<div class="${['fi-in-text-item', this._prose ? 'fi-prose' : null, 'fi-size-sm', 'fi-in-text', 'fi-wrapped'].filter(Boolean).join(' ')}">${html}</div>`);
+        let state = await this.getState();
+        if (typeof state === 'string' && this._separator) {
+            const parts = state.split(this._separator);
+            state = parts.length === 1 && parts[0].trim() === '' ? [] : parts;
         }
-        if (this._badge && Array.isArray(state)) {
-            // Several values: a list of badges (tags, for instance).
-            const color = typeof this._color === 'function' ? this._color(record) : (this._color ?? 'primary');
-            const classes = ['fi-badge', 'fi-size-sm', ...(color !== 'gray' ? (colorManager?.getComponentClasses('badge', color) ?? []) : [])].join(' ');
-            return this.wrap(`<ul class="fi-in-text fi-in-text-has-badges fi-wrapped">${state.map((item) => `<li class="fi-in-text-item"><span class="${classes}">${e(String(item))}</span></li>`).join('')}</ul>`);
+        const isNumeric = this._isMoney || this._isNumeric;
+        if (isBlank(state)) {
+            // Without placeholder, Filament renders an empty item, except for money, date and badge entries reading the record.
+            if (this._placeholder === null && (this._state !== null || (!this._isMoney && !this._isDate && !this._badge)))
+                return this.wrapEmbeddedHtml(this.emptyHtml(['fi-in-text-item', 'fi-size-sm', 'fi-in-text', { 'fi-wrapped': this._wrap }]));
+            return this.wrapEmbeddedHtml(this.emptyHtml(['fi-in-text', { 'fi-numeric': isNumeric }]));
         }
-        if (this._badge) {
-            const color = typeof this._color === 'function' ? this._color(record) : (this._color ?? 'primary');
-            const iconName = this._icon?.(record) ?? null;
-            const classes = ['fi-badge', 'fi-size-sm', ...(color !== 'gray' ? (colorManager?.getComponentClasses('badge', color) ?? []) : [])].join(' ');
-            return this.wrap(`<div class="fi-in-text-item fi-in-text fi-in-text-has-badges fi-wrapped"><span class="${classes}">${iconName ? icon(iconName, { size: 'sm' }) : ''}${e(shown)}</span></div>`);
+        let items = Array.isArray(state) ? state : [state];
+        const stateCount = items.length;
+        let count = stateCount;
+        const hasLineBreaks = this._listWithLineBreaks || this._bulleted;
+        const listLimit = this._listLimit ?? count;
+        const overLimit = listLimit && count > listLimit ? count - listLimit : 0;
+        if (overLimit && (!hasLineBreaks || !this._expandableLimitedList))
+            items = items.slice(0, listLimit);
+        // Several values without line breaks: one comma-separated item.
+        let collapsed = null;
+        if (count > 1 && !hasLineBreaks && !this._badge) {
+            collapsed = items.map((item) => { const formatted = this.formatItem(item, record); return formatted.isHtml ? formatted.text : e(formatted.text); }).join(', ');
+            items = [collapsed];
+            count = 1;
         }
+        const alignment = await this.getAlignment();
         const tr = (key, params) => t(`filament::components/copyable.${key}`, params);
-        const content = this._copyable
-            ? `<span x-data="filamentCopyable" x-bind="bindings" x-bind:aria-label="isStandalone ? ${e(js(tr('label', { label: shown })))} : null" x-on:click="if (isStandalone) {
-    copy(${e(js(shown))}, ${e(js(tr('messages.copied')))}, 2000, ${e(js(tr('messages.failed')))})
-} else {
-    window.navigator.clipboard.writeText(${e(js(shown))})
-    $tooltip(${e(js(tr('messages.copied')))}, {
-        theme: $store.theme,
-        timeout: 2000,
-    })
-}" class="fi-copyable">${e(shown)}</span>`
-            : e(shown);
-        return this.wrap(`<div class="${['fi-in-text-item', 'fi-size-sm', 'fi-in-text', this._money || this._numeric ? 'fi-numeric' : null, 'fi-wrapped'].filter(Boolean).join(' ')}">${content}</div>`);
+        const itemData = (item) => {
+            const formatted = collapsed !== null ? { text: collapsed, isHtml: true } : this.formatItem(item, record);
+            const plain = formatted.isHtml ? stripTags(formatted.text) : formatted.text;
+            const color = resolveItem(this._color, record, item) ?? (this._badge ? 'primary' : null);
+            const size = textSize(resolveItem(this._size, record, item));
+            const iconColor = resolveItem(this._iconColor, record, item);
+            const iconHtml = renderIcon(resolveItem(this._icon, record, item), { size: size === 'md' || size === 'lg' ? size : 'sm', attributes: new Attributes().class(iconColor && iconColor !== 'gray' ? ['fi-color', `fi-color-${safeName(iconColor)}`] : []) });
+            const isCopyable = Boolean(resolveItem(this._copyable, record, item));
+            const tooltip = resolveItem(this._tooltip, record, item);
+            let attributes = { class: cls(['fi-in-text-item', { 'fi-prose': this._prose || this._markdown }, fontClass(resolveItem(this._fontFamily, record, item), FONT_FAMILIES)]) };
+            if (!this._badge) {
+                attributes = withClass(attributes, [`fi-size-${size}`, fontClass(resolveItem(this._weight, record, item), FONT_WEIGHTS)]);
+                if (this._lineClamp)
+                    attributes = withStyle(attributes, [`--line-clamp: ${this._lineClamp}`]);
+                attributes = withClass(attributes, itemColorClasses(color));
+            }
+            let content = null;
+            if (this._badge || isCopyable || !isBlank(tooltip)) {
+                let click = null, label = null;
+                if (isCopyable) {
+                    const copied = js(resolveItem(this._copyableState, record, item) ?? formatted.text);
+                    const message = js(this._copyMessage ?? tr('messages.copied'));
+                    click = `if (isStandalone) {\n    copy(${copied}, ${message}, ${this._copyMessageDuration}, ${js(tr('messages.failed'))})\n} else {\n    window.navigator.clipboard.writeText(${copied})\n    $tooltip(${message}, {\n        theme: $store.theme,\n        timeout: ${this._copyMessageDuration},\n    })\n}`;
+                    label = `isStandalone ? ${js(tr('label', { label: plain }))} : null`;
+                }
+                content = mergeAttrs({ 'x-data': isCopyable ? 'filamentCopyable' : null, 'x-bind': isCopyable ? 'bindings' : null, 'x-bind:aria-label': label, 'x-on:click': click, 'x-tooltip': tooltipJs(tooltip) }, {});
+                content = withClass(content, [{ 'fi-copyable': isCopyable }]);
+                if (this._badge)
+                    content = withClass(content, ['fi-badge', `fi-size-${size}`, ...badgeColorClasses(color)]);
+            }
+            const html = formatted.isHtml ? formatted.text : e(formatted.text);
+            const inner = `${content ? `<span ${renderAttrs(content)}>` : ''}${this._iconPosition === 'before' ? iconHtml : ''}${html}${this._iconPosition === 'after' ? iconHtml : ''}${content ? '</span>' : ''}`;
+            return { attributes, inner };
+        };
+        let container = withClass(this.getExtraAttributesMap(), ['fi-in-text', { 'fi-numeric': isNumeric }]);
+        container = withClass(container, [{ 'fi-in-text-has-badges': this._badge }, { 'fi-wrapped': this._wrap }, alignmentClass(alignment)]);
+        if (count === 1 && !this._bulleted) {
+            const { attributes, inner } = itemData(items[0]);
+            return this.wrapEmbeddedHtml(`<div ${renderAttrs(mergeAttrs(attributes, container))}>${inner}</div>`);
+        }
+        container = withClass(container, [{ 'fi-bulleted': this._bulleted }, { 'fi-in-text-has-line-breaks': hasLineBreaks }]);
+        if (overLimit) {
+            const expandable = hasLineBreaks && this._expandableLimitedList;
+            container = withClass(mergeAttrs({ 'x-data': expandable ? '{ isLimited: true }' : null }, container), ['fi-in-text-list-limited']);
+            const listItems = items.map((item, index) => {
+                const { attributes, inner } = itemData(item);
+                return `<li ${index >= listLimit ? 'x-show="! isLimited" x-cloak x-transition ' : ''}${renderAttrs(attributes)}>${inner}</li>`;
+            }).join('');
+            const message = expandable
+                ? `<div role="button" x-bind:aria-expanded="(! isLimited).toString()" x-on:click.prevent.stop="isLimited = false" x-show="isLimited" class="fi-link fi-size-xs">${e(tc('filament-infolists::components.entries.text.actions.expand_list', overLimit))}</div><div role="button" x-bind:aria-expanded="(! isLimited).toString()" x-on:click.prevent.stop="isLimited = true" x-cloak x-show="! isLimited" class="fi-link fi-size-xs">${e(tc('filament-infolists::components.entries.text.actions.collapse_list', overLimit))}</div>`
+                : e(tc('filament-infolists::components.entries.text.more_list_items', overLimit));
+            return this.wrapEmbeddedHtml(`<div ${renderAttrs(container)}><ul>${listItems}</ul><div class="fi-in-text-list-limited-message">${message}</div></div>`);
+        }
+        const listItems = items.map((item) => { const { attributes, inner } = itemData(item); return `<li ${renderAttrs(attributes)}>${inner}</li>`; }).join('');
+        return this.wrapEmbeddedHtml(`<ul ${renderAttrs(container)}>${listItems}</ul>`);
     }
 }
-/** Color swatch: only hex or simple functional colors are injected into the style attribute. */
+/** Only hex or simple functional colors are injected into the style attribute. */
+const sanitizeCssColor = (value) => (typeof value === 'string' && /^(#[0-9a-fA-F]{3,8}|(rgb|hsl|oklch)a?\([0-9.,%\s/deg-]+\))$/.test(value.trim()) ? value.trim() : null);
+/** Color swatch: only hex or simple functional colors are displayed. */
 export class ColorEntry extends Entry {
-    _placeholder = null;
+    _copyable = false;
+    _copyableState = null;
+    _copyMessage = null;
+    _copyMessageDuration = 2000;
+    _wrap = true;
     static make(name) { return configured(new ColorEntry(name)); }
-    placeholder(text) { this._placeholder = text; return this; }
+    /** Clicking the swatch copies the color to the clipboard. */
+    copyable(condition = true) { this._copyable = condition; return this; }
+    copyableState(state) { this._copyableState = state; return this; }
+    copyMessage(message) { this._copyMessage = message; return this; }
+    copyMessageDuration(milliseconds) { this._copyMessageDuration = Number.isFinite(milliseconds) ? Math.max(0, Math.floor(milliseconds)) : 2000; return this; }
+    wrap(condition = true) { this._wrap = condition; return this; }
     async toHtml() {
+        const record = this.context().record;
         const state = await this.getState();
-        const color = typeof state === 'string' && /^(#[0-9a-fA-F]{3,8}|(rgb|hsl|oklch)a?\([0-9.,%\s/deg-]+\))$/.test(state.trim()) ? state.trim() : null;
-        if (color === null)
-            return this.wrap(this._placeholder !== null ? `<div class="fi-in-color fi-wrapped"><p class="fi-in-placeholder">${e(this._placeholder)}</p></div>` : '<div class="fi-in-color fi-wrapped"></div>');
-        return this.wrap(`<div class="fi-in-color fi-wrapped"><div role="img" aria-label="${e(color)}" class="fi-in-color-item" style="background-color: ${color};"></div></div>`);
+        const colors = (Array.isArray(state) ? state : [state]).map(sanitizeCssColor).filter((color) => color !== null);
+        if (!colors.length) {
+            // An empty or unsupported value: the wrapping container, with the placeholder if any.
+            return this.wrapEmbeddedHtml(this.emptyHtml(['fi-in-color', { 'fi-wrapped': this._wrap }]));
+        }
+        const alignment = await this.getAlignment();
+        const tr = (key, params) => t(`filament::components/copyable.${key}`, params);
+        const swatches = colors.map((color) => {
+            const isCopyable = Boolean(resolveItem(this._copyable, record, color));
+            const tooltip = resolveItem(this._tooltip, record, color);
+            const label = isCopyable ? null : !isBlank(tooltip) ? String(tooltip) : color;
+            const copied = js(resolveItem(this._copyableState, record, color) ?? color);
+            const message = js(this._copyMessage ?? tr('messages.copied'));
+            const attributes = withStyle(withClass(mergeAttrs({
+                role: label !== null ? 'img' : null,
+                'aria-label': label !== null ? e(label) : null,
+                'x-data': isCopyable ? 'filamentCopyable' : null,
+                'x-bind': isCopyable ? 'bindings' : null,
+                'x-bind:aria-label': isCopyable ? `isStandalone ? ${js(tr('label', { label: color }))} : null` : null,
+                'x-on:click': isCopyable ? `if (isStandalone) {\n    copy(${copied}, ${message}, ${this._copyMessageDuration}, ${js(tr('messages.failed'))})\n} else {\n    window.navigator.clipboard.writeText(${copied})\n    $tooltip(${message}, {\n        theme: $store.theme,\n        timeout: ${this._copyMessageDuration},\n    })\n}` : null,
+                'x-tooltip': tooltipJs(tooltip),
+            }, {}), ['fi-in-color-item', { 'fi-copyable': isCopyable }]), [`background-color: ${color}`]);
+            return `<div ${renderAttrs(attributes)}></div>`;
+        }).join('');
+        const container = withClass(this.getExtraAttributesMap(), ['fi-in-color', { 'fi-wrapped': this._wrap }, alignmentClass(alignment)]);
+        return this.wrapEmbeddedHtml(`<div ${renderAttrs(container)}>${swatches}</div>`);
     }
 }
-/** Read-only image: only same-site (`/…`) or http(s) URLs are rendered. */
+/** `<img>` attributes allowed in `extraImgAttributes()`: no event handler, style or source. */
+const IMG_ATTRIBUTES = new Set(['class', 'id', 'title', 'loading', 'decoding', 'fetchpriority', 'referrerpolicy', 'crossorigin', 'width', 'height', 'draggable', 'role']);
+const isAllowedImgAttribute = (name) => IMG_ATTRIBUTES.has(name.toLowerCase()) || /^(data|aria)-[a-z0-9_.-]+$/i.test(name);
+/** Read-only images: only same-site (`/…`) or http(s) URLs are rendered. */
 export class ImageEntry extends Entry {
-    _height = '8rem';
+    _height = null;
+    _width = null;
     _alt = null;
     _circular = false;
+    _square = false;
+    _stacked = false;
+    _ring = null;
+    _overlap = null;
+    _limit = null;
+    _limitedRemainingText = false;
+    _limitedRemainingTextSize = null;
+    _defaultImageUrl = null;
+    _extraImgAttributes = {};
+    _wrap = true;
     static make(name) { return configured(new ImageEntry(name)); }
-    /** CSS height of the image (`8rem` by default). */
-    imageHeight(height) { if (/^[0-9.]+(rem|px|em)$/.test(height))
-        this._height = height; return this; }
+    /** Height of the images: a CSS length (`40px`, `2.5rem`…) or a number of pixels; `8rem` by default. Any other value is ignored. */
+    imageHeight(height) { if (height === null)
+        this._height = null;
+    else
+        this._height = cssLength(height) ?? this._height; return this; }
+    /** Width of the images: a CSS length or a number of pixels. Any other value is ignored. */
+    imageWidth(width) { if (width === null)
+        this._width = null;
+    else
+        this._width = cssLength(width) ?? this._width; return this; }
+    imageSize(size) { return this.imageWidth(size).imageHeight(size); }
     alt(text) { this._alt = text; return this; }
     circular(condition = true) { this._circular = condition; return this; }
+    /** Square images: the width is the height. */
+    square(condition = true) { this._square = condition; return this; }
+    /** Overlapping images (`2.5rem` high by default). */
+    stacked(condition = true) { this._stacked = condition; return this; }
+    /** Ring width of stacked images, from 0 to 8. */
+    ring(width) { this._ring = width === null ? null : Math.max(0, Math.min(8, Math.floor(width))); return this; }
+    /** Overlap of stacked images, from 0 to 8 (2 by default). */
+    overlap(overlap) { this._overlap = overlap === null ? null : Math.max(0, Math.min(8, Math.floor(overlap))); return this; }
+    /** Maximum number of images displayed. */
+    limit(limit = 3) { this._limit = limit && limit > 0 ? Math.floor(limit) : null; return this; }
+    /** Shows "+N" after the limited images; `size`: `xs`, `sm` (default), `md` or `lg`. */
+    limitedRemainingText(condition = true, size = null) { this._limitedRemainingText = condition; this._limitedRemainingTextSize = size; return this; }
+    /** Image displayed when the state is empty. */
+    defaultImageUrl(url) { this._defaultImageUrl = url; return this; }
+    /** Extra `<img>` attributes (`loading`, `class`, `data-*`, `aria-*`…). Event handlers, `style` and sources are ignored; values are escaped. */
+    extraImgAttributes(attributes) { Object.assign(this._extraImgAttributes, attributes); return this; }
+    wrap(condition = true) { this._wrap = condition; return this; }
     async toHtml() {
+        const ctx = this.context();
         const state = await this.getState();
-        const sources = (Array.isArray(state) ? state : [state]).filter((src) => typeof src === 'string' && /^(\/(?!\/)|https?:\/\/)/.test(src));
-        return this.wrap(`<div class="fi-in-image fi-wrapped">${sources.map((src) => `<img alt="${e(this._alt ?? '')}" src="${e(src)}" style="height: ${this._height};"${this._circular ? ' class="fi-circular"' : ''} />`).join('')}</div>`);
+        const fallback = await evaluate(this._defaultImageUrl, ctx);
+        const defaultUrl = isImageUrl(fallback) ? fallback.trim() : null;
+        let sources = (isBlank(state) ? (defaultUrl ? [defaultUrl] : []) : Array.isArray(state) ? state : [state])
+            .map((source) => (isImageUrl(source) ? source.trim() : defaultUrl)).filter((source) => source !== null);
+        if (!sources.length)
+            return this.wrapEmbeddedHtml(this._placeholder !== null || this._emptyTooltip !== null ? this.emptyHtml(['fi-in-image']) : this.emptyHtml(['fi-in-image', { 'fi-wrapped': this._wrap }]));
+        const count = sources.length;
+        const overLimit = this._limit && count > this._limit ? count - this._limit : 0;
+        if (overLimit)
+            sources = sources.slice(0, this._limit);
+        const alignment = await this.getAlignment();
+        const height = this._height ?? (this._stacked ? '2.5rem' : '8rem');
+        const width = this._width ?? (this._circular || this._square ? height : null);
+        const size = [`height: ${height}`, width ? `width: ${width}` : null];
+        const extraImg = escapeAttributes(Object.fromEntries(Object.entries(this._extraImgAttributes).filter(([name]) => isAllowedImgAttribute(name))));
+        const images = sources.map((source) => {
+            const alt = resolveItem(this._alt, ctx.record, source);
+            return `<img ${renderAttrs(withStyle(mergeAttrs({ alt: e(alt ?? ''), src: e(source), 'x-tooltip': tooltipJs(resolveItem(this._tooltip, ctx.record, source)) }, extraImg), size))} />`;
+        }).join('');
+        const remaining = overLimit && this._limitedRemainingText
+            ? `<div ${renderAttrs(withStyle({ class: cls(['fi-in-image-limited-remaining-text', this._limitedRemainingTextSize ? `fi-size-${textSize(this._limitedRemainingTextSize)}` : null]) }, size))}>+${overLimit}</div>`
+            : '';
+        const container = withClass(this.getExtraAttributesMap(), [
+            'fi-in-image', { 'fi-circular': this._circular, 'fi-wrapped': this._wrap, 'fi-stacked': this._stacked },
+            this._stacked && this._ring !== null ? `fi-in-image-ring fi-in-image-ring-${this._ring}` : null,
+            this._stacked && (this._overlap ?? 2) ? `fi-in-image-overlap-${this._overlap ?? 2}` : null,
+            alignmentClass(alignment),
+        ]);
+        return this.wrapEmbeddedHtml(`<div ${renderAttrs(container)}>${images}${remaining}</div>`);
     }
 }
-/** Icon based on the value; `boolean()` shows a green check or a red cross. */
+const ICON_SIZES = new Set(['xs', 'sm', 'md', 'lg', 'xl', '2xl']);
+/** Icons chosen from the state; `boolean()` shows a green check or a red cross. */
 export class IconEntry extends Entry {
     _boolean = false;
+    _icon = null;
+    _color = null;
+    _size = null;
+    _trueIcon = null;
+    _falseIcon = null;
+    _trueColor = null;
+    _falseColor = null;
+    _listWithLineBreaks = false;
+    _wrap = true;
     static make(name) { return configured(new IconEntry(name)); }
     boolean(condition = true) { this._boolean = condition; return this; }
+    /** Icon: a Heroicon name, a map of state values to names, or a function of the record and the state item. */
+    icon(icon) { this._icon = icon; return this; }
+    /** Color: a name, a map of state values to colors, or a function of the record and the state item. */
+    color(color) { this._color = color; return this; }
+    /** Icon size: `xs`, `sm`, `md`, `lg` (default), `xl` or `2xl`. */
+    size(size) { this._size = size; return this; }
+    /** Icon of a true state (`o-check-circle` by default); `false`: no icon. Implies `boolean()`. */
+    trueIcon(icon) { this._boolean = true; this._trueIcon = icon; return this; }
+    /** Icon of a false state (`o-x-circle` by default); `false`: no icon. Implies `boolean()`. */
+    falseIcon(icon) { this._boolean = true; this._falseIcon = icon; return this; }
+    /** Color of a true state (`success` by default). Implies `boolean()`. */
+    trueColor(color) { this._boolean = true; this._trueColor = color; return this; }
+    /** Color of a false state (`danger` by default). Implies `boolean()`. */
+    falseColor(color) { this._boolean = true; this._falseColor = color; return this; }
+    /** Each icon of a list on its own line. */
+    listWithLineBreaks(condition = true) { this._listWithLineBreaks = condition; return this; }
+    wrap(condition = true) { this._wrap = condition; return this; }
     async toHtml() {
+        const record = this.context().record;
         const state = await this.getState();
-        if (!this._boolean || state === null || state === undefined)
-            return this.wrap('<div class="fi-in-icon fi-wrapped"></div>');
-        const on = state === true || state === 1 || state === '1';
-        const classes = colorManager?.getComponentClasses('icon-column', on ? 'success' : 'danger') ?? [];
-        return this.wrap(`<div class="fi-in-icon fi-wrapped">${icon(on ? 'o-check-circle' : 'o-x-circle', { size: 'lg', attributes: new Attributes().class(classes) })}<span class="fi-sr-only">${e(t(on ? 'filament-tables::table.columns.icon.boolean.true' : 'filament-tables::table.columns.icon.boolean.false'))}</span></div>`);
+        if (isBlank(state))
+            return this.wrapEmbeddedHtml(this._placeholder !== null || this._emptyTooltip !== null ? this.emptyHtml(['fi-in-icon']) : this.emptyHtml(['fi-in-icon', { 'fi-wrapped': this._wrap }]));
+        const alignment = await this.getAlignment();
+        const items = (Array.isArray(state) ? state : [state]).map((item) => {
+            const on = item === true || item === 1 || item === '1';
+            let name = resolveMap(this._icon, record, item);
+            if (!name && this._boolean && item !== null && item !== undefined)
+                name = on ? (this._trueIcon === false ? null : this._trueIcon ?? 'o-check-circle') : (this._falseIcon === false ? null : this._falseIcon ?? 'o-x-circle');
+            if (!name)
+                return '';
+            let color = resolveMap(this._color, record, item);
+            if (!color && this._boolean && item !== null && item !== undefined)
+                color = on ? this._trueColor ?? 'success' : this._falseColor ?? 'danger';
+            const size = resolveItem(this._size, record, item);
+            const tooltip = resolveItem(this._tooltip, record, item);
+            const attributes = new Attributes().merge({ 'x-tooltip': tooltipJs(tooltip) }).class(iconColorClasses(color));
+            const text = !isBlank(tooltip) ? String(tooltip) : this._boolean ? t(on ? 'filament-infolists::components.entries.icon.true' : 'filament-infolists::components.entries.icon.false') : ['string', 'number', 'boolean'].includes(typeof item) ? String(item) : '';
+            return `${renderIcon(name, { size: size && ICON_SIZES.has(size) ? size : 'lg', attributes })}${text !== '' ? `<span class="fi-sr-only">${e(text)}</span>` : ''}`;
+        }).join('');
+        const container = withClass(this.getExtraAttributesMap(), ['fi-in-icon', { 'fi-in-icon-has-line-breaks': this._listWithLineBreaks, 'fi-wrapped': this._wrap }, alignmentClass(alignment)]);
+        return this.wrapEmbeddedHtml(`<div ${renderAttrs(container)}>${items}</div>`);
     }
 }
 /** Key/value pairs as a table: the state is an object (or its JSON form); a non-scalar value is shown as JSON. */
 export class KeyValueEntry extends Entry {
     _keyLabel = null;
     _valueLabel = null;
-    _placeholder = null;
     static make(name) { return configured(new KeyValueEntry(name)); }
     keyLabel(label) { this._keyLabel = label; return this; }
     valueLabel(label) { this._valueLabel = label; return this; }
-    /** Text shown when there are no pairs ("No entries" by default). */
-    placeholder(text) { this._placeholder = text; return this; }
     /** @deprecated Use `placeholder()`. */
     emptyMessage(text) { return this.placeholder(text); }
     async toHtml() {
@@ -210,7 +902,7 @@ export class KeyValueEntry extends Entry {
         const show = (value) => (value === null || value === undefined || ['string', 'number', 'boolean'].includes(typeof value) ? (value === true ? '1' : value === false ? '' : String(value ?? '')) : JSON.stringify(value));
         const rows = entries.map(([key, value]) => `<tr><th scope="row">${e(key)}</th><td>${e(show(value))}</td></tr>`).join('');
         const empty = entries.length ? '' : `<tr><td colspan="2" class="fi-in-placeholder">${e(this._placeholder ?? tr('placeholder'))}</td></tr>`;
-        return this.wrap(`<table class="fi-in-key-value"><thead><tr><th scope="col">${e(this._keyLabel ?? tr('columns.key.label'))}</th><th scope="col">${e(this._valueLabel ?? tr('columns.value.label'))}</th></tr></thead><tbody>${rows}${empty}</tbody></table>`);
+        return this.wrapEmbeddedHtml(`<table ${renderAttrs(withClass(this.getExtraAttributesMap(), ['fi-in-key-value']))}><thead><tr><th scope="col">${e(this._keyLabel ?? tr('columns.key.label'))}</th><th scope="col">${e(this._valueLabel ?? tr('columns.value.label'))}</th></tr></thead><tbody>${rows}${empty}</tbody></table>`);
     }
 }
 /** Pretty-printed JSON: four-space indent, with `/` and non-ASCII characters escaped. */
@@ -225,7 +917,6 @@ export class CodeEntry extends Entry {
     _grammar = null;
     _lightTheme = null;
     _darkTheme = null;
-    _placeholder = null;
     _copyable = false;
     _copyMessage = null;
     _copyMessageDuration = 2000;
@@ -235,7 +926,6 @@ export class CodeEntry extends Entry {
     /** Theme class names only: without a highlighter, colors stay those of the default themes. */
     lightTheme(theme) { this._lightTheme = theme; return this; }
     darkTheme(theme) { this._darkTheme = theme; return this; }
-    placeholder(text) { this._placeholder = text; return this; }
     /** Clicking copies the code to the clipboard. */
     copyable(condition = true) { this._copyable = condition; return this; }
     copyMessage(message) { this._copyMessage = message; return this; }
@@ -243,7 +933,7 @@ export class CodeEntry extends Entry {
     async toHtml() {
         let state = await this.getState();
         if (state === null || state === undefined || (typeof state === 'string' && state.trim() === '') || (Array.isArray(state) && !state.length)) {
-            return this.wrap(`<div class="fi-in-code">${this._placeholder !== null ? `<p class="fi-in-placeholder">${e(this._placeholder)}</p>` : ''}</div>`);
+            return this.wrapEmbeddedHtml(`<div class="fi-in-code">${this._placeholder !== null ? `<p class="fi-in-placeholder">${e(this._placeholder)}</p>` : ''}</div>`);
         }
         let grammar = this._grammar;
         if (typeof state === 'object') {
@@ -259,16 +949,16 @@ export class CodeEntry extends Entry {
         const linesHtml = lines.map((line, index) => `<span class="line">${line === '' ? '' : `<span class="token">${e(line)}</span>`}${index < lines.length - 1 ? '<span class="token">\n</span>' : ''}</span>`).filter((html, index) => !(index === lines.length - 1 && lines[index] === '' && lines.length > 1)).join('');
         const pre = `<pre class="phiki language-${language} ${light} phiki-themes ${dark}" data-language="${language}"${style}><code>${linesHtml}</code></pre>`;
         if (!this._copyable)
-            return this.wrap(`<div class="fi-in-code">${pre}</div>`);
+            return this.wrapEmbeddedHtml(`<div ${renderAttrs(withClass(this.getExtraAttributesMap(), ['fi-in-code']))}>${pre}</div>`);
         const tr = (key, params) => t(`filament::components/copyable.${key}`, params);
         const message = js(this._copyMessage ?? tr('messages.copied'));
         const click = `if (isStandalone) {\n    copy(${js(code)}, ${message}, ${this._copyMessageDuration}, ${js(tr('messages.failed'))})\n} else {\n    window.navigator.clipboard.writeText(${js(code)})\n    $tooltip(${message}, {\n        theme: $store.theme,\n        timeout: ${this._copyMessageDuration},\n    })\n}`;
-        const attributes = new Attributes().merge({
+        const attributes = new Attributes(this.getExtraAttributesMap()).merge({
             'x-data': 'filamentCopyable', 'x-bind': 'bindings', 'x-id': "['copyable-code']",
-            'x-bind:aria-label': `isStandalone ? ${js(tr('label', { label: this._label ?? defaultLabel(this._name) }))} : null`,
+            'x-bind:aria-label': `isStandalone ? ${js(tr('label', { label: await this.getLabel() }))} : null`,
             'x-bind:aria-describedby': "isStandalone ? $id('copyable-code') : null", 'x-on:click': click,
         }).class(['fi-in-code', 'fi-copyable']);
-        return this.wrap(`<div ${attributes.toHtml()}><div x-bind:id="$id('copyable-code')">${pre}</div></div>`);
+        return this.wrapEmbeddedHtml(`<div ${attributes.toHtml()}><div x-bind:id="$id('copyable-code')">${pre}</div></div>`);
     }
 }
 /**
@@ -283,37 +973,101 @@ export class ViewEntry extends Entry {
     view(renderer) { this._view = renderer; return this; }
     /** `false`: the function renders the whole entry, without the usual wrapper (label). */
     wrapped(condition = true) { this._wrapped = condition; return this; }
+    /** Places custom content in the entry wrapper (label, slots, link): for entry classes extending `ViewEntry`. */
+    wrap(content) { return this.wrapEmbeddedHtml(content); }
     async toHtml() {
         if (!this._view)
             throw new Error(`ViewEntry [${this._name}]: view() is required.`);
         const html = await this._view({ ...this.context(), state: await this.getState(), entry: this });
-        return this._wrapped ? this.wrap(html) : html;
+        return this._wrapped ? this.wrapEmbeddedHtml(html) : html;
     }
 }
+/** Column of a table repeatable entry: a header label, an optional width and alignment. */
+export class TableColumn {
+    label;
+    _width = null;
+    _hiddenHeaderLabel = false;
+    _wrapHeader = false;
+    _alignment = null;
+    constructor(label) { this.label = label; }
+    static make(label) { return configured(new TableColumn(label)); }
+    /** Fixed width: a number of pixels, or a CSS length (`10rem`, `20%`). Any other value is ignored. */
+    width(width) { this._width = width === null ? null : cssLength(width) ?? this._width; return this; }
+    /** Keeps the header label for screen readers only. */
+    hiddenHeaderLabel(condition = true) { this._hiddenHeaderLabel = condition; return this; }
+    /** Lets a long header label wrap onto several lines. */
+    wrapHeader(condition = true) { this._wrapHeader = condition; return this; }
+    /** Header alignment: `start`, `center` or `end`. */
+    alignment(alignment) { this._alignment = alignment; return this; }
+    alignStart() { return this.alignment('start'); }
+    alignCenter() { return this.alignment('center'); }
+    alignEnd() { return this.alignment('end'); }
+    getWidth() { return this._width; }
+    isHeaderLabelHidden() { return this._hiddenHeaderLabel; }
+    canHeaderWrap() { return this._wrapHeader; }
+    getAlignment() { return this._alignment; }
+}
 /**
- * Read-only list of items, as a table: one row per item of the array read from
- * the record, one cell per schema entry.
+ * Read-only list of items read from the record: cards in a grid (default), or a table (`table()`) with one row per item
+ * and one cell per entry.
  */
 export class RepeatableEntry extends Entry {
-    _columns = [];
+    _tableColumns = null;
     _schema = () => [];
+    _grid = null;
+    _itemColumns = null;
+    _contained = true;
     static make(name) { return configured(new RepeatableEntry(name)); }
-    table(columns) { this._columns = columns; return this; }
-    schema(entries) { this._schema = typeof entries === 'function' ? entries : () => entries; return this; }
+    /** Renders the items as a table with these columns, in the order of the schema's entries. */
+    table(columns) { this._tableColumns = columns; return this; }
+    /** Components repeated for each item. A function returns fresh instances for each item. */
+    schema(components) { this._schema = typeof components === 'function' ? components : () => components; return this; }
+    /** Card layout: number of item columns (from `lg` for a number, per breakpoint for an object); 2 when called without argument. */
+    grid(columns = 2) { this._grid = columns; return this; }
+    /** Card layout: grid columns inside each item. */
+    columns(columns) { this._itemColumns = columns; return this; }
+    /** Card layout: `false` removes the card styling of the items. */
+    contained(condition = true) { this._contained = condition; return this; }
+    itemSchema(index, item) {
+        const c = this.container;
+        const components = this._schema();
+        const schema = new Schema(c.livewire).key(`${this.getKey()}.${index}`).statePath(`${this.getStatePath()}.${index}`).operation(c.getOperation()).record(item).root(false).components(components);
+        return { schema, components };
+    }
     async toHtml() {
         const state = await this.getState();
         const items = Array.isArray(state) ? state : [];
-        const c = this.container;
+        const columns = this._tableColumns ?? [];
+        if (!columns.length) {
+            if (!items.length)
+                return this.wrapEmbeddedHtml(this.emptyHtml(['fi-in-repeatable', { 'fi-contained': this._contained }]));
+            const list = new Attributes(this.getExtraAttributesMap()).class(['fi-in-repeatable', { 'fi-contained': this._contained }]).grid(this._grid);
+            const cards = [];
+            for (const [index, item] of items.entries()) {
+                const { schema } = this.itemSchema(index, item);
+                cards.push(`<li class="fi-in-repeatable-item">${await schema.columns(this._itemColumns ?? {}).toHtml()}</li>`);
+            }
+            return this.wrapEmbeddedHtml(`<ul ${list.toHtml()}>${cards.join('')}</ul>`);
+        }
+        if (!items.length)
+            return this.wrapEmbeddedHtml(this.emptyHtml(['fi-in-table-repeatable']));
         const rows = [];
         for (const [index, item] of items.entries()) {
-            const entries = this._schema();
-            new Schema(c.livewire).key(`${this.getKey()}.${index}`).statePath(`${this.getStatePath()}.${index}`).operation(c.getOperation()).record(item).root(false).components(entries);
+            const { components } = this.itemSchema(index, item);
             const cells = [];
-            for (const entry of entries)
-                cells.push(`<td wire:key="${e(entry.getLivewireKey() ?? '')}" x-data="filamentSchemaComponent(${e(js(entry.getAlpineScopeConfiguration()))})">${await entry.toHtml()}</td>`);
+            for (const component of components.slice(0, columns.length)) {
+                cells.push(await component.isVisible()
+                    ? `<td wire:key="${e(component.getLivewireKey() ?? '')}" x-data="filamentSchemaComponent(${e(js(component.getAlpineScopeConfiguration()))})">${await component.toHtml()}</td>`
+                    : '<td class="fi-hidden"></td>');
+            }
             rows.push(`<tr>${cells.join('')}</tr>`);
         }
-        const head = this._columns.map((column) => `<th scope="col" class=""${column.getWidth() ? ` style="width: ${e(column.getWidth())}"` : ''}>${e(column.label)}</th>`).join('');
-        return this.wrap(`<div class="fi-in-table-repeatable"><table><thead><tr>${head}</tr></thead><tbody>${rows.join('')}</tbody></table></div>`);
+        const head = columns.map((column) => {
+            const width = cssLength(column.getWidth());
+            const classes = cls([{ 'fi-wrapped': column.canHeaderWrap?.() ?? false }, alignmentClass(column.getAlignment?.() ?? null)]);
+            const label = column.isHeaderLabelHidden?.() ? `<span class="fi-sr-only">${e(column.label)}</span>` : e(column.label);
+            return `<th scope="col" class="${classes}"${width ? ` style="width: ${e(width)}"` : ''}>${label}</th>`;
+        }).join('');
+        return this.wrapEmbeddedHtml(`<div ${renderAttrs(withClass(this.getExtraAttributesMap(), ['fi-in-table-repeatable']))}><table><thead><tr>${head}</tr></thead><tbody>${rows.join('')}</tbody></table></div>`);
     }
 }