@rulecms/source-components-angular 0.1.0 → 0.2.0

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

@@ -1846,6 +1846,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 +1869,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 +1897,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 +1968,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 +2047,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 +2213,9 @@ class RButtonComponent {
     }
     get style() {
         return {
-            ...buildButtonPresetStyles(this.preset),
+            ...buildButtonRenderStyles(this.preset),
             ...(this.disabled ? disabledStyles : {}),
-            ...this.styleProps,
+            ...applyButtonColumnStyles(this.styleProps),
         };
     }
     get label() {
@@ -2129,7 +2243,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 +2263,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 +2289,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 +2317,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 +2337,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 +2363,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"
@@ -3896,6 +4040,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 +4096,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 +4168,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, 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 };
 //# sourceMappingURL=rulecms-source-components-angular.mjs.map