@rulecms/source-components-angular 0.4.1 → 0.5.0

package/fesm2022/rulecms-source-components-angular.mjs

@@ -1,8 +1,99 @@
 import * as i0 from '@angular/core';
 import { Input, Component, ViewChild } from '@angular/core';
-import { NgStyle, NgComponentOutlet } from '@angular/common';
+import { NgStyle, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 
+/**
+ * The attribute names `r-text` reads for show more / show less.
+ *
+ * These sit beside the existing text attributes rather than sharing a name
+ * with any other component: RuleCMS publishes one page per component-scope
+ * attribute and requires exactly one owning component. Reuse happens a level
+ * down, where the composer resolves an attribute to an *editor* by name —
+ * the limit reuses the plain-text field and the labels reuse the multi-line
+ * text field.
+ *
+ * Nothing here duplicates a column style attribute. Spacing, colour and
+ * typography come from Column Styles on the root element; the attributes
+ * below are only the character budget and the two toggle labels.
+ */
+const TEXT_SHOW_MORE_AFTER_ATTRIBUTE = 'text-show-more-after-3-resolutions';
+const TEXT_SHOW_MORE_LABEL_ATTRIBUTE = 'text-show-more-label-3-resolutions';
+const TEXT_SHOW_LESS_LABEL_ATTRIBUTE = 'text-show-less-label-3-resolutions';
+const DEFAULT_TEXT_SHOW_MORE_LABEL = 'Show more';
+const DEFAULT_TEXT_SHOW_LESS_LABEL = 'Show less';
+/**
+ * Collapses a label to one line the way a toggle's visible text is one line:
+ * authored newlines become spaces, a `{br|}` becomes a space, then trim.
+ * Markers for bold, italic and styling stay in the string so render can
+ * honour them; link markers stay too and print as plain words when no link
+ * list is passed.
+ */
+const resolveOneLineLabel = (value) => {
+    const text = typeof value === 'string' ? value : String(value);
+    return text
+        .replace(/\{br\|\}/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+};
+/**
+ * Character budget for collapsing the text. A positive whole number turns
+ * the feature on; anything else — unset, null, empty, zero, a decimal, a
+ * non-digit string — leaves the text as it always was.
+ *
+ * The editor stores a string in the plain-text field (the number editor is
+ * pixel-specific), but a hand-written or migrated config may carry a real
+ * number; both mean the same thing here. Digit-only strings after trim are
+ * accepted, including leading zeros (`'07'` → 7); `'0'` and `'00'` are still
+ * off because the value is not >= 1.
+ */
+const resolveTextShowMoreAfter = (componentAttributes) => {
+    const value = componentAttributes?.[TEXT_SHOW_MORE_AFTER_ATTRIBUTE];
+    if (typeof value === 'number') {
+        if (Number.isFinite(value) && Number.isInteger(value) && value >= 1) {
+            return value;
+        }
+        return undefined;
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (/^\d+$/.test(trimmed)) {
+            const parsed = Number(trimmed);
+            if (parsed >= 1) {
+                return parsed;
+            }
+        }
+    }
+    return undefined;
+};
+/**
+ * Label on the toggle while the text is collapsed. Unset or null falls back
+ * to "Show more". A blank after trimming also falls back — a toggle with no
+ * words would leave the rest of the text unreachable.
+ */
+const resolveTextShowMoreLabel = (componentAttributes) => {
+    const value = componentAttributes?.[TEXT_SHOW_MORE_LABEL_ATTRIBUTE];
+    if (value === undefined || value === null) {
+        return DEFAULT_TEXT_SHOW_MORE_LABEL;
+    }
+    const normalized = resolveOneLineLabel(value);
+    return normalized === '' ? DEFAULT_TEXT_SHOW_MORE_LABEL : normalized;
+};
+/**
+ * Label on the toggle while the text is expanded. Unset or null falls back
+ * to "Show less". A blank after trimming also falls back — the composer's
+ * text editor deletes a cleared setting rather than storing `''`, so a blank
+ * here is the same kind of empty as Show more, not a distinct mode.
+ */
+const resolveTextShowLessLabel = (componentAttributes) => {
+    const value = componentAttributes?.[TEXT_SHOW_LESS_LABEL_ATTRIBUTE];
+    if (value === undefined || value === null) {
+        return DEFAULT_TEXT_SHOW_LESS_LABEL;
+    }
+    const normalized = resolveOneLineLabel(value);
+    return normalized === '' ? DEFAULT_TEXT_SHOW_LESS_LABEL : normalized;
+};
+
 const DEFAULT_CONTENT_TEXT = 'This is a text block. Click to edit and add your own content.';
 const defaultAttributeValues$9 = [
     {
@@ -23,6 +114,18 @@ const defaultAttributeValues$9 = [
         name: 'inline-styles-3-resolutions',
         defaultValues: {},
     },
+    {
+        name: TEXT_SHOW_MORE_AFTER_ATTRIBUTE,
+        defaultValues: {},
+    },
+    {
+        name: TEXT_SHOW_MORE_LABEL_ATTRIBUTE,
+        defaultValues: {},
+    },
+    {
+        name: TEXT_SHOW_LESS_LABEL_ATTRIBUTE,
+        defaultValues: {},
+    },
 ];
 
 /**
@@ -602,19 +705,35 @@ function resolveSpanStyleAttributes(item) {
     };
 }
 
+/**
+ * A placeholder token: `{{`, anything but a brace, `}}`.
+ *
+ * Found by shape alone. Whether what sits between the braces is a usable
+ * expression is `parsePlaceholderExpression`'s decision, so the marker parser
+ * and the filler always agree on where a token starts and ends — including for
+ * a token that turns out to be a typo and stays literal.
+ *
+ * A source string rather than a RegExp so the marker grammar can embed it: a
+ * marker's text may contain whole tokens, which is what lets
+ * `{b|{{ user.firstName }}}` bold a filled-in value instead of ending the
+ * marker at the token's first `}`.
+ */
+const PLACEHOLDER_TOKEN_PATTERN = String.raw `\{\{[^{}]*\}\}`;
+
 /**
  * `{` + optional mark letters + optional link index + optional `.` and styling
  * index + `|` + text + `}`.
  *
  * Sticky, so it can be tried at one position without slicing the string. The
- * text is everything up to the first `}`, which is what makes markers
- * non-nesting.
+ * text is everything up to the first `}` that is not part of a whole
+ * `{{ … }}` placeholder token, which is what makes markers non-nesting while
+ * still letting a placeholder sit inside one: `{b|{{ user.firstName }}}`.
  *
  * The dot is what tells the two indexes apart, and it reads as the CSS class
  * selector it usually stands for. It cannot be confused with a link index,
  * because a link index is bare digits and always comes first.
  */
-const MARKER = /\{([a-z]*)(\d*)(?:\.(\d+))?\|([^}]*)\}/y;
+const MARKER = new RegExp(String.raw `\{([a-z]*)(\d*)(?:\.(\d+))?\|((?:${PLACEHOLDER_TOKEN_PATTERN}|[^}])*)\}`, 'y');
 /**
  * One letter per mark. Order is not significant (`{bi1|x}` and `{ib1|x}` are
  * the same span) and repeats are harmless, because the letters resolve to a
@@ -663,7 +782,12 @@ const resolveMarks = (letters) => {
  *
  * Indexes are 1-based and normalize through a base-10 parse, so `{01|x}` and
  * `{1|x}` point at the same entry. Resolving an index to an entry is the
- * caller's job; this stays pure and free of React.
+ * caller's job; this stays pure and free of the renderer.
+ *
+ * `{{ … }}` placeholders are not runs: they stay inside the text of whichever
+ * run holds them, exactly as written, and a marker's text may contain whole
+ * ones. Filling them in is the renderer's job, after parsing, so a filled-in
+ * value can never be read as markup.
  */
 function parseInlineMarkers(value) {
     if (typeof value !== 'string' || value === '') {
@@ -737,13 +861,48 @@ const resolveRun = (letters, digits, styleDigits, text) => {
     };
 };
 
+const hasMark = (marks) => marks.bold || marks.italic || marks.strike;
+/**
+ * Parses markers, fills words, and resolves anchors and span styles into a
+ * list the renderers can share. Empty filled words stay in the list so run
+ * indexes stay stable for splitting; they contribute nothing when rendered.
+ */
+function prepareInlineMarkupRuns(text, links, spanStyles, fillText) {
+    const runs = parseInlineMarkers(text);
+    return runs.map((run) => {
+        if (run.kind === 'break') {
+            return { kind: 'break' };
+        }
+        const words = fillText === undefined ? run.text : fillText(run.text);
+        if (run.kind === 'text') {
+            return { kind: 'text', words };
+        }
+        return {
+            kind: 'span',
+            words,
+            marks: run.marks,
+            anchor: run.index !== undefined
+                ? resolveLinkAttributes(getLinkItemAt(links, run.index))
+                : undefined,
+            spanStyle: run.styleIndex !== undefined
+                ? resolveSpanStyleAttributes(getSpanStyleItemAt(spanStyles, run.styleIndex))
+                : undefined,
+        };
+    });
+}
+/** True when rendering these runs needs elements rather than one text node. */
+function preparedRunsNeedElements(runs) {
+    return runs.some((run) => run.kind === 'break' ||
+        (run.kind === 'span' &&
+            run.words !== '' &&
+            (run.anchor !== undefined || run.spanStyle !== undefined || hasMark(run.marks))));
+}
+
 const MARK_TAGS = [
     ['bold', 'strong'],
     ['italic', 'em'],
     ['strike', 's'],
 ];
-const hasMark = (marks) => marks.bold || marks.italic || marks.strike;
-const plainTextOf = (run) => (run.kind === 'break' ? '' : run.text);
 class InlineMarkupComponent {
     constructor(host, renderer) {
         this.host = host;
@@ -752,32 +911,25 @@ class InlineMarkupComponent {
     }
     ngOnChanges() {
         this.clear();
-        const runs = parseInlineMarkers(this.text);
-        const anchors = runs.map((run) => run.kind === 'span' && run.index !== undefined
-            ? resolveLinkAttributes(getLinkItemAt(this.links, run.index))
-            : undefined);
-        const spanStyles = runs.map((run) => run.kind === 'span' && run.styleIndex !== undefined
-            ? resolveSpanStyleAttributes(getSpanStyleItemAt(this.spanStyles, run.styleIndex))
-            : undefined);
-        const needsElement = runs.some((run, position) => run.kind === 'break' ||
-            (run.kind === 'span' &&
-                (anchors[position] !== undefined ||
-                    spanStyles[position] !== undefined ||
-                    hasMark(run.marks))));
-        if (!needsElement) {
-            this.renderer.appendChild(this.host.nativeElement, this.renderer.createText(runs.map(plainTextOf).join('')));
+        const runs = this.runs ??
+            prepareInlineMarkupRuns(this.text, this.links, this.spanStyles, this.fillText);
+        if (!preparedRunsNeedElements(runs)) {
+            this.renderer.appendChild(this.host.nativeElement, this.renderer.createText(runs.map((run) => (run.kind === 'break' ? '' : run.words)).join('')));
             return;
         }
-        runs.forEach((run, position) => {
+        runs.forEach((run) => {
             if (run.kind === 'text') {
-                this.renderer.appendChild(this.host.nativeElement, this.renderer.createText(run.text));
+                this.renderer.appendChild(this.host.nativeElement, this.renderer.createText(run.words));
                 return;
             }
             if (run.kind === 'break') {
                 this.renderer.appendChild(this.host.nativeElement, this.renderer.createElement('br'));
                 return;
             }
-            this.renderer.appendChild(this.host.nativeElement, this.renderSpan(run, anchors[position], spanStyles[position]));
+            if (run.words === '') {
+                return;
+            }
+            this.renderer.appendChild(this.host.nativeElement, this.renderSpan(run));
         });
     }
     /**
@@ -785,10 +937,10 @@ class InlineMarkupComponent {
      * element: the marks say what these words *are*, and the styling says how
      * this run of words looks, which is the container of the other two.
      */
-    renderSpan(run, anchor, spanStyle) {
-        let node = anchor === undefined
-            ? this.renderer.createText(run.text)
-            : this.createAnchor(anchor, run.text);
+    renderSpan(run) {
+        let node = run.anchor === undefined
+            ? this.renderer.createText(run.words)
+            : this.createAnchor(run.anchor, run.words);
         for (let position = MARK_TAGS.length - 1; position >= 0; position -= 1) {
             const [mark, tag] = MARK_TAGS[position];
             if (run.marks[mark]) {
@@ -797,14 +949,14 @@ class InlineMarkupComponent {
                 node = wrapper;
             }
         }
-        if (spanStyle === undefined) {
+        if (run.spanStyle === undefined) {
             return node;
         }
         const styled = this.renderer.createElement('span');
-        if (spanStyle.className)
-            this.renderer.setAttribute(styled, 'class', spanStyle.className);
-        if (spanStyle.style)
-            this.renderer.setAttribute(styled, 'style', spanStyle.style);
+        if (run.spanStyle.className)
+            this.renderer.setAttribute(styled, 'class', run.spanStyle.className);
+        if (run.spanStyle.style)
+            this.renderer.setAttribute(styled, 'style', run.spanStyle.style);
         this.renderer.appendChild(styled, node);
         return styled;
     }
@@ -837,7 +989,7 @@ class InlineMarkupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InlineMarkupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: InlineMarkupComponent, isStandalone: true, selector: "rulecms-inline-markup", inputs: { text: "text", links: "links", spanStyles: "spanStyles" }, host: { styleAttribute: "display: contents" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: InlineMarkupComponent, isStandalone: true, selector: "rulecms-inline-markup", inputs: { text: "text", links: "links", spanStyles: "spanStyles", fillText: "fillText", runs: "runs" }, host: { styleAttribute: "display: contents" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InlineMarkupComponent, decorators: [{
             type: Component,
@@ -853,8 +1005,300 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], spanStyles: [{
                 type: Input
+            }], fillText: [{
+                type: Input
+            }], runs: [{
+                type: Input
             }] } });
 
+const isWhitespaceChar = (char) => /\s/u.test(char);
+const unitIsWhitespace = (unit) => unit.kind === 'break' || isWhitespaceChar(unit.char);
+/**
+ * Callers validate `limit` as a positive integer; still refuse anything else so
+ * a bad budget never invents a cut.
+ */
+const isPositiveIntegerLimit = (limit) => typeof limit === 'number' && Number.isFinite(limit) && Number.isInteger(limit) && limit >= 1;
+/**
+ * Flattens prepared runs into the code-point stream a reader sees. Empty filled
+ * words contribute nothing; each `{br|}` is one unit that counts as whitespace.
+ */
+const flattenUnits = (runs) => {
+    const units = [];
+    for (let runIndex = 0; runIndex < runs.length; runIndex += 1) {
+        const run = runs[runIndex];
+        if (run.kind === 'break') {
+            units.push({ kind: 'break', runIndex });
+            continue;
+        }
+        const codePoints = Array.from(run.words);
+        for (let offset = 0; offset < codePoints.length; offset += 1) {
+            units.push({ kind: 'char', runIndex, offset, char: codePoints[offset] });
+        }
+    }
+    return units;
+};
+/**
+ * Marks units that sit inside a whole `{{ … }}` token. Whitespace inside a
+ * token is still whitespace for counting, but it must not be a cut point —
+ * otherwise a composer-canvas budget can land on "Welcome back, {{…".
+ */
+const markUnitsInsidePlaceholderTokens = (runs, units) => {
+    const inside = new Array(units.length).fill(false);
+    const unitIndexByRunOffset = new Map();
+    for (let unitIndex = 0; unitIndex < units.length; unitIndex += 1) {
+        const unit = units[unitIndex];
+        if (unit.kind === 'char') {
+            unitIndexByRunOffset.set(`${unit.runIndex}:${unit.offset}`, unitIndex);
+        }
+    }
+    for (let runIndex = 0; runIndex < runs.length; runIndex += 1) {
+        const run = runs[runIndex];
+        if (run.kind === 'break') {
+            continue;
+        }
+        const tokenRe = new RegExp(PLACEHOLDER_TOKEN_PATTERN, 'g');
+        let match;
+        while ((match = tokenRe.exec(run.words)) !== null) {
+            const startCodePoint = Array.from(run.words.slice(0, match.index)).length;
+            const tokenLength = Array.from(match[0]).length;
+            for (let offset = startCodePoint; offset < startCodePoint + tokenLength; offset += 1) {
+                const unitIndex = unitIndexByRunOffset.get(`${runIndex}:${offset}`);
+                if (unitIndex !== undefined) {
+                    inside[unitIndex] = true;
+                }
+            }
+        }
+    }
+    return inside;
+};
+/** First and exclusive-end indexes of the non-whitespace content, if any. */
+const contentBounds = (units) => {
+    let start = 0;
+    while (start < units.length && unitIsWhitespace(units[start])) {
+        start += 1;
+    }
+    let end = units.length;
+    while (end > start && unitIsWhitespace(units[end - 1])) {
+        end -= 1;
+    }
+    return { start, end };
+};
+const hasNonWhitespace = (units, from, to) => {
+    for (let index = from; index < to; index += 1) {
+        if (!unitIsWhitespace(units[index])) {
+            return true;
+        }
+    }
+    return false;
+};
+/**
+ * Visible length for budgeting: leading and trailing whitespace (including
+ * `{br|}`) are ignored, and consecutive internal whitespace counts once,
+ * matching how HTML shows it. Author whitespace is still kept verbatim in the
+ * output.
+ */
+const visibleLength = (units) => {
+    const { start, end } = contentBounds(units);
+    let count = 0;
+    let inWhitespace = false;
+    for (let index = start; index < end; index += 1) {
+        if (unitIsWhitespace(units[index])) {
+            if (!inWhitespace) {
+                count += 1;
+                inWhitespace = true;
+            }
+        }
+        else {
+            inWhitespace = false;
+            count += 1;
+        }
+    }
+    return count;
+};
+/** Visible-character cost of a unit span, with internal whitespace collapsed. */
+const visibleCostOfSpan = (units, from, to) => {
+    let count = 0;
+    let inWhitespace = false;
+    for (let index = from; index < to; index += 1) {
+        if (unitIsWhitespace(units[index])) {
+            if (!inWhitespace) {
+                count += 1;
+                inWhitespace = true;
+            }
+        }
+        else {
+            inWhitespace = false;
+            count += 1;
+        }
+    }
+    return count;
+};
+/**
+ * Exclusive end index into `units` for the head. Leading whitespace costs
+ * nothing and stays with the head. Keeps whole words within the budget; a
+ * whole `{{ … }}` token is part of one unbreakable word (whitespace inside it
+ * is never a cut point). If the first word alone is longer than `limit` and
+ * contains no token, that word is cut at the budget (code points via
+ * `Array.from`, never UTF-16 units); if it does contain a token, the whole
+ * word stays with the head. Trailing whitespace at the cut stays out of the
+ * head so the tail can start with it — including a `{br|}` at the cut.
+ * Trailing whitespace after the last word is never part of the budget.
+ */
+const findHeadExclusiveEnd = (units, limit, insidePlaceholder) => {
+    const isCutPointWhitespace = (index) => unitIsWhitespace(units[index]) && !insidePlaceholder[index];
+    let index = 0;
+    while (index < units.length && isCutPointWhitespace(index)) {
+        index += 1;
+    }
+    if (index >= units.length) {
+        return 0;
+    }
+    let visible = 0;
+    let headEnd = index;
+    let wordsIncluded = 0;
+    while (index < units.length) {
+        const wsStart = index;
+        while (index < units.length && isCutPointWhitespace(index)) {
+            index += 1;
+        }
+        const hadWhitespace = index > wsStart;
+        if (index >= units.length) {
+            break;
+        }
+        const wordStart = index;
+        while (index < units.length && !isCutPointWhitespace(index)) {
+            index += 1;
+        }
+        const wordEnd = index;
+        const wordLength = visibleCostOfSpan(units, wordStart, wordEnd);
+        // Leading whitespace was skipped above and costs nothing; only gaps between
+        // words spend budget.
+        const whitespaceCost = wordsIncluded > 0 && hadWhitespace ? 1 : 0;
+        const cost = whitespaceCost + wordLength;
+        if (visible + cost <= limit) {
+            headEnd = wordEnd;
+            visible += cost;
+            wordsIncluded += 1;
+            continue;
+        }
+        if (wordsIncluded === 0) {
+            let wordContainsToken = false;
+            for (let unitIndex = wordStart; unitIndex < wordEnd; unitIndex += 1) {
+                if (insidePlaceholder[unitIndex]) {
+                    wordContainsToken = true;
+                    break;
+                }
+            }
+            // A token must stay whole; keeping the entire first word may leave the
+            // tail empty, in which case the caller returns undefined.
+            if (wordContainsToken) {
+                return wordEnd;
+            }
+            return wordStart + (limit - visible);
+        }
+        return headEnd;
+    }
+    return headEnd;
+};
+/**
+ * Rebuilds prepared runs so the head's words followed by the tail's equal the
+ * full text. A span that straddles the cut becomes two spans with the same
+ * marks, link, and styling.
+ */
+const splitPreparedRuns = (runs, units, headExclusiveEnd) => {
+    const headCodePointEnd = runs.map(() => -1);
+    const tailCodePointStart = runs.map(() => -1);
+    const breakInHead = new Array(runs.length).fill(false);
+    const breakInTail = new Array(runs.length).fill(false);
+    for (let unitIndex = 0; unitIndex < units.length; unitIndex += 1) {
+        const unit = units[unitIndex];
+        const inHead = unitIndex < headExclusiveEnd;
+        if (unit.kind === 'break') {
+            if (inHead) {
+                breakInHead[unit.runIndex] = true;
+            }
+            else {
+                breakInTail[unit.runIndex] = true;
+            }
+            continue;
+        }
+        if (inHead) {
+            headCodePointEnd[unit.runIndex] = unit.offset + 1;
+        }
+        else if (tailCodePointStart[unit.runIndex] === -1) {
+            tailCodePointStart[unit.runIndex] = unit.offset;
+        }
+    }
+    const head = [];
+    const tail = [];
+    for (let runIndex = 0; runIndex < runs.length; runIndex += 1) {
+        const run = runs[runIndex];
+        if (run.kind === 'break') {
+            if (breakInHead[runIndex]) {
+                head.push(run);
+            }
+            if (breakInTail[runIndex]) {
+                tail.push(run);
+            }
+            continue;
+        }
+        const codePoints = Array.from(run.words);
+        const headEnd = headCodePointEnd[runIndex];
+        const tailStart = tailCodePointStart[runIndex];
+        if (headEnd > 0) {
+            head.push({ ...run, words: codePoints.slice(0, headEnd).join('') });
+        }
+        if (tailStart >= 0) {
+            tail.push({ ...run, words: codePoints.slice(tailStart).join('') });
+        }
+    }
+    return { head, tail };
+};
+/**
+ * Same parsing, filling, and element nesting as `renderInlineMarkup`, but
+ * splits the result into a visible head and a hidden tail at a character
+ * budget — the shared building block for "show more" on r-text.
+ *
+ * Counts what a reader sees after markers are gone and `fillText` has run:
+ * Unicode code points, with consecutive internal whitespace (and `{br|}`)
+ * counting once for the budget only. Leading and trailing whitespace —
+ * including leading and trailing `{br|}` — do not count, so a trailing space
+ * past the limit never invents a "show more" that reveals nothing, and leading
+ * spaces never consume the budget or leave an empty-looking head.
+ *
+ * A whole `{{ … }}` placeholder token is never cut through: whitespace inside
+ * it is not a cut point, and the first-word fallback keeps a word that
+ * contains a token rather than slicing the token. Counting is unchanged;
+ * only where a cut may land changes. Applied whether or not a filler ran —
+ * after filling, only leftover literal tokens remain.
+ *
+ * Returns `undefined` when everything fits, when `limit` is not a positive
+ * integer, or when a cut would leave the head or the tail with no
+ * non-whitespace character.
+ *
+ * The head keeps whole words that fit; if the first word is longer than
+ * `limit` and has no token, that word is cut at the budget. Whitespace at the
+ * cut — including a break — starts the tail, so concatenating the two sides'
+ * text matches the full rendering exactly.
+ */
+function renderInlineMarkupSplit(text, limit, links, spanStyles, fillText) {
+    if (!isPositiveIntegerLimit(limit)) {
+        return undefined;
+    }
+    const runs = prepareInlineMarkupRuns(text, links, spanStyles, fillText);
+    const units = flattenUnits(runs);
+    if (visibleLength(units) <= limit) {
+        return undefined;
+    }
+    const insidePlaceholder = markUnitsInsidePlaceholderTokens(runs, units);
+    const headExclusiveEnd = findHeadExclusiveEnd(units, limit, insidePlaceholder);
+    if (!hasNonWhitespace(units, 0, headExclusiveEnd) ||
+        !hasNonWhitespace(units, headExclusiveEnd, units.length)) {
+        return undefined;
+    }
+    return splitPreparedRuns(runs, units, headExclusiveEnd);
+}
+
 class HtmlTagComponent {
     constructor(host, renderer, vcr) {
         this.host = host;
@@ -881,6 +1325,11 @@ class HtmlTagComponent {
         if (this.className !== undefined) {
             this.renderer.setAttribute(el, 'class', this.className);
         }
+        if (this.attributes) {
+            Object.entries(this.attributes).forEach(([name, value]) => {
+                this.renderer.setAttribute(el, name, value);
+            });
+        }
         if (this.styleProps) {
             Object.entries(this.styleProps).forEach(([key, value]) => {
                 if (value !== undefined && value !== null && value !== '') {
@@ -894,7 +1343,7 @@ class HtmlTagComponent {
         this.created = el;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HtmlTagComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: HtmlTagComponent, isStandalone: true, selector: "rulecms-html-tag", inputs: { tag: "tag", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, viewQueries: [{ propertyName: "projected", first: true, predicate: ["projected"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: HtmlTagComponent, isStandalone: true, selector: "rulecms-html-tag", inputs: { tag: "tag", styleProps: "styleProps", className: "className", attributes: "attributes" }, host: { styleAttribute: "display: contents" }, viewQueries: [{ propertyName: "projected", first: true, predicate: ["projected"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-template #projected>
       <ng-content />
     </ng-template>
@@ -919,12 +1368,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], className: [{
                 type: Input
+            }], attributes: [{
+                type: Input
             }], projected: [{
                 type: ViewChild,
                 args: ['projected', { static: true }]
             }] } });
 
+const alreadyWarned = new Set();
+/**
+ * Development-only console warning, once per distinct message.
+ *
+ * Placeholders are filled on every render, and pre-fetched widgets render each
+ * text up to three times for device variants, so an unguarded warning would
+ * repeat for as long as the page is open. Silent in production: a wrong path is
+ * a wiring mistake to catch while building, not noise on a customer's page.
+ */
+function warnPlaceholderOnce(message) {
+    const nodeEnv = globalThis.process?.env
+        ?.NODE_ENV;
+    if (nodeEnv === 'production') {
+        return;
+    }
+    if (alreadyWarned.has(message)) {
+        return;
+    }
+    alreadyWarned.add(message);
+    console.warn(message);
+}
+
+/**
+ * The key a host puts its values under in `componentProps`, for any component
+ * whose text fills `{{ … }}` placeholders:
+ *
+ * ```tsx
+ * componentProps={{ [textColumnId]: { placeholderValues: { user } } }}
+ * ```
+ */
+const PLACEHOLDER_VALUES_PROP = 'placeholderValues';
+const isPlaceholderValues = (value) => typeof value === 'object' && value !== null;
+/**
+ * The host's `placeholderValues` as something paths can be read from, or
+ * `undefined` when there is nothing to read.
+ *
+ * Takes an object or array as it is, and a JSON string holding one, for hosts
+ * that already have their values as JSON. Anything else — a string that is not
+ * JSON, JSON for a bare number or string, a function — counts as no values, so
+ * every placeholder prints its fallback or nothing. The value crosses a package
+ * boundary untyped, so none of that may throw.
+ */
+function resolvePlaceholderValues(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if (typeof value === 'string') {
+        try {
+            const parsed = JSON.parse(value);
+            if (isPlaceholderValues(parsed)) {
+                return parsed;
+            }
+        }
+        catch {
+            // Not JSON at all; warned about below along with JSON that is not an object.
+        }
+        warnPlaceholderOnce(`RuleCMS: ${PLACEHOLDER_VALUES_PROP} is a string, but not JSON for an object or array, ` +
+            `so {{ … }} placeholders show their fallbacks or nothing. It starts ` +
+            `${JSON.stringify(value.slice(0, 40))}.`);
+        return undefined;
+    }
+    if (isPlaceholderValues(value)) {
+        return value;
+    }
+    warnPlaceholderOnce(`RuleCMS: ${PLACEHOLDER_VALUES_PROP} must be an object, an array, or a JSON string holding ` +
+        `one, but it is a ${typeof value}, so {{ … }} placeholders show their fallbacks or nothing.`);
+    return undefined;
+}
+
+/**
+ * A key, then any number of `.key` or `[index]` steps, then optionally `??`
+ * and fallback text. Spaces are allowed around the path and nowhere inside it.
+ *
+ * Keys are ASCII letters, digits, `_` and `-`, which covers camelCase,
+ * snake_case and kebab-case JSON. Anything else between the braces makes the
+ * whole token literal text, so an author who mistypes sees braces rather than
+ * a silently empty gap.
+ */
+const EXPRESSION = /^\s*([A-Za-z0-9_-]+(?:\.[A-Za-z0-9_-]+|\[\d+\])*)\s*(?:\?\?([\s\S]*))?$/;
+/** One step of a path that `EXPRESSION` has already accepted. */
+const PATH_STEP = /\[(\d+)\]|([A-Za-z0-9_-]+)/g;
+/**
+ * The inside of one placeholder token — the text between `{{` and `}}` — to
+ * the path and fallback it names, or `undefined` when it is not a placeholder
+ * after all and should be shown exactly as written.
+ *
+ * The grammar is specified in `RText.specs.md` under "Placeholders". Every
+ * port of the text component implements the same one, so a change here is a
+ * change to all of them.
+ */
+function parsePlaceholderExpression(inner) {
+    const match = EXPRESSION.exec(inner);
+    if (!match) {
+        return undefined;
+    }
+    const path = [];
+    for (const [, index, key] of match[1].matchAll(PATH_STEP)) {
+        path.push(index === undefined ? key : String(Number.parseInt(index, 10)));
+    }
+    return match[2] === undefined ? { path } : { path, fallback: match[2].trim() };
+}
+
+const PLACEHOLDER_TOKEN = new RegExp(PLACEHOLDER_TOKEN_PATTERN, 'g');
+const NOT_FOUND = { found: false };
+/**
+ * Follows a path through the host's values without ever throwing.
+ *
+ * Only own properties count, so a path cannot wander onto a prototype —
+ * `{{ user.constructor }}` finds nothing — and only objects and arrays are
+ * stepped into. A getter or proxy that throws counts as not found rather than
+ * taking the render down with it.
+ */
+const lookUpPath = (values, path) => {
+    try {
+        let current = values;
+        for (const key of path) {
+            if (typeof current !== 'object' ||
+                current === null ||
+                !Object.prototype.hasOwnProperty.call(current, key)) {
+                return NOT_FOUND;
+            }
+            current = current[key];
+        }
+        return { found: true, value: current };
+    }
+    catch {
+        return NOT_FOUND;
+    }
+};
+/**
+ * What a found value prints as, or `undefined` when it has no sensible text:
+ * `null`, an object or array, a function, `NaN`. `0` and `false` print.
+ */
+const printValue = (value) => {
+    switch (typeof value) {
+        case 'string':
+            return value;
+        case 'number':
+            return Number.isFinite(value) ? String(value) : undefined;
+        case 'boolean':
+            return String(value);
+        default:
+            return undefined;
+    }
+};
+const describeValue = (value) => {
+    if (Array.isArray(value)) {
+        return 'an array';
+    }
+    if (typeof value === 'object') {
+        return 'an object';
+    }
+    return typeof value === 'number' ? String(value) : `a ${typeof value}`;
+};
+/**
+ * The text one placeholder prints from values the host did pass, warning in
+ * development when its path finds nothing usable — usually a typo such as
+ * `lastname` for `lastName`. A `null` is the host saying "no value", so it
+ * falls back without a warning.
+ */
+const printFromValues = (values, expression, token) => {
+    const lookup = lookUpPath(values, expression.path);
+    if (!lookup.found) {
+        warnPlaceholderOnce(`RuleCMS: ${token} found nothing in ${PLACEHOLDER_VALUES_PROP}. Paths are case-sensitive.`);
+        return undefined;
+    }
+    const printed = printValue(lookup.value);
+    if (printed === undefined && lookup.value !== null && lookup.value !== undefined) {
+        warnPlaceholderOnce(`RuleCMS: ${token} found ${describeValue(lookup.value)} in ${PLACEHOLDER_VALUES_PROP}, ` +
+            'which prints as nothing. Point it at a string, number or boolean.');
+    }
+    return printed;
+};
+/**
+ * Replaces every `{{ … }}` placeholder in `text` with what its path finds in
+ * `values`, as plain text.
+ *
+ * A placeholder whose path finds nothing printable — nothing there, `null`, an
+ * empty string, an object — shows its `??` fallback, or nothing without one. A
+ * token that is not a valid placeholder stays exactly as written.
+ *
+ * `values` is `undefined` when the host passed none, which is the normal case
+ * wherever placeholders are not in use: every placeholder then falls back,
+ * silently.
+ */
+function fillPlaceholders(text, values) {
+    return text.replace(PLACEHOLDER_TOKEN, (token) => {
+        const expression = parsePlaceholderExpression(token.slice(2, -2));
+        if (expression === undefined) {
+            return token;
+        }
+        const printed = values === undefined ? undefined : printFromValues(values, expression, token);
+        return printed === undefined || printed === '' ? (expression.fallback ?? '') : printed;
+    });
+}
+
+/**
+ * Keeps the checkbox focusable and invisible. The toggle's accessible name
+ * comes from the label's visible text, not from this input's own rendering.
+ */
+const VISUALLY_HIDDEN = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    margin: '-1px',
+    padding: '0',
+    border: '0',
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    'clip-path': 'inset(50%)',
+    'white-space': 'nowrap',
+};
 class RTextComponent {
+    constructor() {
+        this.visuallyHidden = VISUALLY_HIDDEN;
+    }
     get content() {
         const contentVal = this.componentAttributes?.['content-text-3-resolutions'] ?? DEFAULT_CONTENT_TEXT;
         return typeof contentVal === 'string' ? contentVal : String(contentVal ?? '');
@@ -939,34 +1605,158 @@ class RTextComponent {
     get spanStyles() {
         return this.componentAttributes?.['inline-styles-3-resolutions'];
     }
+    /**
+     * How this render fills `{{ … }}` placeholders. On the composer canvas they
+     * stay as the author typed them: the composer never passes host values, so
+     * filling them there would only blank them out.
+     */
+    get fillText() {
+        if (this.pageViewType === 'Compose') {
+            return undefined;
+        }
+        const values = resolvePlaceholderValues(this.widgetInstanceProps?.[PLACEHOLDER_VALUES_PROP]);
+        return (words) => fillPlaceholders(words, values);
+    }
+    get showMoreAfter() {
+        return resolveTextShowMoreAfter(this.componentAttributes);
+    }
+    get showMoreLabel() {
+        return resolveTextShowMoreLabel(this.componentAttributes);
+    }
+    get showLessLabel() {
+        return resolveTextShowLessLabel(this.componentAttributes);
+    }
+    get split() {
+        const limit = this.showMoreAfter;
+        if (limit === undefined) {
+            return undefined;
+        }
+        return renderInlineMarkupSplit(this.content, limit, this.links, this.spanStyles, this.fillText);
+    }
+    /**
+     * A configured limit with no enclosing tag always produces a span root —
+     * truncated or not — so this agrees with `resolveRendersOwnElement`.
+     */
     get tag() {
-        return resolveEnclosingTag(this.componentAttributes);
+        const resolved = resolveEnclosingTag(this.componentAttributes);
+        return resolved ?? (this.showMoreAfter !== undefined ? 'span' : undefined);
+    }
+    get rootAttributes() {
+        return this.split ? { 'data-rulecms-text-truncate': '' } : undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RTextComponent, isStandalone: true, selector: "rulecms-r-text", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RTextComponent, isStandalone: true, selector: "rulecms-r-text", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className", widgetInstanceProps: "widgetInstanceProps", pageViewType: "pageViewType" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
     @if (tag) {
-      <rulecms-html-tag [tag]="tag" [styleProps]="styleProps" [className]="className">
-        <rulecms-inline-markup [text]="content" [links]="links" [spanStyles]="spanStyles" />
+      <rulecms-html-tag
+        [tag]="tag"
+        [styleProps]="styleProps"
+        [className]="className"
+        [attributes]="rootAttributes"
+      >
+        <ng-container *ngTemplateOutlet="body" />
       </rulecms-html-tag>
     } @else {
-      <rulecms-inline-markup [text]="content" [links]="links" [spanStyles]="spanStyles" />
+      <ng-container *ngTemplateOutlet="body" />
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links", "spanStyles"] }, { kind: "component", type: HtmlTagComponent, selector: "rulecms-html-tag", inputs: ["tag", "styleProps", "className"] }] }); }
+
+    <ng-template #body>
+      @if (split; as parts) {
+        <rulecms-inline-markup [runs]="parts.head" />
+        <span data-rulecms-text-ellipsis="" aria-hidden="true" hidden>…</span>
+        <span data-rulecms-text-rest="">
+          <rulecms-inline-markup [runs]="parts.tail" />
+        </span>
+        {{ ' ' }}
+        <label data-rulecms-text-toggle="" hidden>
+          <input
+            type="checkbox"
+            data-rulecms-text-toggle-input=""
+            [ngStyle]="visuallyHidden"
+          />
+          <span data-rulecms-text-show-more="">
+            <rulecms-inline-markup
+              [text]="showMoreLabel"
+              [spanStyles]="spanStyles"
+              [fillText]="fillText"
+            />
+          </span>
+          <span data-rulecms-text-show-less="">
+            <rulecms-inline-markup
+              [text]="showLessLabel"
+              [spanStyles]="spanStyles"
+              [fillText]="fillText"
+            />
+          </span>
+        </label>
+      } @else {
+        <rulecms-inline-markup
+          [text]="content"
+          [links]="links"
+          [spanStyles]="spanStyles"
+          [fillText]="fillText"
+        />
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links", "spanStyles", "fillText", "runs"] }, { kind: "component", type: HtmlTagComponent, selector: "rulecms-html-tag", inputs: ["tag", "styleProps", "className", "attributes"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rulecms-r-text',
                     standalone: true,
-                    imports: [InlineMarkupComponent, HtmlTagComponent],
+                    imports: [NgStyle, NgTemplateOutlet, InlineMarkupComponent, HtmlTagComponent],
                     template: `
     @if (tag) {
-      <rulecms-html-tag [tag]="tag" [styleProps]="styleProps" [className]="className">
-        <rulecms-inline-markup [text]="content" [links]="links" [spanStyles]="spanStyles" />
+      <rulecms-html-tag
+        [tag]="tag"
+        [styleProps]="styleProps"
+        [className]="className"
+        [attributes]="rootAttributes"
+      >
+        <ng-container *ngTemplateOutlet="body" />
       </rulecms-html-tag>
     } @else {
-      <rulecms-inline-markup [text]="content" [links]="links" [spanStyles]="spanStyles" />
+      <ng-container *ngTemplateOutlet="body" />
     }
+
+    <ng-template #body>
+      @if (split; as parts) {
+        <rulecms-inline-markup [runs]="parts.head" />
+        <span data-rulecms-text-ellipsis="" aria-hidden="true" hidden>…</span>
+        <span data-rulecms-text-rest="">
+          <rulecms-inline-markup [runs]="parts.tail" />
+        </span>
+        {{ ' ' }}
+        <label data-rulecms-text-toggle="" hidden>
+          <input
+            type="checkbox"
+            data-rulecms-text-toggle-input=""
+            [ngStyle]="visuallyHidden"
+          />
+          <span data-rulecms-text-show-more="">
+            <rulecms-inline-markup
+              [text]="showMoreLabel"
+              [spanStyles]="spanStyles"
+              [fillText]="fillText"
+            />
+          </span>
+          <span data-rulecms-text-show-less="">
+            <rulecms-inline-markup
+              [text]="showLessLabel"
+              [spanStyles]="spanStyles"
+              [fillText]="fillText"
+            />
+          </span>
+        </label>
+      } @else {
+        <rulecms-inline-markup
+          [text]="content"
+          [links]="links"
+          [spanStyles]="spanStyles"
+          [fillText]="fillText"
+        />
+      }
+    </ng-template>
   `,
                     host: { style: 'display: contents' },
                 }]
@@ -976,6 +1766,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], className: [{
                 type: Input
+            }], widgetInstanceProps: [{
+                type: Input
+            }], pageViewType: [{
+                type: Input
             }] } });
 
 /**
@@ -992,13 +1786,17 @@ const resolveNoContainer$9 = ({ componentAttributes, }) => !isBlockEnclosingTag(
 
 /**
  * True when RText is about to render an element that can carry a className —
- * any enclosing tag, block or inline. Bare text has no element, so false.
+ * any enclosing tag, block or inline, or a bare text with a show-more limit
+ * (which renders as a `span`). True bare text has no element, so false.
  *
- * Shares `resolveEnclosingTag` with RText and `resolveNoContainer`: if this
- * disagreed with what the component renders, a class would either land on
- * nothing or force a redundant wrapper.
+ * Shares `resolveEnclosingTag` and `resolveTextShowMoreAfter` with RText and
+ * `resolveNoContainer`: if this disagreed with what the component renders, a
+ * class would either land on nothing or force a redundant wrapper. The limit
+ * is part of the answer because a configured budget always produces a root
+ * element, even when the filled text happens to fit.
  */
-const resolveRendersOwnElement$9 = ({ componentAttributes, }) => !!resolveEnclosingTag(componentAttributes);
+const resolveRendersOwnElement$9 = ({ componentAttributes, }) => !!resolveEnclosingTag(componentAttributes) ||
+    resolveTextShowMoreAfter(componentAttributes) !== undefined;
 
 const attributeEditModeConfigs$9 = [
     {
@@ -1023,6 +1821,24 @@ const attributeEditModeConfigs$9 = [
         subHeading: 'Class names and CSS this text can apply to part of itself, e.g. to give a few words their own colour. To apply an entry, wrap those words in {.1|styled text}, where the number is the position of the entry in this list counting from 1; clearing an entry leaves its position in place so the other numbers keep pointing where they did, for 3 different device resolutions',
         defaultValues: {},
     },
+    {
+        name: TEXT_SHOW_MORE_AFTER_ATTRIBUTE,
+        heading: 'Show More After',
+        subHeading: 'How many characters a reader sees before the rest is hidden behind Show more. The count is the characters they read — markers and fillers already applied — and the cut ends on a whole word; leave empty to always show all of it, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: TEXT_SHOW_MORE_LABEL_ATTRIBUTE,
+        heading: 'Show More Label',
+        subHeading: 'The words on the toggle while the text is collapsed. Supports the {b|…}, {i|…} and {.1|…} markers against this text\'s Class Names & Styles list, but not links; leave empty for "Show more", for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: TEXT_SHOW_LESS_LABEL_ATTRIBUTE,
+        heading: 'Show Less Label',
+        subHeading: 'The words on the toggle while the text is expanded. Supports the {b|…}, {i|…} and {.1|…} markers against this text\'s Class Names & Styles list, but not links; leave empty for "Show less", for 3 different device resolutions',
+        defaultValues: {},
+    },
 ];
 
 const ComponentIdentifiers = {
@@ -2541,12 +3357,13 @@ class RButtonComponent {
         onClick?.(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RButtonComponent, isStandalone: true, selector: "rulecms-r-button", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className", widgetInstanceProps: "widgetInstanceProps" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RButtonComponent, isStandalone: true, selector: "rulecms-r-button", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className", widgetInstanceProps: "widgetInstanceProps", columnPath: "columnPath" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
     @if (link && disabled) {
       <a
         data-rulecms-button
         [attr.data-rulecms-button-variant]="preset.variant"
         [attr.data-rulecms-button-tone]="preset.tone"
+        [attr.data-rulecms-column-path]="columnPath"
         [ngStyle]="style"
         [class]="className || undefined"
         role="link"
@@ -2566,6 +3383,7 @@ class RButtonComponent {
         data-rulecms-button
         [attr.data-rulecms-button-variant]="preset.variant"
         [attr.data-rulecms-button-tone]="preset.tone"
+        [attr.data-rulecms-column-path]="columnPath"
         [attr.href]="link.href"
         [attr.target]="link.target"
         [attr.rel]="link.rel"
@@ -2592,6 +3410,7 @@ class RButtonComponent {
         data-rulecms-button
         [attr.data-rulecms-button-variant]="preset.variant"
         [attr.data-rulecms-button-tone]="preset.tone"
+        [attr.data-rulecms-column-path]="columnPath"
         [disabled]="disabled"
         [ngStyle]="style"
         [class]="className || undefined"
@@ -2621,6 +3440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         data-rulecms-button
         [attr.data-rulecms-button-variant]="preset.variant"
         [attr.data-rulecms-button-tone]="preset.tone"
+        [attr.data-rulecms-column-path]="columnPath"
         [ngStyle]="style"
         [class]="className || undefined"
         role="link"
@@ -2640,6 +3460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         data-rulecms-button
         [attr.data-rulecms-button-variant]="preset.variant"
         [attr.data-rulecms-button-tone]="preset.tone"
+        [attr.data-rulecms-column-path]="columnPath"
         [attr.href]="link.href"
         [attr.target]="link.target"
         [attr.rel]="link.rel"
@@ -2666,6 +3487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         data-rulecms-button
         [attr.data-rulecms-button-variant]="preset.variant"
         [attr.data-rulecms-button-tone]="preset.tone"
+        [attr.data-rulecms-column-path]="columnPath"
         [disabled]="disabled"
         [ngStyle]="style"
         [class]="className || undefined"
@@ -2692,6 +3514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], widgetInstanceProps: [{
                 type: Input
+            }], columnPath: [{
+                type: Input
             }] } });
 
 /**
@@ -3655,7 +4479,7 @@ class RListComponent {
         }
       </ul>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links", "spanStyles"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links", "spanStyles", "fillText", "runs"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RListComponent, decorators: [{
             type: Component,
@@ -3865,7 +4689,7 @@ const DEFAULT_ACCORDION_HEADING_LEVEL = 'none';
 /**
  * The summary, on one line. An unset attribute falls back to the placeholder,
  * but text the author deliberately cleared stays cleared: an empty `<summary>`
- * still draws its marker and still toggles, and the composer needs the element
+ * still draws its chevron and still toggles, and the composer needs the element
  * to stay selectable on the canvas. Same distinction `r-list` draws for its
  * items and `r-button` for its label.
  *
@@ -3947,18 +4771,29 @@ const resolveAccordionHeadingLevel = (componentAttributes) => {
 };
 
 const SUMMARY_LAYOUT_STYLE = {
-    display: 'list-item',
+    display: 'flex',
+    alignItems: 'center',
     width: '100%',
     boxSizing: 'border-box',
+    cursor: 'pointer',
+    listStyle: 'none',
 };
 const SUMMARY_HEADING_STYLE = {
-    display: 'inline',
+    flex: '1',
+    minWidth: 0,
     margin: 0,
 };
+const CHEVRON_STYLE = {
+    width: '20px',
+    height: '20px',
+    flexShrink: 0,
+    marginLeft: 'auto',
+};
 class RAccordionComponent {
     constructor() {
         this.summaryLayoutStyle = SUMMARY_LAYOUT_STYLE;
         this.summaryHeadingStyle = SUMMARY_HEADING_STYLE;
+        this.chevronStyle = CHEVRON_STYLE;
     }
     get summary() {
         return resolveAccordionSummary(this.componentAttributes);
@@ -3980,7 +4815,12 @@ class RAccordionComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RAccordionComponent, isStandalone: true, selector: "rulecms-r-accordion", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
-    <details [ngStyle]="styleProps" [class]="className || undefined" [attr.open]="open ? true : null">
+    <details
+      data-rulecms-accordion
+      [ngStyle]="styleProps"
+      [class]="className || undefined"
+      [attr.open]="open ? true : null"
+    >
       <summary [ngStyle]="summaryLayoutStyle">
         @if (headingLevel) {
           <rulecms-html-tag [tag]="headingLevel" [styleProps]="summaryHeadingStyle">
@@ -3989,6 +4829,22 @@ class RAccordionComponent {
         } @else {
           {{ summary }}
         }
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          data-rulecms-accordion-chevron
+          aria-hidden="true"
+          [ngStyle]="chevronStyle"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
       </summary>
       @for (paragraph of detail; track $index) {
         <p>
@@ -3997,7 +4853,7 @@ class RAccordionComponent {
       }
       <ng-content />
     </details>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links", "spanStyles"] }, { kind: "component", type: HtmlTagComponent, selector: "rulecms-html-tag", inputs: ["tag", "styleProps", "className"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links", "spanStyles", "fillText", "runs"] }, { kind: "component", type: HtmlTagComponent, selector: "rulecms-html-tag", inputs: ["tag", "styleProps", "className", "attributes"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RAccordionComponent, decorators: [{
             type: Component,
@@ -4006,7 +4862,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     standalone: true,
                     imports: [NgStyle, InlineMarkupComponent, HtmlTagComponent],
                     template: `
-    <details [ngStyle]="styleProps" [class]="className || undefined" [attr.open]="open ? true : null">
+    <details
+      data-rulecms-accordion
+      [ngStyle]="styleProps"
+      [class]="className || undefined"
+      [attr.open]="open ? true : null"
+    >
       <summary [ngStyle]="summaryLayoutStyle">
         @if (headingLevel) {
           <rulecms-html-tag [tag]="headingLevel" [styleProps]="summaryHeadingStyle">
@@ -4015,6 +4876,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         } @else {
           {{ summary }}
         }
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          data-rulecms-accordion-chevron
+          aria-hidden="true"
+          [ngStyle]="chevronStyle"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
       </summary>
       @for (paragraph of detail; track $index) {
         <p>
@@ -4497,6 +5374,12 @@ const componentNameToModifyAttribute = {
     'enclosing-tag-3-resolutions': 'enclosing-tag-3-resolutions',
     'links-3-resolutions': 'links-3-resolutions',
     'inline-styles-3-resolutions': 'inline-styles-3-resolutions',
+    // r-text's show-more budget is a character count, not a length in pixels,
+    // so it reuses the plain-text field the same way list-start does. The two
+    // toggle labels are free prose and reuse the multi-line text field.
+    'text-show-more-after-3-resolutions': 'image-text-3-resolutions',
+    'text-show-more-label-3-resolutions': 'content-text-3-resolutions',
+    'text-show-less-label-3-resolutions': 'content-text-3-resolutions',
     // r-list owns its own attribute names — one component per documented
     // setting — but reuses existing editors wherever one fits: the multi-line
     // text field for its items, the numbered link list for its links, and the
@@ -4641,6 +5524,54 @@ const getPreviewComponents = () => {
     return cachedPreviewComponents;
 };
 
+/** Published package version. `npm version` keeps this in sync with package.json. */
+const libraryVersion = '0.5.0';
+
+/**
+ * SSR-safe rules for `r-accordion` motion and the custom chevron.
+ *
+ * widget-angular injects this once per library via `ComponentLibraryModule.stylesheet`.
+ * Open/close height and opacity cannot be inline styles: they key off `[open]`
+ * and `::details-content`. The chevron rotate is the same. Hiding the UA
+ * triangle belongs here too — `summary::marker` is a pseudo-element.
+ *
+ * Browsers that do not support `::details-content` / `interpolate-size` still
+ * open and close; they just snap. The chevron and the disclosure keep working.
+ */
+const ACCORDION_LIBRARY_STYLESHEET = `
+[data-rulecms-accordion] {
+  interpolate-size: allow-keywords;
+}
+[data-rulecms-accordion] > summary {
+  list-style: none;
+}
+[data-rulecms-accordion] > summary::-webkit-details-marker {
+  display: none;
+}
+[data-rulecms-accordion] > summary::marker {
+  content: none;
+}
+[data-rulecms-accordion]::details-content {
+  overflow: hidden;
+  opacity: 0;
+  block-size: 0;
+  transition:
+    block-size 300ms ease,
+    opacity 300ms ease,
+    content-visibility 300ms allow-discrete;
+}
+[data-rulecms-accordion][open]::details-content {
+  opacity: 1;
+  block-size: auto;
+}
+[data-rulecms-accordion-chevron] {
+  transition: transform 300ms ease;
+}
+[data-rulecms-accordion][open] [data-rulecms-accordion-chevron] {
+  transform: rotate(180deg);
+}
+`.trim();
+
 /**
  * SSR-safe rules for `r-button` pseudo-classes.
  *
@@ -4684,8 +5615,56 @@ const BUTTON_LIBRARY_STYLESHEET = `
 }
 `.trim();
 
-/** Published package version. `npm version` keeps this in sync with package.json. */
-const libraryVersion = '0.4.1';
+/**
+ * SSR-safe rules for `r-text` show more / show less.
+ *
+ * widget-angular injects this once per library via `ComponentLibraryModule.stylesheet`.
+ * Collapsing cannot be an inline style: it keys off whether a checkbox inside
+ * the toggle is checked, which only CSS `:has()` can see without JavaScript.
+ *
+ * Every rule sits inside `@supports selector(:has(*))` and is scoped to
+ * `[data-rulecms-text-truncate]` with child combinators. Without that support
+ * — or without this sheet — the markup's `hidden` attributes leave the full
+ * text visible and the toggle invisible, which is the progressive-enhancement
+ * path on purpose.
+ */
+const TEXT_LIBRARY_STYLESHEET = `
+@supports selector(:has(*)) {
+  [data-rulecms-text-truncate] > [data-rulecms-text-toggle] {
+    display: inline;
+    cursor: pointer;
+    color: inherit;
+    font: inherit;
+  }
+  [data-rulecms-text-truncate] > [data-rulecms-text-toggle]:has(> [data-rulecms-text-toggle-input]:focus-visible) {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+  [data-rulecms-text-truncate] > [data-rulecms-text-toggle] > [data-rulecms-text-show-more]:not(:has(*)),
+  [data-rulecms-text-truncate] > [data-rulecms-text-toggle] > [data-rulecms-text-show-less]:not(:has(*)) {
+    text-decoration: underline;
+  }
+  [data-rulecms-text-truncate]:not(:has(> [data-rulecms-text-toggle] > [data-rulecms-text-toggle-input]:checked)) > [data-rulecms-text-ellipsis] {
+    display: inline;
+  }
+  [data-rulecms-text-truncate]:not(:has(> [data-rulecms-text-toggle] > [data-rulecms-text-toggle-input]:checked)) > [data-rulecms-text-rest] {
+    display: none;
+  }
+  [data-rulecms-text-truncate]:not(:has(> [data-rulecms-text-toggle] > [data-rulecms-text-toggle-input]:checked)) > [data-rulecms-text-toggle] > [data-rulecms-text-show-less] {
+    display: none;
+  }
+  [data-rulecms-text-truncate]:has(> [data-rulecms-text-toggle] > [data-rulecms-text-toggle-input]:checked) > [data-rulecms-text-toggle] > [data-rulecms-text-show-more] {
+    display: none;
+  }
+}
+`.trim();
+
+/**
+ * Optional `ComponentLibraryModule.stylesheet`. widget-angular injects this
+ * once per library as an SSR `<style>` tag. Button hover / focus / active,
+ * accordion motion, and text show-more rules are concatenated here.
+ */
+const stylesheet = `${BUTTON_LIBRARY_STYLESHEET}\n${ACCORDION_LIBRARY_STYLESHEET}\n${TEXT_LIBRARY_STYLESHEET}`;
 
 /**
  * ComponentLibraryModule conformance (the @rulecms/widget-angular contract).
@@ -4705,12 +5684,6 @@ const manifest = {
 };
 /** The render surface: component type → renderable entry. */
 const components = getSourceComponentsPlugin().components;
-/**
- * Optional `ComponentLibraryModule.stylesheet`. widget-angular injects this
- * once per library as an SSR `<style>` tag. v1 is the button hover / focus /
- * active rules; later interactive cards append here.
- */
-const stylesheet = BUTTON_LIBRARY_STYLESHEET;
 /** The editor surface: palette + attribute metadata for the RuleCMS composer. */
 const editor = {
     previewComponents: getPreviewComponents(),
@@ -4773,5 +5746,5 @@ function serializeInlineMarkers(runs) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_HEADING_LEVELS, BLOCK_ENCLOSING_TAGS, BUTTON_BORDER_VARIABLE, BUTTON_CLICK_HANDLER_PROP, BUTTON_CSS_VARIABLE_PREFIX, BUTTON_FILL_ACTIVE_VARIABLE, BUTTON_FILL_HOVER_VARIABLE, BUTTON_FILL_VARIABLE, BUTTON_INK_HOVER_VARIABLE, BUTTON_INK_VARIABLE, BUTTON_LIBRARY_STYLESHEET, BUTTON_RING_VARIABLE, BUTTON_SIZES, BUTTON_TONES, BUTTON_VARIANTS, ComponentIdentifiers, DEFAULT_ACCORDION_HEADING_LEVEL, DEFAULT_BUTTON_LABEL, DEFAULT_BUTTON_PRESET, DEFAULT_EMBED_LOADING, DEFAULT_ICON_POSITION, DEFAULT_LIST_KIND, EMBED_ASPECT_RATIOS, EMBED_LOADING_VALUES, EMBED_PROVIDERS, EMBED_UNSHAPED_HEIGHT, ENCLOSING_TAGS, ICON_POSITIONS, INLINE_ENCLOSING_TAGS, InlineMarkupComponent, LIST_KINDS, LIST_MARKERS, MOUNT_NAME_ATTRIBUTE, MOUNT_NAME_PATTERN, MOUNT_PROPS_ATTRIBUTE, MOUNT_PROP_TYPES, REJECTED_HREF_SCHEMES, SIZE_SCALES, TONE_PALETTES, applyButtonColumnStyles, buildButtonPresetStyles, buildButtonRenderStyles, disabledStyles as buttonDisabledStyles, cardGroups$1 as cardGroups, components, editor, formatInlineMarker, formatStyleDeclarations, getComponentMetadataForEditing, getPreviewCardGroups, getPreviewComponents, getSourceComponentsPlugin, getSpanStyleItemAt, isAllowedEmbedUrl, isAllowedMountName, isBlockEnclosingTag, isButtonSize, isButtonTone, isButtonVariant, isEmptySpanStyleItem, isEnclosingTag, isForbiddenMountPropKey, isSafeHref, isSpanStyleItem, manifest, normaliseHost, parseInlineLinkMarkers, parseInlineMarkers, parseStyleDeclarations, resolveButtonPreset, resolveClassNames, resolveEmbedUrl, resolveLinkAttributes, resolveMountName, resolveMountProps, resolveSpanStyleAttributes, serializeInlineMarkers, stylesheet, toneCssVariable };
+export { ACCORDION_HEADING_LEVELS, ACCORDION_LIBRARY_STYLESHEET, BLOCK_ENCLOSING_TAGS, BUTTON_BORDER_VARIABLE, BUTTON_CLICK_HANDLER_PROP, BUTTON_CSS_VARIABLE_PREFIX, BUTTON_FILL_ACTIVE_VARIABLE, BUTTON_FILL_HOVER_VARIABLE, BUTTON_FILL_VARIABLE, BUTTON_INK_HOVER_VARIABLE, BUTTON_INK_VARIABLE, BUTTON_LIBRARY_STYLESHEET, BUTTON_RING_VARIABLE, BUTTON_SIZES, BUTTON_TONES, BUTTON_VARIANTS, ComponentIdentifiers, DEFAULT_ACCORDION_HEADING_LEVEL, DEFAULT_BUTTON_LABEL, DEFAULT_BUTTON_PRESET, DEFAULT_EMBED_LOADING, DEFAULT_ICON_POSITION, DEFAULT_LIST_KIND, EMBED_ASPECT_RATIOS, EMBED_LOADING_VALUES, EMBED_PROVIDERS, EMBED_UNSHAPED_HEIGHT, ENCLOSING_TAGS, ICON_POSITIONS, INLINE_ENCLOSING_TAGS, InlineMarkupComponent, LIST_KINDS, LIST_MARKERS, MOUNT_NAME_ATTRIBUTE, MOUNT_NAME_PATTERN, MOUNT_PROPS_ATTRIBUTE, MOUNT_PROP_TYPES, PLACEHOLDER_VALUES_PROP, REJECTED_HREF_SCHEMES, SIZE_SCALES, TEXT_LIBRARY_STYLESHEET, TONE_PALETTES, applyButtonColumnStyles, buildButtonPresetStyles, buildButtonRenderStyles, disabledStyles as buttonDisabledStyles, cardGroups$1 as cardGroups, components, editor, fillPlaceholders, formatInlineMarker, formatStyleDeclarations, getComponentMetadataForEditing, getPreviewCardGroups, getPreviewComponents, getSourceComponentsPlugin, getSpanStyleItemAt, isAllowedEmbedUrl, isAllowedMountName, isBlockEnclosingTag, isButtonSize, isButtonTone, isButtonVariant, isEmptySpanStyleItem, isEnclosingTag, isForbiddenMountPropKey, isSafeHref, isSpanStyleItem, manifest, normaliseHost, parseInlineLinkMarkers, parseInlineMarkers, parseStyleDeclarations, renderInlineMarkupSplit, resolveButtonPreset, resolveClassNames, resolveEmbedUrl, resolveLinkAttributes, resolveMountName, resolveMountProps, resolvePlaceholderValues, resolveSpanStyleAttributes, serializeInlineMarkers, stylesheet, toneCssVariable };
 //# sourceMappingURL=rulecms-source-components-angular.mjs.map