@rulecms/source-components-angular 0.1.0 → 0.3.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: {
@@ -695,7 +695,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 +705,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: {},
@@ -737,15 +737,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 +931,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 +984,7 @@ const defaultAttributeValues$7 = [
     },
 ];
 
-const attributeEditModeConfigs$7 = [
+const attributeEditModeConfigs$8 = [
     {
         name: 'cloudinary-cloud-name',
         heading: 'Cloudinary Cloud Name',
@@ -1050,13 +1051,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 +1272,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 +1337,7 @@ const defaultAttributeValues$6 = [
     },
 ];
 
-const attributeEditModeConfigs$6 = [
+const attributeEditModeConfigs$7 = [
     {
         name: 'video-host-cloud-name',
         heading: 'Video Host Cloud Name',
@@ -1421,13 +1422,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 +1636,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 +1657,7 @@ const defaultAttributeValues$5 = [
     },
 ];
 
-const attributeEditModeConfigs$5 = [
+const attributeEditModeConfigs$6 = [
     {
         name: 'icon-name-3-resolutions',
         heading: 'Icon',
@@ -1667,13 +1668,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,
 };
 
 /**
@@ -1846,6 +1847,18 @@ const SIZE_SCALES = {
  * button to differ still override it per column, as before.
  */
 const BUTTON_CSS_VARIABLE_PREFIX = '--rulecms-button';
+/**
+ * Per-instance slots the library stylesheet reads. The preset writes these on
+ * the element; a column `backgroundColor` rewrite and a future widget-level
+ * token both land on the same names.
+ */
+const BUTTON_FILL_VARIABLE = `${BUTTON_CSS_VARIABLE_PREFIX}-fill`;
+const BUTTON_FILL_HOVER_VARIABLE = `${BUTTON_CSS_VARIABLE_PREFIX}-fill-hover`;
+const BUTTON_FILL_ACTIVE_VARIABLE = `${BUTTON_CSS_VARIABLE_PREFIX}-fill-active`;
+const BUTTON_INK_VARIABLE = `${BUTTON_CSS_VARIABLE_PREFIX}-ink`;
+const BUTTON_INK_HOVER_VARIABLE = `${BUTTON_CSS_VARIABLE_PREFIX}-ink-hover`;
+const BUTTON_BORDER_VARIABLE = `${BUTTON_CSS_VARIABLE_PREFIX}-border`;
+const BUTTON_RING_VARIABLE = `${BUTTON_CSS_VARIABLE_PREFIX}-ring`;
 const toneCssVariable = (tone, slot = '') => slot === ''
     ? `${BUTTON_CSS_VARIABLE_PREFIX}-${tone}`
     : `${BUTTON_CSS_VARIABLE_PREFIX}-${tone}-${slot}`;
@@ -1857,6 +1870,7 @@ const cssVarWithFallback = (variableName, fallback) => `var(${variableName}, ${f
 /** Shorthand for the common case: one tone slot with its palette default. */
 const toneColor = (tone, slot, fallback) => cssVarWithFallback(toneCssVariable(tone, slot), fallback);
 
+const asVars = (vars) => vars;
 /**
  * The rules that stop a native `<button>` looking like a native `<button>`.
  *
@@ -1884,9 +1898,7 @@ const structuralStyles = {
     fontFamily: 'inherit',
     fontWeight: 600,
     lineHeight: 1.25,
-    // Inert until something changes state. Kept because the host's own `:hover`
-    // rule — the only hover mechanism available to a widget today — then eases
-    // for free instead of snapping.
+    // Eases the library stylesheet's :hover / :active colour change.
     transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',
 };
 const sizeStyles = (preset) => {
@@ -1957,7 +1969,75 @@ const variantStyles = (preset) => {
     }
 };
 /**
- * The preset's contribution to the button's inline style.
+ * Per-instance colour slots the library stylesheet reads. Tone tokens stay
+ * in the `var(--rulecms-button-brand, fallback)` form so a host `:root`
+ * rebrand still wins.
+ */
+const variantCssVariables = (preset) => {
+    const palette = TONE_PALETTES[preset.tone];
+    const tone = preset.tone;
+    const ink = toneColor(tone, '', palette.base);
+    const inkHover = toneColor(tone, 'hover', palette.hover);
+    const contrast = toneColor(tone, 'contrast', palette.contrast);
+    switch (preset.variant) {
+        case 'solid':
+            return asVars({
+                [BUTTON_FILL_VARIABLE]: toneColor(tone, '', palette.base),
+                [BUTTON_FILL_HOVER_VARIABLE]: toneColor(tone, 'hover', palette.hover),
+                [BUTTON_FILL_ACTIVE_VARIABLE]: toneColor(tone, 'active', palette.active),
+                [BUTTON_INK_VARIABLE]: contrast,
+                [BUTTON_INK_HOVER_VARIABLE]: contrast,
+                [BUTTON_BORDER_VARIABLE]: toneColor(tone, '', palette.base),
+                [BUTTON_RING_VARIABLE]: ink,
+            });
+        case 'soft':
+            return asVars({
+                [BUTTON_FILL_VARIABLE]: toneColor(tone, 'soft', palette.soft),
+                [BUTTON_FILL_HOVER_VARIABLE]: toneColor(tone, 'soft-hover', palette.softHover),
+                [BUTTON_FILL_ACTIVE_VARIABLE]: `color-mix(in srgb, ${toneColor(tone, 'soft-hover', palette.softHover)} 88%, black)`,
+                [BUTTON_INK_VARIABLE]: toneColor(tone, 'soft-contrast', palette.softContrast),
+                [BUTTON_INK_HOVER_VARIABLE]: toneColor(tone, 'soft-contrast', palette.softContrast),
+                [BUTTON_BORDER_VARIABLE]: 'transparent',
+                [BUTTON_RING_VARIABLE]: ink,
+            });
+        case 'outline':
+            return asVars({
+                [BUTTON_FILL_VARIABLE]: 'transparent',
+                [BUTTON_FILL_HOVER_VARIABLE]: toneColor(tone, 'soft', palette.soft),
+                [BUTTON_FILL_ACTIVE_VARIABLE]: toneColor(tone, 'soft-hover', palette.softHover),
+                [BUTTON_INK_VARIABLE]: ink,
+                [BUTTON_INK_HOVER_VARIABLE]: inkHover,
+                [BUTTON_BORDER_VARIABLE]: toneColor(tone, 'border', palette.border),
+                [BUTTON_RING_VARIABLE]: ink,
+            });
+        case 'ghost':
+            return asVars({
+                [BUTTON_FILL_VARIABLE]: 'transparent',
+                [BUTTON_FILL_HOVER_VARIABLE]: toneColor(tone, 'soft', palette.soft),
+                [BUTTON_FILL_ACTIVE_VARIABLE]: toneColor(tone, 'soft-hover', palette.softHover),
+                [BUTTON_INK_VARIABLE]: ink,
+                [BUTTON_INK_HOVER_VARIABLE]: inkHover,
+                [BUTTON_BORDER_VARIABLE]: 'transparent',
+                [BUTTON_RING_VARIABLE]: ink,
+            });
+        case 'link':
+        default:
+            return asVars({
+                [BUTTON_FILL_VARIABLE]: 'transparent',
+                [BUTTON_FILL_HOVER_VARIABLE]: 'transparent',
+                [BUTTON_FILL_ACTIVE_VARIABLE]: 'transparent',
+                [BUTTON_INK_VARIABLE]: ink,
+                [BUTTON_INK_HOVER_VARIABLE]: inkHover,
+                [BUTTON_BORDER_VARIABLE]: 'transparent',
+                [BUTTON_RING_VARIABLE]: ink,
+            });
+    }
+};
+const COLOR_STYLE_KEYS = ['backgroundColor', 'color', 'borderColor'];
+/**
+ * The preset's contribution to the button's inline style, including resting
+ * colours as real CSS properties. The composer picker uses this so a swatch
+ * looks right without the library stylesheet.
  *
  * Callers spread column `styleProps` *after* this, which is what makes the
  * preset a set of defaults rather than a set of rules: anything the author
@@ -1968,6 +2048,41 @@ function buildButtonPresetStyles(preset) {
         ...structuralStyles,
         ...sizeStyles(preset),
         ...variantStyles(preset),
+        ...variantCssVariables(preset),
+    };
+}
+/**
+ * What `RButton` puts on the element. Same as the picker styles, minus the
+ * colour properties the library stylesheet owns — those stay on the element
+ * only as custom properties so `:hover` can change them.
+ */
+function buildButtonRenderStyles(preset) {
+    const styles = { ...buildButtonPresetStyles(preset) };
+    for (const key of COLOR_STYLE_KEYS) {
+        delete styles[key];
+    }
+    return styles;
+}
+/**
+ * Column styles still win on everything except `backgroundColor`, which is
+ * remapped onto the fill slots so hover/active follow the authored colour
+ * instead of the preset's blue-family hover.
+ */
+function applyButtonColumnStyles(styleProps) {
+    if (!styleProps) {
+        return {};
+    }
+    const { backgroundColor, ...rest } = styleProps;
+    if (backgroundColor === undefined || backgroundColor === '') {
+        return rest;
+    }
+    return {
+        ...rest,
+        ...asVars({
+            [BUTTON_FILL_VARIABLE]: backgroundColor,
+            [BUTTON_FILL_HOVER_VARIABLE]: `color-mix(in srgb, ${backgroundColor} 82%, black)`,
+            [BUTTON_FILL_ACTIVE_VARIABLE]: `color-mix(in srgb, ${backgroundColor} 70%, black)`,
+        }),
     };
 }
 /** Applied on top when the button is disabled, before column styles. */
@@ -2099,9 +2214,9 @@ class RButtonComponent {
     }
     get style() {
         return {
-            ...buildButtonPresetStyles(this.preset),
+            ...buildButtonRenderStyles(this.preset),
             ...(this.disabled ? disabledStyles : {}),
-            ...this.styleProps,
+            ...applyButtonColumnStyles(this.styleProps),
         };
     }
     get label() {
@@ -2129,7 +2244,16 @@ class RButtonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: RButtonComponent, isStandalone: true, selector: "rulecms-r-button", inputs: { componentAttributes: "componentAttributes", styleProps: "styleProps", className: "className", widgetInstanceProps: "widgetInstanceProps" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
     @if (link && disabled) {
-      <a [ngStyle]="style" [class]="className || undefined" role="link" aria-disabled="true" [attr.aria-label]="ariaLabel">
+      <a
+        data-rulecms-button
+        [attr.data-rulecms-button-variant]="preset.variant"
+        [attr.data-rulecms-button-tone]="preset.tone"
+        [ngStyle]="style"
+        [class]="className || undefined"
+        role="link"
+        aria-disabled="true"
+        [attr.aria-label]="ariaLabel"
+      >
         @if (iconNode && iconPosition !== 'trailing') {
           <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
         }
@@ -2140,6 +2264,9 @@ class RButtonComponent {
       </a>
     } @else if (link) {
       <a
+        data-rulecms-button
+        [attr.data-rulecms-button-variant]="preset.variant"
+        [attr.data-rulecms-button-tone]="preset.tone"
         [attr.href]="link.href"
         [attr.target]="link.target"
         [attr.rel]="link.rel"
@@ -2163,6 +2290,9 @@ class RButtonComponent {
     } @else {
       <button
         type="button"
+        data-rulecms-button
+        [attr.data-rulecms-button-variant]="preset.variant"
+        [attr.data-rulecms-button-tone]="preset.tone"
         [disabled]="disabled"
         [ngStyle]="style"
         [class]="className || undefined"
@@ -2188,7 +2318,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     imports: [NgStyle, SvgIconComponent],
                     template: `
     @if (link && disabled) {
-      <a [ngStyle]="style" [class]="className || undefined" role="link" aria-disabled="true" [attr.aria-label]="ariaLabel">
+      <a
+        data-rulecms-button
+        [attr.data-rulecms-button-variant]="preset.variant"
+        [attr.data-rulecms-button-tone]="preset.tone"
+        [ngStyle]="style"
+        [class]="className || undefined"
+        role="link"
+        aria-disabled="true"
+        [attr.aria-label]="ariaLabel"
+      >
         @if (iconNode && iconPosition !== 'trailing') {
           <rulecms-svg-icon [iconNode]="iconNode" width="1em" height="1em" [styleProps]="{ flexShrink: 0 }" />
         }
@@ -2199,6 +2338,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       </a>
     } @else if (link) {
       <a
+        data-rulecms-button
+        [attr.data-rulecms-button-variant]="preset.variant"
+        [attr.data-rulecms-button-tone]="preset.tone"
         [attr.href]="link.href"
         [attr.target]="link.target"
         [attr.rel]="link.rel"
@@ -2222,6 +2364,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
     } @else {
       <button
         type="button"
+        data-rulecms-button
+        [attr.data-rulecms-button-variant]="preset.variant"
+        [attr.data-rulecms-button-tone]="preset.tone"
         [disabled]="disabled"
         [ngStyle]="style"
         [class]="className || undefined"
@@ -2256,13 +2401,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.
@@ -2275,7 +2420,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: {
@@ -2299,7 +2444,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',
@@ -2338,13 +2483,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,
 };
 
 /**
@@ -2474,13 +2619,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
@@ -2490,7 +2635,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: {
@@ -2512,7 +2657,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',
@@ -2527,13 +2672,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,
 };
 
 /**
@@ -2971,7 +3116,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
@@ -2979,7 +3124,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.
@@ -2992,7 +3137,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: {},
@@ -3016,7 +3161,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',
@@ -3043,13 +3188,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,
 };
 
 /**
@@ -3250,16 +3395,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: {
@@ -3300,7 +3445,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',
@@ -3339,13 +3484,13 @@ const attributeEditModeConfigs$1 = [
     },
 ];
 
-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,
 };
 
 /**
@@ -3578,15 +3723,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: {
@@ -3631,7 +3776,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',
@@ -3664,16 +3809,280 @@ const attributeEditModeConfigs = [
     },
 ];
 
-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,
@@ -3782,6 +4191,11 @@ 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',
+    // 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',
@@ -3855,6 +4269,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 = [
@@ -3896,6 +4311,49 @@ const getPreviewComponents = () => {
     return cachedPreviewComponents;
 };
 
+/**
+ * SSR-safe rules for `r-button` pseudo-classes.
+ *
+ * widget-angular injects this once per library via `ComponentLibraryModule.stylesheet`.
+ * The sheet owns `background-color`, `color`, and `border-color` so `:hover`
+ * can win — those properties on an inline style beat any stylesheet rule.
+ * Resting values arrive as `--rulecms-button-fill` / `-ink` / `-border` on
+ * the element. A column background override rewrites the fill slots and
+ * derives hover/active with `color-mix`, so an arbitrary red does not keep
+ * the brand-blue hover.
+ *
+ * Outline is never cleared: the designed ring is a `box-shadow` on
+ * `:focus-visible`, on top of the browser's native focus outline.
+ */
+const BUTTON_LIBRARY_STYLESHEET = `
+[data-rulecms-button] {
+  background-color: var(--rulecms-button-fill);
+  color: var(--rulecms-button-ink);
+  border-color: var(--rulecms-button-border, var(--rulecms-button-fill));
+}
+[data-rulecms-button]:hover:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--rulecms-button-fill-hover);
+  color: var(--rulecms-button-ink-hover, var(--rulecms-button-ink));
+  border-color: var(--rulecms-button-fill-hover);
+}
+[data-rulecms-button]:active:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--rulecms-button-fill-active);
+  border-color: var(--rulecms-button-fill-active);
+}
+[data-rulecms-button][data-rulecms-button-variant="outline"]:hover:not(:disabled):not([aria-disabled="true"]),
+[data-rulecms-button][data-rulecms-button-variant="ghost"]:hover:not(:disabled):not([aria-disabled="true"]) {
+  border-color: var(--rulecms-button-border, var(--rulecms-button-ink));
+}
+[data-rulecms-button][data-rulecms-button-variant="link"]:hover:not(:disabled):not([aria-disabled="true"]),
+[data-rulecms-button][data-rulecms-button-variant="link"]:active:not(:disabled):not([aria-disabled="true"]) {
+  background-color: transparent;
+  border-color: transparent;
+}
+[data-rulecms-button]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rulecms-button-ring, var(--rulecms-button-ink)) 40%, transparent);
+}
+`.trim();
+
 /**
  * ComponentLibraryModule conformance (the @rulecms/widget-angular contract).
  *
@@ -3909,11 +4367,17 @@ const getPreviewComponents = () => {
  */
 const manifest = {
     id: 'default',
-    version: '0.1.0',
+    version: '0.2.0',
     angularPeerRange: '>=17.0.0',
 };
 /** The render surface: component type → renderable entry. */
 const components = getSourceComponentsPlugin().components;
+/**
+ * Optional `ComponentLibraryModule.stylesheet`. widget-angular injects this
+ * once per library as an SSR `<style>` tag. v1 is the button hover / focus /
+ * active rules; later interactive cards append here.
+ */
+const stylesheet = BUTTON_LIBRARY_STYLESHEET;
 /** The editor surface: palette + attribute metadata for the RuleCMS composer. */
 const editor = {
     previewComponents: getPreviewComponents(),
@@ -3975,5 +4439,5 @@ function serializeInlineMarkers(runs) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_HEADING_LEVELS, BLOCK_ENCLOSING_TAGS, BUTTON_CLICK_HANDLER_PROP, BUTTON_CSS_VARIABLE_PREFIX, 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, buildButtonPresetStyles, 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, 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, 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 };
 //# sourceMappingURL=rulecms-source-components-angular.mjs.map