@rulecms/source-components-angular 0.3.0 → 0.4.0

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

@@ -19,6 +19,10 @@ const defaultAttributeValues$9 = [
         name: 'links-3-resolutions',
         defaultValues: {},
     },
+    {
+        name: 'inline-styles-3-resolutions',
+        defaultValues: {},
+    },
 ];
 
 /**
@@ -351,13 +355,266 @@ function resolveLinkAttributes(item) {
 }
 
 /**
- * `{` + optional mark letters + optional index + `|` + text + `}`.
+ * Runtime guard for entries arriving through componentAttributes (untyped,
+ * editor-authored data).
+ *
+ * Only object shape is checked, for the same reason as `isLinkItem`: one bad
+ * field must cost that field rather than the whole entry, so per-field
+ * validation belongs to `resolveSpanStyleAttributes` where each value is turned
+ * into something an element can carry.
+ */
+function isSpanStyleItem(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/**
+ * True for a cleared slot. Clearing an entry stores `{}` rather than removing
+ * the array element, because marker indexes are 1-based positions: dropping an
+ * element would silently repoint every later marker.
+ *
+ * A `label` alone is a cleared slot. It is the author's note to themselves
+ * about which entry this is, and an entry that only has a name applies nothing.
+ */
+function isEmptySpanStyleItem(item) {
+    if (!isSpanStyleItem(item)) {
+        return true;
+    }
+    return [item.classNames, item.declarations].every((value) => typeof value !== 'string' || value.trim() === '');
+}
+/**
+ * The entry a `{.n|…}` marker points at, by 1-based position. Tolerant of bad
+ * data on every axis — a non-array list, a fractional or out-of-range index, a
+ * hole in the array — because none of it may throw during a render.
+ */
+function getSpanStyleItemAt(spanStyles, oneBasedIndex) {
+    if (!Array.isArray(spanStyles)) {
+        return undefined;
+    }
+    if (!Number.isInteger(oneBasedIndex) || oneBasedIndex < 1) {
+        return undefined;
+    }
+    const entry = spanStyles[oneBasedIndex - 1];
+    return isSpanStyleItem(entry) ? entry : undefined;
+}
+
+/**
+ * A class name is a *selector* into CSS the customer already ships. This
+ * library cannot see those rules, so it cannot validate a name against
+ * anything — the only useful question is whether the token could damage the
+ * document it lands in, and the answer is almost always no: every renderer sets
+ * `class` through a DOM property or a framework binding, never by pasting into
+ * markup.
+ *
+ * So the filter is deliberately permissive. Utility frameworks make class names
+ * that look like code — `md:hover:text-lg`, `w-1/2`, `text-[#c00]`,
+ * `[&>svg]:size-4` — and a tidier-looking allowlist would reject those and be
+ * read as a bug.
+ */
+/** Whitespace separates tokens, so it cannot appear inside one. */
+const TOKEN_SEPARATOR = /\s+/;
+/**
+ * Control characters, and the two brace characters. Braces are not dangerous in
+ * a class attribute; they are rejected because a token containing one is nearly
+ * always an inline marker the author pasted into the wrong field, and silently
+ * accepting it would style nothing and explain nothing.
+ */
+// eslint-disable-next-line no-control-regex -- control characters are what this matches
+const REJECTED_IN_TOKEN = /[\u0000-\u001f\u007f{}]/;
+/**
+ * Bounds, so a pathological value cannot become a pathological `class`
+ * attribute. Both are far past anything a person types by hand.
+ */
+const MAX_TOKENS = 50;
+const MAX_TOKEN_LENGTH = 120;
+const isUsableToken = (token) => 
+// Splitting a blank string yields one empty token, which is not a class name.
+token !== '' && token.length <= MAX_TOKEN_LENGTH && !REJECTED_IN_TOKEN.test(token);
+/**
+ * The `class` value for a styling entry, or `undefined` when it has none worth
+ * setting.
+ *
+ * Duplicates collapse and order is the author's. One bad token costs that
+ * token: the rest of a mostly-fine list still applies, which is the same
+ * per-field tolerance `resolveLinkAttributes` gives a link entry.
+ */
+function resolveClassNames(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const tokens = value.trim().split(TOKEN_SEPARATOR).filter(isUsableToken);
+    if (tokens.length === 0) {
+        return undefined;
+    }
+    return Array.from(new Set(tokens)).slice(0, MAX_TOKENS).join(' ');
+}
+
+/**
+ * Declarations are split on `;` without tracking quotes, so a value containing
+ * a semicolon inside a string — `content: "a;b"` — is cut in half and both
+ * halves are then rejected as malformed. That is an acceptable trade: the
+ * properties worth setting on a run of words do not take string values, and a
+ * quote-aware splitter is a second CSS parser to keep correct.
+ */
+const DECLARATION_SEPARATOR = ';';
+/** `--custom-property`, or an ordinary property with an optional vendor prefix. */
+const PROPERTY_NAME = /^(--[a-zA-Z0-9-]+|-?[a-zA-Z][a-zA-Z0-9-]*)$/;
+/**
+ * Properties that do something other than style text, whatever their value.
+ *
+ * `behavior` and `-moz-binding` attach script to an element through CSS in old
+ * engines. They are long dead, and they are named here anyway: the cost is one
+ * line, and the alternative is relying on every reader of this file knowing
+ * that CSS was once executable.
+ */
+const REJECTED_PROPERTIES = new Set(['behavior', '-moz-binding']);
+/**
+ * Constructs that make a declaration do more than describe appearance.
+ *
+ * `url(` is rejected rather than filtered because every reason to allow it is
+ * better served elsewhere: a background image is a component, and a `url()` in
+ * authored text is either a tracking pixel, a `data:` payload, or a
+ * `javascript:` scheme an older engine will still run. A backslash is rejected
+ * for the same reason in one step: CSS escapes let `\75 rl(` spell `url(`, so
+ * allowing escapes would mean decoding them before every other check.
+ */
+const REJECTED_IN_VALUE = [
+    'url(',
+    'expression(',
+    'javascript:',
+    'vbscript:',
+    '@',
+    '\\',
+    '<',
+    '>',
+    '/*',
+    '*/',
+];
+/** Control characters, and the braces that would end a declaration list. */
+// eslint-disable-next-line no-control-regex -- control characters are what this matches
+const REJECTED_CHARACTERS = /[\u0000-\u001f\u007f{}]/;
+/**
+ * React drops `!important` from a style object and warns about it, while the
+ * string-based ports would honour it — one authored value behaving differently
+ * per platform. It comes off everywhere instead, and the class-names field is
+ * the supported way to win a specificity fight.
+ */
+const IMPORTANT_FLAG = /\s*!\s*important\s*$/i;
+/** Bounds well past anything typed by hand, so a pasted stylesheet cannot land here. */
+const MAX_DECLARATIONS = 40;
+const MAX_VALUE_LENGTH = 400;
+const isUsableProperty = (property) => PROPERTY_NAME.test(property) && !REJECTED_PROPERTIES.has(property.toLowerCase());
+const isUsableValue = (value) => {
+    if (value === '' || value.length > MAX_VALUE_LENGTH) {
+        return false;
+    }
+    if (REJECTED_CHARACTERS.test(value)) {
+        return false;
+    }
+    const lowered = value.toLowerCase();
+    return !REJECTED_IN_VALUE.some((rejected) => lowered.includes(rejected));
+};
+/**
+ * A declaration to the pair it means, or `undefined` when it is malformed or
+ * carries something this module will not apply.
+ */
+const parseDeclaration = (declaration) => {
+    const separator = declaration.indexOf(':');
+    if (separator === -1) {
+        return undefined;
+    }
+    // Only the first colon splits: `background: linear-gradient(…)` keeps the rest.
+    const property = declaration.slice(0, separator).trim();
+    const value = declaration.slice(separator + 1).replace(IMPORTANT_FLAG, '').trim();
+    if (!isUsableProperty(property) || !isUsableValue(value)) {
+        return undefined;
+    }
+    return { property, value };
+};
+/**
+ * An authored CSS declaration list to the declarations that will be applied.
+ *
+ * The list is a denylist over values and an allowlist over property names,
+ * which is the same shape as `text-safety/validate-text-content.ts` in the
+ * composer and for the same reason: a person writing `color: #c00` should never
+ * have to think about this function, while the handful of constructs that turn
+ * a declaration into a request or a script are named and refused.
+ *
+ * A rejected declaration costs only itself. `color: red; behavior: url(x)`
+ * still sets the colour, because dropping the whole entry over one bad
+ * declaration would lose work the author can see is fine.
+ */
+function parseStyleDeclarations(value) {
+    if (typeof value !== 'string') {
+        return [];
+    }
+    const parsed = [];
+    const seen = new Set();
+    for (const declaration of value.split(DECLARATION_SEPARATOR)) {
+        if (declaration.trim() === '') {
+            continue;
+        }
+        const pair = parseDeclaration(declaration);
+        if (pair === undefined) {
+            continue;
+        }
+        // Last one wins, as it would in a real declaration list.
+        if (seen.has(pair.property)) {
+            parsed[parsed.findIndex((existing) => existing.property === pair.property)] = pair;
+            continue;
+        }
+        seen.add(pair.property);
+        parsed.push(pair);
+        if (parsed.length === MAX_DECLARATIONS) {
+            break;
+        }
+    }
+    return parsed;
+}
+/**
+ * Declarations back to a CSS string, for the places that want a `style`
+ * attribute rather than an object — which in this port is every one of them.
+ */
+function formatStyleDeclarations(declarations) {
+    return declarations.map(({ property, value }) => `${property}: ${value}`).join('; ');
+}
+
+/**
+ * Turns a stored styling entry into element attributes, or `undefined` when the
+ * entry cannot produce any — missing, cleared, or holding nothing that survived
+ * the checks in `resolveClassNames` and `parseStyleDeclarations`. Callers render
+ * the plain text in that case, exactly as they do for a link that resolves to
+ * nothing.
+ *
+ * Knows nothing about text, markers, or any one component: this is the piece
+ * every component rendering inline markup shares.
+ */
+function resolveSpanStyleAttributes(item) {
+    if (!isSpanStyleItem(item)) {
+        return undefined;
+    }
+    const className = resolveClassNames(item.classNames);
+    const declarations = parseStyleDeclarations(item.declarations);
+    if (className === undefined && declarations.length === 0) {
+        return undefined;
+    }
+    return {
+        ...(className !== undefined ? { className } : {}),
+        ...(declarations.length > 0 ? { style: formatStyleDeclarations(declarations) } : {}),
+    };
+}
+
+/**
+ * `{` + 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.
+ *
+ * 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*)\|([^}]*)\}/y;
+const MARKER = /\{([a-z]*)(\d*)(?:\.(\d+))?\|([^}]*)\}/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
@@ -399,9 +656,9 @@ const resolveMarks = (letters) => {
  * The grammar, and everything it deliberately leaves as literal text, is
  * specified in `rulecms/__docs__/__ARCHITECTURE__/INLINE_MARKUP_ARCHITECTURE.md`.
  * In short: a marker is `{`, then lowercase mark letters, then a link index,
- * then `|`, then its text, then `}`. At least one of the letters and the index
- * must be present, and everything that does not match that shape stays
- * verbatim — `{name}`, `{99}`, a lone `{`, JSON fragments, an unterminated
+ * then `.` and a styling index, then `|`, then its text, then `}`. At least one
+ * of those three must be present, and everything that does not match that shape
+ * stays verbatim — `{name}`, `{99}`, a lone `{`, JSON fragments, an unterminated
  * marker, an unknown mark letter, and empty span text.
  *
  * Indexes are 1-based and normalize through a base-10 parse, so `{01|x}` and
@@ -429,7 +686,7 @@ function parseInlineMarkers(value) {
         }
         MARKER.lastIndex = open;
         const match = MARKER.exec(value);
-        const run = match ? resolveRun(match[1], match[2], match[3]) : undefined;
+        const run = match ? resolveRun(match[1], match[2], match[3], match[4]) : undefined;
         if (run === undefined) {
             // Not a marker: keep the brace as text and look for the next one.
             pendingText += value.slice(cursor, open + 1);
@@ -447,13 +704,19 @@ function parseInlineMarkers(value) {
 /**
  * One matched `{…|…}` to the run it means, or `undefined` when the match is
  * not a marker after all and its opening brace is literal text.
+ *
+ * `styleDigits` is `undefined` when the marker carried no dot at all, which is
+ * different from a dot with nothing after it — the regex does not match that,
+ * so it never reaches here.
  */
-const resolveRun = (letters, digits, text) => {
+const resolveRun = (letters, digits, styleDigits, text) => {
     if (letters === BREAK_TOKEN) {
         // A break carries nothing. `{br|x}` is a mistake, not a break with text.
-        return digits === '' && text === '' ? { kind: 'break' } : undefined;
+        return digits === '' && styleDigits === undefined && text === ''
+            ? { kind: 'break' }
+            : undefined;
     }
-    if (letters === '' && digits === '') {
+    if (letters === '' && digits === '' && styleDigits === undefined) {
         return undefined;
     }
     // Empty text has no words to mark or link, and staying literal is what shows
@@ -469,6 +732,7 @@ const resolveRun = (letters, digits, text) => {
         kind: 'span',
         text,
         ...(digits === '' ? {} : { index: Number.parseInt(digits, 10) }),
+        ...(styleDigits === undefined ? {} : { styleIndex: Number.parseInt(styleDigits, 10) }),
         marks,
     };
 };
@@ -492,8 +756,14 @@ class InlineMarkupComponent {
         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 || hasMark(run.marks))));
+            (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('')));
             return;
@@ -507,10 +777,15 @@ class InlineMarkupComponent {
                 this.renderer.appendChild(this.host.nativeElement, this.renderer.createElement('br'));
                 return;
             }
-            this.renderer.appendChild(this.host.nativeElement, this.renderSpan(run, anchors[position]));
+            this.renderer.appendChild(this.host.nativeElement, this.renderSpan(run, anchors[position], spanStyles[position]));
         });
     }
-    renderSpan(run, anchor) {
+    /**
+     * The anchor stays innermost and a styling entry becomes the outermost
+     * 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);
@@ -522,7 +797,16 @@ class InlineMarkupComponent {
                 node = wrapper;
             }
         }
-        return node;
+        if (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);
+        this.renderer.appendChild(styled, node);
+        return styled;
     }
     createAnchor(anchor, text) {
         const el = this.renderer.createElement('a');
@@ -553,7 +837,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" }, 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" }, 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,
@@ -567,6 +851,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], links: [{
                 type: Input
+            }], spanStyles: [{
+                type: Input
             }] } });
 
 class HtmlTagComponent {
@@ -646,6 +932,13 @@ class RTextComponent {
     get links() {
         return this.componentAttributes?.['links-3-resolutions'];
     }
+    /**
+     * The two index markers — `{n|…}` into the link list and `{.n|…}` into the
+     * styling list — resolve by 1-based position against separate attributes.
+     */
+    get spanStyles() {
+        return this.componentAttributes?.['inline-styles-3-resolutions'];
+    }
     get tag() {
         return resolveEnclosingTag(this.componentAttributes);
     }
@@ -653,12 +946,12 @@ class RTextComponent {
     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: `
     @if (tag) {
       <rulecms-html-tag [tag]="tag" [styleProps]="styleProps" [className]="className">
-        <rulecms-inline-markup [text]="content" [links]="links" />
+        <rulecms-inline-markup [text]="content" [links]="links" [spanStyles]="spanStyles" />
       </rulecms-html-tag>
     } @else {
-      <rulecms-inline-markup [text]="content" [links]="links" />
+      <rulecms-inline-markup [text]="content" [links]="links" [spanStyles]="spanStyles" />
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links"] }, { kind: "component", type: HtmlTagComponent, selector: "rulecms-html-tag", inputs: ["tag", "styleProps", "className"] }] }); }
+  `, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RTextComponent, decorators: [{
             type: Component,
@@ -669,10 +962,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     template: `
     @if (tag) {
       <rulecms-html-tag [tag]="tag" [styleProps]="styleProps" [className]="className">
-        <rulecms-inline-markup [text]="content" [links]="links" />
+        <rulecms-inline-markup [text]="content" [links]="links" [spanStyles]="spanStyles" />
       </rulecms-html-tag>
     } @else {
-      <rulecms-inline-markup [text]="content" [links]="links" />
+      <rulecms-inline-markup [text]="content" [links]="links" [spanStyles]="spanStyles" />
     }
   `,
                     host: { style: 'display: contents' },
@@ -724,6 +1017,12 @@ const attributeEditModeConfigs$9 = [
         subHeading: 'Links this text can point at. To link part of the text, wrap those words in {1|linked 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: 'inline-styles-3-resolutions',
+        heading: 'Class Names & Styles',
+        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: {},
+    },
 ];
 
 const ComponentIdentifiers = {
@@ -3223,6 +3522,7 @@ const LIST_MARKER_ATTRIBUTE = 'list-marker-3-resolutions';
 const LIST_START_ATTRIBUTE = 'list-start-3-resolutions';
 const LIST_REVERSED_ATTRIBUTE = 'list-reversed-3-resolutions';
 const LIST_LINKS_ATTRIBUTE = 'list-links-3-resolutions';
+const LIST_INLINE_STYLES_ATTRIBUTE = 'list-inline-styles-3-resolutions';
 /** What a freshly dropped list shows before the author types anything. */
 const DEFAULT_LIST_ITEMS = 'First item\nSecond item\nThird item';
 const LIST_KINDS = ['unordered', 'ordered'];
@@ -3315,6 +3615,9 @@ class RListComponent {
     get links() {
         return this.componentAttributes?.[LIST_LINKS_ATTRIBUTE];
     }
+    get spanStyles() {
+        return this.componentAttributes?.[LIST_INLINE_STYLES_ATTRIBUTE];
+    }
     get style() {
         return {
             ...(this.marker !== undefined ? { listStyleType: this.marker } : {}),
@@ -3339,7 +3642,7 @@ class RListComponent {
       <ol [ngStyle]="style" [class]="className || undefined" [attr.start]="start" [attr.reversed]="reversed ? true : null">
         @for (item of items; track $index) {
           <li>
-            <rulecms-inline-markup [text]="item" [links]="links" />
+            <rulecms-inline-markup [text]="item" [links]="links" [spanStyles]="spanStyles" />
           </li>
         }
       </ol>
@@ -3347,12 +3650,12 @@ class RListComponent {
       <ul [ngStyle]="style" [class]="className || undefined">
         @for (item of items; track $index) {
           <li>
-            <rulecms-inline-markup [text]="item" [links]="links" />
+            <rulecms-inline-markup [text]="item" [links]="links" [spanStyles]="spanStyles" />
           </li>
         }
       </ul>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InlineMarkupComponent, selector: "rulecms-inline-markup", inputs: ["text", "links", "spanStyles"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RListComponent, decorators: [{
             type: Component,
@@ -3365,7 +3668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       <ol [ngStyle]="style" [class]="className || undefined" [attr.start]="start" [attr.reversed]="reversed ? true : null">
         @for (item of items; track $index) {
           <li>
-            <rulecms-inline-markup [text]="item" [links]="links" />
+            <rulecms-inline-markup [text]="item" [links]="links" [spanStyles]="spanStyles" />
           </li>
         }
       </ol>
@@ -3373,7 +3676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       <ul [ngStyle]="style" [class]="className || undefined">
         @for (item of items; track $index) {
           <li>
-            <rulecms-inline-markup [text]="item" [links]="links" />
+            <rulecms-inline-markup [text]="item" [links]="links" [spanStyles]="spanStyles" />
           </li>
         }
       </ul>
@@ -3436,6 +3739,10 @@ const defaultAttributeValues$2 = [
         name: LIST_LINKS_ATTRIBUTE,
         defaultValues: {},
     },
+    {
+        name: LIST_INLINE_STYLES_ATTRIBUTE,
+        defaultValues: {},
+    },
 ];
 
 /**
@@ -3482,6 +3789,12 @@ const attributeEditModeConfigs$2 = [
         subHeading: 'Links the items can point at. To link part of an item, wrap those words in {1|linked 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: LIST_INLINE_STYLES_ATTRIBUTE,
+        heading: 'Class Names & Styles',
+        subHeading: 'Class names and CSS the items can apply to part of themselves, 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: {},
+    },
 ];
 
 const displayCardEntry$2 = {
@@ -3528,6 +3841,7 @@ const displayCardEntry$2 = {
 const ACCORDION_SUMMARY_ATTRIBUTE = 'accordion-summary-3-resolutions';
 const ACCORDION_DETAIL_ATTRIBUTE = 'accordion-detail-3-resolutions';
 const ACCORDION_LINKS_ATTRIBUTE = 'accordion-links-3-resolutions';
+const ACCORDION_INLINE_STYLES_ATTRIBUTE = 'accordion-inline-styles-3-resolutions';
 const ACCORDION_OPEN_ATTRIBUTE = 'accordion-open-3-resolutions';
 const ACCORDION_HEADING_LEVEL_ATTRIBUTE = 'accordion-heading-level-3-resolutions';
 /** What a freshly dropped accordion shows before the author types anything. */
@@ -3655,6 +3969,9 @@ class RAccordionComponent {
     get links() {
         return this.componentAttributes?.[ACCORDION_LINKS_ATTRIBUTE];
     }
+    get spanStyles() {
+        return this.componentAttributes?.[ACCORDION_INLINE_STYLES_ATTRIBUTE];
+    }
     get open() {
         return resolveAccordionOpen(this.componentAttributes);
     }
@@ -3675,12 +3992,12 @@ class RAccordionComponent {
       </summary>
       @for (paragraph of detail; track $index) {
         <p>
-          <rulecms-inline-markup [text]="paragraph" [links]="links" />
+          <rulecms-inline-markup [text]="paragraph" [links]="links" [spanStyles]="spanStyles" />
         </p>
       }
       <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"] }, { 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"] }, { kind: "component", type: HtmlTagComponent, selector: "rulecms-html-tag", inputs: ["tag", "styleProps", "className"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RAccordionComponent, decorators: [{
             type: Component,
@@ -3701,7 +4018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       </summary>
       @for (paragraph of detail; track $index) {
         <p>
-          <rulecms-inline-markup [text]="paragraph" [links]="links" />
+          <rulecms-inline-markup [text]="paragraph" [links]="links" [spanStyles]="spanStyles" />
         </p>
       }
       <ng-content />
@@ -3761,6 +4078,10 @@ const defaultAttributeValues$1 = [
         name: ACCORDION_LINKS_ATTRIBUTE,
         defaultValues: {},
     },
+    {
+        name: ACCORDION_INLINE_STYLES_ATTRIBUTE,
+        defaultValues: {},
+    },
 ];
 
 /**
@@ -3807,6 +4128,12 @@ const attributeEditModeConfigs$1 = [
         subHeading: 'Links the detail can point at. To link part of the detail, wrap those words in {1|linked 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: ACCORDION_INLINE_STYLES_ATTRIBUTE,
+        heading: 'Class Names & Styles',
+        subHeading: 'Class names and CSS the detail 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: {},
+    },
 ];
 
 const displayCardEntry$1 = {
@@ -4169,6 +4496,7 @@ const componentNameToModifyAttribute = {
     'embed-loading-3-resolutions': 'embed-loading-3-resolutions',
     'enclosing-tag-3-resolutions': 'enclosing-tag-3-resolutions',
     'links-3-resolutions': 'links-3-resolutions',
+    'inline-styles-3-resolutions': 'inline-styles-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
@@ -4181,6 +4509,7 @@ const componentNameToModifyAttribute = {
     'list-start-3-resolutions': 'image-text-3-resolutions',
     'list-reversed-3-resolutions': 'list-reversed-3-resolutions',
     'list-links-3-resolutions': 'links-3-resolutions',
+    'list-inline-styles-3-resolutions': 'inline-styles-3-resolutions',
     // r-accordion owns its own attribute names — one component per documented
     // setting — and reuses existing editors for everything that fits: the
     // multi-line text field for the summary and the detail, and the numbered
@@ -4191,6 +4520,7 @@ const componentNameToModifyAttribute = {
     'accordion-open-3-resolutions': 'accordion-open-3-resolutions',
     'accordion-heading-level-3-resolutions': 'accordion-heading-level-3-resolutions',
     'accordion-links-3-resolutions': 'links-3-resolutions',
+    'accordion-inline-styles-3-resolutions': 'inline-styles-3-resolutions',
     // r-mount: the name is a constrained identifier and reuses the shared
     // plain-text editor; the props list is a repeatable key/type/value row
     // and needs its own editor.
@@ -4399,17 +4729,18 @@ const markLetters = (marks) => MARK_LETTERS.filter(([mark]) => marks[mark])
     .map(([, letter]) => letter)
     .join('');
 /**
- * A span back to its marker. Text that carries neither marks nor an index is
- * emitted bare: a marker with nothing to say would only be noise an author has
- * to read past, and it round-trips to the same runs either way.
+ * A span back to its marker. Text that carries no marks, no link and no styling
+ * is emitted bare: a marker with nothing to say would only be noise an author
+ * has to read past, and it round-trips to the same runs either way.
  */
 const formatSpan = (run) => {
     const letters = markLetters(run.marks);
     const index = run.index === undefined ? '' : `${run.index}`;
-    if (letters === '' && index === '') {
+    const styleIndex = run.styleIndex === undefined ? '' : `.${run.styleIndex}`;
+    if (letters === '' && index === '' && styleIndex === '') {
         return run.text;
     }
-    return `{${letters}${index}|${run.text}}`;
+    return `{${letters}${index}${styleIndex}|${run.text}}`;
 };
 /** One run as authored text. */
 function formatInlineMarker(run) {
@@ -4439,5 +4770,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, getComponentMetadataForEditing, getPreviewCardGroups, getPreviewComponents, getSourceComponentsPlugin, isAllowedEmbedUrl, isAllowedMountName, isBlockEnclosingTag, isButtonSize, isButtonTone, isButtonVariant, isEnclosingTag, isForbiddenMountPropKey, isSafeHref, manifest, normaliseHost, parseInlineLinkMarkers, parseInlineMarkers, resolveButtonPreset, resolveEmbedUrl, resolveLinkAttributes, resolveMountName, resolveMountProps, serializeInlineMarkers, stylesheet, toneCssVariable };
+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 };
 //# sourceMappingURL=rulecms-source-components-angular.mjs.map