@rulecms/source-components-angular 0.2.0 → 0.4.0

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Input, Component, ViewChild } from '@angular/core';
-import { NgStyle } from '@angular/common';
+import { NgStyle, NgComponentOutlet } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 
 const DEFAULT_CONTENT_TEXT = 'This is a text block. Click to edit and add your own content.';
-const defaultAttributeValues$8 = [
+const defaultAttributeValues$9 = [
     {
         name: 'content-text-3-resolutions',
         defaultValues: {
@@ -19,6 +19,10 @@ const defaultAttributeValues$8 = [
         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' },
@@ -695,7 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * - Block tag (`p`, `div`, `h1`, `section`, …): RText puts styleProps on the
  *   tag itself → no wrapper, one less element in the DOM.
  */
-const resolveNoContainer$8 = ({ componentAttributes, }) => !isBlockEnclosingTag(resolveEnclosingTag(componentAttributes));
+const resolveNoContainer$9 = ({ componentAttributes, }) => !isBlockEnclosingTag(resolveEnclosingTag(componentAttributes));
 
 /**
  * True when RText is about to render an element that can carry a className —
@@ -705,9 +998,9 @@ const resolveNoContainer$8 = ({ componentAttributes, }) => !isBlockEnclosingTag(
  * disagreed with what the component renders, a class would either land on
  * nothing or force a redundant wrapper.
  */
-const resolveRendersOwnElement$8 = ({ componentAttributes, }) => !!resolveEnclosingTag(componentAttributes);
+const resolveRendersOwnElement$9 = ({ componentAttributes, }) => !!resolveEnclosingTag(componentAttributes);
 
-const attributeEditModeConfigs$8 = [
+const attributeEditModeConfigs$9 = [
     {
         name: 'content-text-3-resolutions',
         defaultValues: {},
@@ -724,6 +1017,12 @@ const attributeEditModeConfigs$8 = [
         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 = {
@@ -737,15 +1036,16 @@ const ComponentIdentifiers = {
     rEmbed: 'r-embed',
     rList: 'r-list',
     rAccordion: 'r-accordion',
+    rMount: 'r-mount',
 };
 
-const displayCardEntry$8 = {
+const displayCardEntry$9 = {
     id: ComponentIdentifiers.rText,
-    resolveNoContainer: resolveNoContainer$8,
-    resolveRendersOwnElement: resolveRendersOwnElement$8,
+    resolveNoContainer: resolveNoContainer$9,
+    resolveRendersOwnElement: resolveRendersOwnElement$9,
     card: RTextComponent,
-    defaultAttributeValues: defaultAttributeValues$8,
-    attributeEditModeConfigs: attributeEditModeConfigs$8,
+    defaultAttributeValues: defaultAttributeValues$9,
+    attributeEditModeConfigs: attributeEditModeConfigs$9,
 };
 
 // Builds Cloudinary delivery URLs directly so the component renders a complete
@@ -930,15 +1230,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * only add a redundant element. There is no configuration that changes this,
  * so the answer is the same for every render.
  */
-const resolveNoContainer$7 = () => false;
+const resolveNoContainer$8 = () => false;
 
 /**
  * Always renders an `<img>`, which can carry a className. There is no
  * configuration that changes this.
  */
-const resolveRendersOwnElement$7 = () => true;
+const resolveRendersOwnElement$8 = () => true;
 
-const defaultAttributeValues$7 = [
+const defaultAttributeValues$8 = [
     {
         name: 'cloudinary-cloud-name',
         defaultValues: {},
@@ -983,7 +1283,7 @@ const defaultAttributeValues$7 = [
     },
 ];
 
-const attributeEditModeConfigs$7 = [
+const attributeEditModeConfigs$8 = [
     {
         name: 'cloudinary-cloud-name',
         heading: 'Cloudinary Cloud Name',
@@ -1050,13 +1350,13 @@ const attributeEditModeConfigs$7 = [
     },
 ];
 
-const displayCardEntry$7 = {
+const displayCardEntry$8 = {
     id: ComponentIdentifiers.cloudinaryAdvancedImage,
-    resolveNoContainer: resolveNoContainer$7,
-    resolveRendersOwnElement: resolveRendersOwnElement$7,
+    resolveNoContainer: resolveNoContainer$8,
+    resolveRendersOwnElement: resolveRendersOwnElement$8,
     card: CloudinaryAdvancedImageComponent,
-    defaultAttributeValues: defaultAttributeValues$7,
-    attributeEditModeConfigs: attributeEditModeConfigs$7,
+    defaultAttributeValues: defaultAttributeValues$8,
+    attributeEditModeConfigs: attributeEditModeConfigs$8,
 };
 
 // Builds media-host delivery URLs directly so the component renders a complete
@@ -1271,15 +1571,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * only add a redundant element. There is no configuration that changes this,
  * so the answer is the same for every render.
  */
-const resolveNoContainer$6 = () => false;
+const resolveNoContainer$7 = () => false;
 
 /**
  * Always renders a `<video>`, which can carry a className. There is no
  * configuration that changes this.
  */
-const resolveRendersOwnElement$6 = () => true;
+const resolveRendersOwnElement$7 = () => true;
 
-const defaultAttributeValues$6 = [
+const defaultAttributeValues$7 = [
     {
         name: 'video-host-cloud-name',
         defaultValues: {},
@@ -1336,7 +1636,7 @@ const defaultAttributeValues$6 = [
     },
 ];
 
-const attributeEditModeConfigs$6 = [
+const attributeEditModeConfigs$7 = [
     {
         name: 'video-host-cloud-name',
         heading: 'Video Host Cloud Name',
@@ -1421,13 +1721,13 @@ const attributeEditModeConfigs$6 = [
     },
 ];
 
-const displayCardEntry$6 = {
+const displayCardEntry$7 = {
     id: ComponentIdentifiers.rVideo,
-    resolveNoContainer: resolveNoContainer$6,
-    resolveRendersOwnElement: resolveRendersOwnElement$6,
+    resolveNoContainer: resolveNoContainer$7,
+    resolveRendersOwnElement: resolveRendersOwnElement$7,
     card: RVideoComponent,
-    defaultAttributeValues: defaultAttributeValues$6,
-    attributeEditModeConfigs: attributeEditModeConfigs$6,
+    defaultAttributeValues: defaultAttributeValues$7,
+    attributeEditModeConfigs: attributeEditModeConfigs$7,
 };
 
 /**
@@ -1635,16 +1935,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * and colour (via currentColor) directly, so a wrapper div would only add a
  * redundant element. No configuration changes that.
  */
-const resolveNoContainer$5 = () => false;
+const resolveNoContainer$6 = () => false;
 
 /**
  * The `<svg>` carries the className. An unresolvable attribute renders no
  * element at all, but that is a data error rather than a different root type,
  * so the configured happy path is what this answers for.
  */
-const resolveRendersOwnElement$5 = () => true;
+const resolveRendersOwnElement$6 = () => true;
 
-const defaultAttributeValues$5 = [
+const defaultAttributeValues$6 = [
     {
         // Holds `{ name, iconNode }`, not a bare name: the composer stamps the
         // geometry when the author picks the icon so the render path never needs
@@ -1656,7 +1956,7 @@ const defaultAttributeValues$5 = [
     },
 ];
 
-const attributeEditModeConfigs$5 = [
+const attributeEditModeConfigs$6 = [
     {
         name: 'icon-name-3-resolutions',
         heading: 'Icon',
@@ -1667,13 +1967,13 @@ const attributeEditModeConfigs$5 = [
     },
 ];
 
-const displayCardEntry$5 = {
+const displayCardEntry$6 = {
     id: ComponentIdentifiers.rIcon,
-    resolveNoContainer: resolveNoContainer$5,
-    resolveRendersOwnElement: resolveRendersOwnElement$5,
+    resolveNoContainer: resolveNoContainer$6,
+    resolveRendersOwnElement: resolveRendersOwnElement$6,
     card: RIconComponent,
-    defaultAttributeValues: defaultAttributeValues$5,
-    attributeEditModeConfigs: attributeEditModeConfigs$5,
+    defaultAttributeValues: defaultAttributeValues$6,
+    attributeEditModeConfigs: attributeEditModeConfigs$6,
 };
 
 /**
@@ -2400,13 +2700,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * nothing, and would put the column's background behind the button rather than
  * on it. No configuration changes that.
  */
-const resolveNoContainer$4 = () => false;
+const resolveNoContainer$5 = () => false;
 
 /**
  * There is always a root element to carry the class: the button is the
  * component, so no configuration leaves it without one.
  */
-const resolveRendersOwnElement$4 = () => true;
+const resolveRendersOwnElement$5 = () => true;
 
 /**
  * Seeds the button's own semantics only.
@@ -2419,7 +2719,7 @@ const resolveRendersOwnElement$4 = () => true;
  * happened to cover. Leaving the bag empty is what lets "unset means preset"
  * be true.
  */
-const defaultAttributeValues$4 = [
+const defaultAttributeValues$5 = [
     {
         name: BUTTON_PRESET_ATTRIBUTE,
         defaultValues: {
@@ -2443,7 +2743,7 @@ const defaultAttributeValues$4 = [
  * documentation registry asserts its pages match that sequence, so moving an
  * entry here moves it in both places at once.
  */
-const attributeEditModeConfigs$4 = [
+const attributeEditModeConfigs$5 = [
     {
         name: BUTTON_PRESET_ATTRIBUTE,
         heading: 'Button Style',
@@ -2482,13 +2782,13 @@ const attributeEditModeConfigs$4 = [
     },
 ];
 
-const displayCardEntry$4 = {
+const displayCardEntry$5 = {
     id: ComponentIdentifiers.rButton,
-    resolveNoContainer: resolveNoContainer$4,
-    resolveRendersOwnElement: resolveRendersOwnElement$4,
+    resolveNoContainer: resolveNoContainer$5,
+    resolveRendersOwnElement: resolveRendersOwnElement$5,
     card: RButtonComponent,
-    defaultAttributeValues: defaultAttributeValues$4,
-    attributeEditModeConfigs: attributeEditModeConfigs$4,
+    defaultAttributeValues: defaultAttributeValues$5,
+    attributeEditModeConfigs: attributeEditModeConfigs$5,
 };
 
 /**
@@ -2618,13 +2918,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * width and border on itself, so a wrapper div would only add a redundant
  * element. No configuration changes that.
  */
-const resolveNoContainer$3 = () => false;
+const resolveNoContainer$4 = () => false;
 
 /**
  * The `<hr>` carries the className. There is always exactly one element and it
  * is always the root, so there is nothing for this to depend on.
  */
-const resolveRendersOwnElement$3 = () => true;
+const resolveRendersOwnElement$4 = () => true;
 
 /**
  * Seeds the divider's own two settings so the drawer opens on the values a
@@ -2634,7 +2934,7 @@ const resolveRendersOwnElement$3 = () => true;
  * names are the divider's own, so nothing in Column Styles writes to them and
  * a seeded value can never shadow a style the author set.
  */
-const defaultAttributeValues$3 = [
+const defaultAttributeValues$4 = [
     {
         name: DIVIDER_STYLE_ATTRIBUTE,
         defaultValues: {
@@ -2656,7 +2956,7 @@ const defaultAttributeValues$3 = [
  * documentation registry asserts its pages match that sequence, so moving an
  * entry here moves it in both places at once.
  */
-const attributeEditModeConfigs$3 = [
+const attributeEditModeConfigs$4 = [
     {
         name: DIVIDER_STYLE_ATTRIBUTE,
         heading: 'Line Style',
@@ -2671,13 +2971,13 @@ const attributeEditModeConfigs$3 = [
     },
 ];
 
-const displayCardEntry$3 = {
+const displayCardEntry$4 = {
     id: ComponentIdentifiers.rDivider,
-    resolveNoContainer: resolveNoContainer$3,
-    resolveRendersOwnElement: resolveRendersOwnElement$3,
+    resolveNoContainer: resolveNoContainer$4,
+    resolveRendersOwnElement: resolveRendersOwnElement$4,
     card: RDividerComponent,
-    defaultAttributeValues: defaultAttributeValues$3,
-    attributeEditModeConfigs: attributeEditModeConfigs$3,
+    defaultAttributeValues: defaultAttributeValues$4,
+    attributeEditModeConfigs: attributeEditModeConfigs$4,
 };
 
 /**
@@ -3115,7 +3415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Deciding this from `resolveEmbed`, rather than from the fact that this
  * component "is an iframe component", is what keeps the two in step.
  */
-const resolveNoContainer$2 = ({ componentAttributes }) => resolveEmbed(componentAttributes) === null;
+const resolveNoContainer$3 = ({ componentAttributes }) => resolveEmbed(componentAttributes) === null;
 
 /**
  * The iframe carries the className — when there is one. A rejected or unset
@@ -3123,7 +3423,7 @@ const resolveNoContainer$2 = ({ componentAttributes }) => resolveEmbed(component
  * disappears without trace, so this answers from the same resolution the
  * component uses.
  */
-const resolveRendersOwnElement$2 = ({ componentAttributes, }) => resolveEmbed(componentAttributes) !== null;
+const resolveRendersOwnElement$3 = ({ componentAttributes, }) => resolveEmbed(componentAttributes) !== null;
 
 /**
  * Nothing is seeded, including the URL.
@@ -3136,7 +3436,7 @@ const resolveRendersOwnElement$2 = ({ componentAttributes, }) => resolveEmbed(co
  * Aspect ratio is left unset on purpose too, so it resolves from the provider
  * — a map is 4:3 and a video is 16:9 without either being written down here.
  */
-const defaultAttributeValues$2 = [
+const defaultAttributeValues$3 = [
     {
         name: 'embed-url-3-resolutions',
         defaultValues: {},
@@ -3160,7 +3460,7 @@ const defaultAttributeValues$2 = [
  * the URL first because nothing renders without it, then the three settings
  * that only matter once something does.
  */
-const attributeEditModeConfigs$2 = [
+const attributeEditModeConfigs$3 = [
     {
         name: 'embed-url-3-resolutions',
         heading: 'Embed URL',
@@ -3187,13 +3487,13 @@ const attributeEditModeConfigs$2 = [
     },
 ];
 
-const displayCardEntry$2 = {
+const displayCardEntry$3 = {
     id: ComponentIdentifiers.rEmbed,
-    resolveNoContainer: resolveNoContainer$2,
-    resolveRendersOwnElement: resolveRendersOwnElement$2,
+    resolveNoContainer: resolveNoContainer$3,
+    resolveRendersOwnElement: resolveRendersOwnElement$3,
     card: REmbedComponent,
-    defaultAttributeValues: defaultAttributeValues$2,
-    attributeEditModeConfigs: attributeEditModeConfigs$2,
+    defaultAttributeValues: defaultAttributeValues$3,
+    attributeEditModeConfigs: attributeEditModeConfigs$3,
 };
 
 /**
@@ -3222,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'];
@@ -3314,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 } : {}),
@@ -3338,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>
@@ -3346,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,
@@ -3364,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>
@@ -3372,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>
@@ -3394,16 +3698,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * that element itself. No configuration changes the answer, so no wrapper
  * div, ever.
  */
-const resolveNoContainer$1 = () => false;
+const resolveNoContainer$2 = () => false;
 
 /**
  * RList's root is always a real element — `<ul>` or `<ol>` — so it can always
  * carry the column's className, and the component applies the one it
  * receives.
  */
-const resolveRendersOwnElement$1 = () => true;
+const resolveRendersOwnElement$2 = () => true;
 
-const defaultAttributeValues$1 = [
+const defaultAttributeValues$2 = [
     {
         name: LIST_ITEMS_ATTRIBUTE,
         defaultValues: {
@@ -3435,6 +3739,10 @@ const defaultAttributeValues$1 = [
         name: LIST_LINKS_ATTRIBUTE,
         defaultValues: {},
     },
+    {
+        name: LIST_INLINE_STYLES_ATTRIBUTE,
+        defaultValues: {},
+    },
 ];
 
 /**
@@ -3444,7 +3752,7 @@ const defaultAttributeValues$1 = [
  * documentation registry asserts its pages match that sequence, so moving an
  * entry here moves it in both places at once.
  */
-const attributeEditModeConfigs$1 = [
+const attributeEditModeConfigs$2 = [
     {
         name: LIST_ITEMS_ATTRIBUTE,
         heading: 'List Items',
@@ -3481,15 +3789,21 @@ const attributeEditModeConfigs$1 = [
         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$1 = {
+const displayCardEntry$2 = {
     id: ComponentIdentifiers.rList,
-    resolveNoContainer: resolveNoContainer$1,
-    resolveRendersOwnElement: resolveRendersOwnElement$1,
+    resolveNoContainer: resolveNoContainer$2,
+    resolveRendersOwnElement: resolveRendersOwnElement$2,
     card: RListComponent,
-    defaultAttributeValues: defaultAttributeValues$1,
-    attributeEditModeConfigs: attributeEditModeConfigs$1,
+    defaultAttributeValues: defaultAttributeValues$2,
+    attributeEditModeConfigs: attributeEditModeConfigs$2,
 };
 
 /**
@@ -3527,6 +3841,7 @@ const displayCardEntry$1 = {
 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. */
@@ -3654,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);
     }
@@ -3674,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,
@@ -3700,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 />
@@ -3722,15 +4040,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * element itself. No configuration changes the answer, so no wrapper div,
  * ever.
  */
-const resolveNoContainer = () => false;
+const resolveNoContainer$1 = () => false;
 
 /**
  * RAccordion's root is always a real element — `<details>` — so it can always
  * carry the column's className, and the component applies the one it receives.
  */
-const resolveRendersOwnElement = () => true;
+const resolveRendersOwnElement$1 = () => true;
 
-const defaultAttributeValues = [
+const defaultAttributeValues$1 = [
     {
         name: ACCORDION_SUMMARY_ATTRIBUTE,
         defaultValues: {
@@ -3760,6 +4078,10 @@ const defaultAttributeValues = [
         name: ACCORDION_LINKS_ATTRIBUTE,
         defaultValues: {},
     },
+    {
+        name: ACCORDION_INLINE_STYLES_ATTRIBUTE,
+        defaultValues: {},
+    },
 ];
 
 /**
@@ -3775,7 +4097,7 @@ const defaultAttributeValues = [
  * documentation registry asserts its pages match that sequence, so moving an
  * entry here moves it in both places at once.
  */
-const attributeEditModeConfigs = [
+const attributeEditModeConfigs$1 = [
     {
         name: ACCORDION_SUMMARY_ATTRIBUTE,
         heading: 'Summary',
@@ -3806,18 +4128,288 @@ const attributeEditModeConfigs = [
         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 = {
+const displayCardEntry$1 = {
     id: ComponentIdentifiers.rAccordion,
+    resolveNoContainer: resolveNoContainer$1,
+    resolveRendersOwnElement: resolveRendersOwnElement$1,
+    card: RAccordionComponent,
+    defaultAttributeValues: defaultAttributeValues$1,
+    attributeEditModeConfigs: attributeEditModeConfigs$1,
+};
+
+/**
+ * The attribute names `r-mount` reads.
+ *
+ * Two, and that is the whole of it: which host component to render, and the
+ * props the author filled in for it. The host application supplies the actual
+ * Angular component through `rulecms-widget`'s `mounts` map. This library never
+ * imports customer code.
+ */
+const MOUNT_NAME_ATTRIBUTE = 'mount-name-3-resolutions';
+const MOUNT_PROPS_ATTRIBUTE = 'mount-props-3-resolutions';
+const MOUNT_PROP_TYPES = ['string', 'number', 'boolean', 'json'];
+const MOUNT_NAME_PATTERN = /^[a-zA-Z][a-zA-Z0-9_-]{0,63}$/;
+const FORBIDDEN_PROP_KEYS = new Set([
+    '__proto__',
+    'constructor',
+    'prototype',
+    'key',
+    'ref',
+    'children',
+    'dangerouslySetInnerHTML',
+]);
+const HTML_EVENT_KEYS = new Set([
+    'onclick',
+    'onsubmit',
+    'onload',
+    'onerror',
+    'onmouseover',
+    'onmouseenter',
+    'onfocus',
+    'onblur',
+    'onchange',
+    'oninput',
+    'onkeydown',
+    'onkeyup',
+]);
+const isMountPropType = (value) => typeof value === 'string' && MOUNT_PROP_TYPES.includes(value);
+const isAllowedMountName = (value) => typeof value === 'string' && MOUNT_NAME_PATTERN.test(value);
+const isForbiddenMountPropKey = (key) => {
+    if (FORBIDDEN_PROP_KEYS.has(key) || HTML_EVENT_KEYS.has(key.toLowerCase())) {
+        return true;
+    }
+    return /^on[A-Z]/.test(key);
+};
+const resolveMountName = (componentAttributes) => {
+    const value = componentAttributes?.[MOUNT_NAME_ATTRIBUTE];
+    return isAllowedMountName(value) ? value : '';
+};
+const isMountPropRow = (value) => {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return false;
+    }
+    const row = value;
+    return (typeof row.key === 'string' &&
+        isMountPropType(row.type) &&
+        typeof row.value === 'string');
+};
+const coerceMountPropValue = (row) => {
+    switch (row.type) {
+        case 'string':
+            return row.value;
+        case 'number': {
+            const parsed = Number(row.value);
+            return Number.isFinite(parsed) ? parsed : undefined;
+        }
+        case 'boolean':
+            if (row.value === 'true') {
+                return true;
+            }
+            if (row.value === 'false') {
+                return false;
+            }
+            return undefined;
+        case 'json':
+            try {
+                return JSON.parse(row.value);
+            }
+            catch {
+                return undefined;
+            }
+        default:
+            return undefined;
+    }
+};
+const resolveMountProps = (componentAttributes) => {
+    const raw = componentAttributes?.[MOUNT_PROPS_ATTRIBUTE];
+    if (!Array.isArray(raw)) {
+        return {};
+    }
+    const props = {};
+    for (const entry of raw) {
+        if (!isMountPropRow(entry)) {
+            continue;
+        }
+        const key = entry.key.trim();
+        if (!key || isForbiddenMountPropKey(key)) {
+            continue;
+        }
+        const coerced = coerceMountPropValue(entry);
+        if (coerced === undefined) {
+            continue;
+        }
+        props[key] = coerced;
+    }
+    return props;
+};
+
+const PLACEHOLDER_STYLE = {
+    boxSizing: 'border-box',
+    border: '1px dashed #94a3b8',
+    borderRadius: 4,
+    padding: '12px 16px',
+    color: '#64748b',
+    fontSize: 13,
+    lineHeight: 1.4,
+    fontFamily: 'system-ui, sans-serif',
+    backgroundColor: '#f8fafc',
+};
+const resolveMountRender = ({ componentAttributes, mounts, widgetInstanceProps, styleProps, }) => {
+    const name = resolveMountName(componentAttributes);
+    const hostComponent = name && mounts ? mounts[name] : undefined;
+    return {
+        name,
+        hostComponent,
+        placeholderLabel: name || 'Custom Component',
+        rootStyle: hostComponent ? styleProps : { ...PLACEHOLDER_STYLE, ...styleProps },
+        hostInputs: {
+            ...widgetInstanceProps,
+            ...resolveMountProps(componentAttributes),
+        },
+        shouldWarn: Boolean(name && mounts && !hostComponent),
+    };
+};
+const warnUnmatchedMount = (name, registered) => {
+    const nodeEnv = globalThis.process?.env
+        ?.NODE_ENV;
+    if (nodeEnv === 'production') {
+        return;
+    }
+    const available = registered.length ? registered.join(', ') : '(none)';
+    console.warn(`r-mount: no host component registered as "${name}". Registered names: ${available}.`);
+};
+
+/**
+ * A leaf that renders a host-app component by name.
+ *
+ * The author sets a name and a list of typed props in the composer. The host
+ * application passes the actual component on `rulecms-widget`'s `mounts` map.
+ * This file never imports customer code: a miss is a placeholder, not a
+ * lookup into executable text.
+ *
+ * The root is always a `<div>`. Author props are never spread onto this div
+ * — only onto the resolved host component via `NgComponentOutlet`.
+ */
+class RMountComponent {
+    constructor() {
+        this.state = resolveMountRender({});
+    }
+    ngOnChanges() {
+        this.state = resolveMountRender({
+            componentAttributes: this.componentAttributes,
+            mounts: this.mounts,
+            widgetInstanceProps: this.widgetInstanceProps,
+            styleProps: this.styleProps,
+        });
+        if (this.state.shouldWarn && this.mounts) {
+            warnUnmatchedMount(this.state.name, Object.keys(this.mounts));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RMountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RMountComponent, isStandalone: true, selector: "rulecms-r-mount", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className", mounts: "mounts", widgetInstanceProps: "widgetInstanceProps" }, usesOnChanges: true, ngImport: i0, template: `
+    <div [ngStyle]="state.rootStyle" [class]="className || undefined">
+      @if (state.hostComponent) {
+        <ng-container *ngComponentOutlet="state.hostComponent; inputs: state.hostInputs" />
+      } @else {
+        {{ state.placeholderLabel }}
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RMountComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rulecms-r-mount',
+                    standalone: true,
+                    imports: [NgStyle, NgComponentOutlet],
+                    template: `
+    <div [ngStyle]="state.rootStyle" [class]="className || undefined">
+      @if (state.hostComponent) {
+        <ng-container *ngComponentOutlet="state.hostComponent; inputs: state.hostInputs" />
+      } @else {
+        {{ state.placeholderLabel }}
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { componentAttributes: [{
+                type: Input
+            }], styleProps: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], mounts: [{
+                type: Input
+            }], widgetInstanceProps: [{
+                type: Input
+            }] } });
+
+/**
+ * Always renders a root `<div>` that holds the column's box styles — either
+ * around the host component or around the placeholder. The host component is
+ * unknown to this library, so it cannot be trusted to carry styles itself.
+ */
+const resolveNoContainer = () => false;
+
+/**
+ * The root `<div>` carries the className. There is always exactly one element
+ * and it is always the root, whether the host component resolved or not.
+ */
+const resolveRendersOwnElement = () => true;
+
+/**
+ * A fresh mount has no name and no props. Seeding either would invent a
+ * registration the host does not have, so both stay empty until the author
+ * fills them in.
+ */
+const defaultAttributeValues = [
+    {
+        name: MOUNT_NAME_ATTRIBUTE,
+        defaultValues: {},
+    },
+    {
+        name: MOUNT_PROPS_ATTRIBUTE,
+        defaultValues: {},
+    },
+];
+
+/**
+ * Both settings the mount offers, in the order the Modify drawer shows them.
+ */
+const attributeEditModeConfigs = [
+    {
+        name: MOUNT_NAME_ATTRIBUTE,
+        heading: 'Component Name',
+        subHeading: 'The name your developer registered in the app. Must match exactly, for 3 different device resolutions',
+        defaultValues: {},
+    },
+    {
+        name: MOUNT_PROPS_ATTRIBUTE,
+        heading: 'Props',
+        subHeading: 'Name and value pairs passed to that component. The component decides what each name means, for 3 different device resolutions',
+        defaultValues: {},
+    },
+];
+
+const displayCardEntry = {
+    id: ComponentIdentifiers.rMount,
     resolveNoContainer,
     resolveRendersOwnElement,
-    card: RAccordionComponent,
+    card: RMountComponent,
     defaultAttributeValues,
     attributeEditModeConfigs,
 };
 
 const cardEntries$1 = [
+    displayCardEntry$9,
     displayCardEntry$8,
     displayCardEntry$7,
     displayCardEntry$6,
@@ -3904,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
@@ -3916,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
@@ -3926,6 +4520,12 @@ 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.
+    'mount-name-3-resolutions': 'image-text-3-resolutions',
+    'mount-props-3-resolutions': 'mount-props-3-resolutions',
     'content-title-3-resolutions': 'content-title-3-resolutions',
     'media-selector-3-resolutions': 'media-selector-3-resolutions',
     'pass-through-image-attributes-alt-3-resolutions': 'image-alt-text-3-resolutions',
@@ -3999,6 +4599,7 @@ const cardEntries = [
     { id: ComponentIdentifiers.rEmbed, icon: '⧉', label: 'Embed' },
     { id: ComponentIdentifiers.rList, icon: '☰', label: 'List' },
     { id: ComponentIdentifiers.rAccordion, icon: '▸', label: 'Accordion' },
+    { id: ComponentIdentifiers.rMount, icon: '⌘', label: 'Custom' },
 ];
 
 const cardGroups = [
@@ -4128,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) {
@@ -4168,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, 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, isBlockEnclosingTag, isButtonSize, isButtonTone, isButtonVariant, isEnclosingTag, isSafeHref, manifest, normaliseHost, parseInlineLinkMarkers, parseInlineMarkers, resolveButtonPreset, resolveEmbedUrl, resolveLinkAttributes, 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