@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/shared/content-settings/components/text-style-field/TextStyleField.mixin.ts

@@ -15,12 +15,20 @@ import {
 import type { StyleTextFontFamilyOption } from '../../../style-settings/models';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
+import { useUiContentSettingsStore } from '../../store';
 import type {
+  CanonicalTextStyleType,
   LogoTheme,
   TextStyleDeclaration,
   TextStyleType,
 } from '@brand-page';
-import { resolveTextColor } from '@brand-page/utils/text-style.util';
+import {
+  resolveTextStyle,
+  TEXT_STYLE_CASCADE_PROPS,
+  normalizeTextStyleAgainstRole,
+  omitTypography,
+} from '@brand-page/utils/text-style.util';
+import { composeTextDecoration } from '@shared/text-role-typography.util';
 import {
   FONT_FAMILY_CONFIGS,
   MIN_TEXT_SIZE_PX,
@@ -29,12 +37,16 @@ import {
   MAX_LETTER_SPACING_PERCENT,
   MIN_LINE_HEIGHT,
   MAX_LINE_HEIGHT,
-  TEXT_STYLE_TYPES,
+  CANONICAL_TEXT_STYLE_TYPES,
   TEXT_STYLE_TYPES_DISPLAY_NAME_MAP,
 } from '@brand-page';
 
 const TEXT_SIZE_CHANGE_DEBOUNCE_WAIT_IN_MS = 5;
 
+// BP-5969: cap the collapsed-card live preview so large roles (e.g. H1) fit the
+// header row. The subtitle still reports the real edited size uncapped.
+const TEXT_STYLE_PREVIEW_MAX_SIZE_PX = 28;
+
 export default defineComponent({
   props: {
     id: {
@@ -107,6 +119,23 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    // BP-5969: opt in to rendering the collapsed-card header in the role's own
+    // live typography (name at its font/size/weight + a `Family • Sizepx`
+    // subtitle). Only the global Style tab enables this; block-level fields
+    // (nav/footer/content) keep the plain bold label.
+    showTypographyPreview: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    // BP-5969 (ADR-0020): a role defines typography only — colour is contrast-derived per
+    // surface, not a role property. The role editor (global Style tab) hides the colour picker;
+    // element-level fields keep it (an element may still carry an explicit colour override).
+    showColor: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     // Container-aware default colour from the parent field wrapper: text on a filled
     // block must contrast that fill, so the swatch shows the same colour the renderer
     // paints. Both sides derive it from one helper (`container-text-color.util.ts`).
@@ -118,6 +147,7 @@ export default defineComponent({
   },
   setup() {
     const styleSettingsStore = useUiStyleSettingsStore();
+    const contentSettingsStore = useUiContentSettingsStore();
 
     const textStyleTypeDropdownRef = `text-style-dropdown-${uuidV4()}`;
 
@@ -129,6 +159,7 @@ export default defineComponent({
         () => styleSettingsStore.textStyles.textStyleOptions,
       ),
       styleSettingsStore,
+      contentSettingsStore,
       textStyleTypeDropdownRef,
       [textStyleTypeDropdownRef]: ref(null),
     };
@@ -137,26 +168,24 @@ export default defineComponent({
   data: () => {
     return {
       isCollapsed: true,
+      // BP-5969: the "style modified" popup next to the role dropdown (apply/reset overrides).
+      isStyleModifiedPopupOpen: false,
       MIN_TEXT_SIZE_PX,
       MAX_TEXT_SIZE_PX,
       MIN_LETTER_SPACING_PERCENT,
       MAX_LETTER_SPACING_PERCENT,
       MIN_LINE_HEIGHT,
       MAX_LINE_HEIGHT,
-      textStyleTypeOptions: [
-        {
-          value: undefined,
-          label: TEXT_STYLE_TYPES_DISPLAY_NAME_MAP().none,
-          isSelected: false,
-        },
-        ...Object.keys(TEXT_STYLE_TYPES).map((key) => ({
-          value: key,
-          label:
-            TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key][0].toUpperCase() +
-            TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key].slice(1),
-          isSelected: false,
-        })),
-      ] as ButtonGroupOption[],
+      // BP-5969 (ADR-0019): every text block is always linked to exactly one canonical
+      // role — there is no "none"/detached option. Legacy roles stay resolvable for
+      // un-migrated content but are never pickable (migration-22 reconnects them).
+      textStyleTypeOptions: CANONICAL_TEXT_STYLE_TYPES.map((key) => ({
+        value: key,
+        label:
+          TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key][0].toUpperCase() +
+          TEXT_STYLE_TYPES_DISPLAY_NAME_MAP()[key].slice(1),
+        isSelected: false,
+      })) as ButtonGroupOption[],
       debounceOnTextSizeChange: undefined as
         | ((textSize: string) => void)
         | undefined,
@@ -210,24 +239,28 @@ export default defineComponent({
         return theValue;
       }
 
-      return Object.assign({}, selectedTextStyleOption.style, {
-        applyAutoScale: theValue.applyAutoScale,
-        textAlign:
-          selectedTextStyleOption.style.textAlign || theValue.textAlign,
-        // `color` must follow the RENDERER's cascade (element first, then the global
-        // style) or the panel shows one colour while the canvas paints another. It
-        // also protects the handlers below, which all spread `selectedTextStyle`:
-        // without it, editing e.g. font size replaces the element's colour with the
-        // global one. Shared with the renderer via `resolveTextColor` — don't restate
-        // the chain here, a second copy is how the two drifted apart. The
-        // container-aware default is the resolver's middle rung (below the element
-        // colour, above the global style), fed from the same helper the renderer uses.
-        color: resolveTextColor(
+      // Typography must follow the RENDERER's per-property cascade (ADR-0019): each prop
+      // resolves element-first over the role, so the panel shows the same size/family/weight
+      // the canvas paints — a per-block override stays visible in the sliders instead of
+      // snapping back to the role. `resolveTextStyle` is the shared resolver (colour included,
+      // element-first via `resolveTextColor` with the container-aware middle rung); mirroring it
+      // here is what keeps the panel and canvas from drifting, and it protects the handlers below
+      // that spread `selectedTextStyle`. The role style is spread first to keep its non-cascade
+      // props (e.g. backgroundColor); alignment stays role-first and applyAutoScale is re-layered.
+      return Object.assign(
+        {},
+        selectedTextStyleOption.style,
+        resolveTextStyle(
           theValue,
           selectedTextStyleOption.style,
           this.containerDefaultColor,
         ),
-      });
+        {
+          applyAutoScale: theValue.applyAutoScale,
+          textAlign:
+            selectedTextStyleOption.style.textAlign || theValue.textAlign,
+        },
+      );
     },
     textCSSStyleOptions(): ButtonGroupOption[] {
       if (!this.selectedTextStyle.textStyleType) {
@@ -317,40 +350,103 @@ export default defineComponent({
         this.debounceOnLineHeightChange(val);
       },
     },
-    textStyleTypeDropdownTitle() {
-      const selectedTextStyleTypeOption = this.textStyleTypeOptions.find(
-        (x) => x.isSelected,
-      );
+    // The plain role name: the dropdown title (its asterisk is the dropdown's own) and the
+    // "Apply changes to all '<role>'" popup label.
+    selectedRoleLabel(): string {
+      const selected = this.textStyleTypeOptions.find((x) => x.isSelected);
 
-      if (selectedTextStyleTypeOption) {
-        return (selectedTextStyleTypeOption as any).label;
-      }
+      return (selected as ButtonGroupOption | undefined)?.label ?? '';
+    },
+    selectedRoleType(): CanonicalTextStyleType | undefined {
+      return this.textStyleTypeOptions.find((x) => x.isSelected)?.value as
+        | CanonicalTextStyleType
+        | undefined;
+    },
+    // A block has a typography override when it carries any cascade prop of its own. The
+    // store normalizes role-equal props away on write, so a present prop is a real override.
+    hasTypographyOverride(): boolean {
+      if (!this.showTextStyleTypeOptions) return false;
 
-      return TEXT_STYLE_TYPES_DISPLAY_NAME_MAP().none;
+      const value = this.value as unknown as TextStyleDeclaration;
+
+      if (!value?.textStyleType) return false;
+
+      return TEXT_STYLE_CASCADE_PROPS.some(
+        (prop) => (value as Record<string, unknown>)[prop] != null,
+      );
+    },
+    // BP-5969: the collapsed card header renders the role name in its OWN
+    // typography. We derive the inline style from the same resolved style the
+    // controls edit (`selectedTextStyle`), so the preview repaints live as the
+    // sliders/pickers move. Size is capped so a large role (e.g. H1 at 60px)
+    // still fits the header row rather than overflowing the card.
+    //
+    // Family/weight/style/decoration are applied so the preview shows the role's
+    // font AND its B/I/U/S styling. The family is quoted (multi-word names like
+    // "PT Serif" must be a single CSS token) and given a generic fallback.
+    textStylePreviewStyle(): Record<string, string> {
+      const style = this.selectedTextStyle as TextStyleDeclaration;
+      const sizePx = Math.min(
+        Number(textSizeValueConvertor.convert(style)) ||
+          TEXT_STYLE_PREVIEW_MAX_SIZE_PX,
+        TEXT_STYLE_PREVIEW_MAX_SIZE_PX,
+      );
+      // Strip any quotes the value already carries, then re-quote once.
+      const family = (style.fontFamily || '').replace(/^['"]|['"]$/g, '');
+
+      return {
+        fontFamily: family ? `"${family}", sans-serif` : 'inherit',
+        fontSize: `${sizePx}px`,
+        fontWeight: style.fontWeight || 'normal',
+        fontStyle: style.fontStyle || 'normal',
+        letterSpacing: style.letterSpacing || 'normal',
+        // lineHeight is intentionally omitted: the preview is a single truncated
+        // line, so the role's line-height only adds vertical padding that
+        // misaligns the header row. Let it inherit the panel's default instead.
+        textDecoration: style.textDecoration || 'none',
+      };
+    },
+    // BP-5969: the `Family • Sizepx` line shown under the role name when
+    // collapsed. Size is the true edited size (uncapped, unlike the preview).
+    textStylePreviewSubtitle(): string {
+      const style = this.selectedTextStyle as TextStyleDeclaration;
+      const family = style.fontFamily || '';
+      const sizePx = textSizeValueConvertor.convert(style);
+      const parts = [family, sizePx ? `${sizePx}px` : ''].filter(Boolean);
+
+      return parts.join(' • ');
     },
   },
   methods: {
     emitChange(style: BrandPageCssStyle, textStyleType?: TextStyleType) {
+      // BP-5969 (ADR-0020): linking a role is a TYPOGRAPHY action and no longer touches
+      // colour — a role carries none, and colour is a separate axis, so switching roles
+      // keeps the element's own colour + background (a full clean slate is the explicit
+      // "reset to global" action). A whole-box edit likewise keeps the current link (it no
+      // longer detaches).
       if (!this.showTextStyleTypeOptions) {
         textStyleType = undefined;
+      } else if (textStyleType === undefined) {
+        textStyleType = (this.value as unknown as TextStyleDeclaration)
+          ?.textStyleType;
       }
 
       const { backgroundColor, ...filteredStyle } = style;
 
-      const value: TextStyleDeclaration = {
-        ...(backgroundColor === undefined ? filteredStyle : style),
-        textAlign: style.textAlign!, //text align should never be empty (setting a textalign here causes text alignment changes when changing global text styles)
-        textStyleType,
-      };
-
-      // Linking to a global style drops the element's own colour override: the
-      // renderer resolves colour element-first (see resolveTextColor), so a colour
-      // parked before the link would keep winning. Colours are the only element-first
-      // properties, so nothing else needs clearing.
-      if (textStyleType) {
-        value.color = undefined;
-        value.backgroundColor = undefined;
-      }
+      // Normalise here, not only downstream: content-settings-store does this for its own
+      // fields, but nav, header-button and footer text write straight to their own stores,
+      // which keep what they're given without checking it against the role. Without this, one
+      // B/I/U/S click bakes fontStyle/textDecoration in as a permanent override
+      // (`text-css-style-options.convertor` always writes all four props), and a later role
+      // edit can never repaint it back.
+      const value: TextStyleDeclaration = normalizeTextStyleAgainstRole(
+        {
+          ...(backgroundColor === undefined ? filteredStyle : style),
+          textAlign: style.textAlign!, //text align should never be empty (setting a textalign here causes text alignment changes when changing global text styles)
+          textStyleType,
+        },
+        this.textStyleOptions,
+      );
 
       this.$emit('update:modelValue', { id: this.id, name: this.name, value });
 
@@ -363,9 +459,21 @@ export default defineComponent({
     toggleCollapsed() {
       this.isCollapsed = !this.isCollapsed;
     },
+    // BP-5969: a whole-box edit layers a SPARSE override on the element's own style (not
+    // the resolved role), so the role's colour/typography is never baked in as an
+    // override. Store normalization then drops any prop equal to the role. For an unlinked
+    // field (e.g. the role-definition editor, `showTextStyleTypeOptions` false) there is no
+    // role class, so the full resolved style is the base.
+    overrideBaseStyle(): TextStyleDeclaration {
+      const value = this.value as unknown as TextStyleDeclaration;
+
+      return this.showTextStyleTypeOptions && value?.textStyleType
+        ? { ...value }
+        : (this.selectedTextStyle as TextStyleDeclaration);
+    },
     onSelectFont(font: StyleTextFontFamilyOption) {
       const newValue = {
-        ...this.selectedTextStyle,
+        ...this.overrideBaseStyle(),
         fontFamily: FONT_FAMILY_CONFIGS[font.key].name,
       };
 
@@ -379,7 +487,7 @@ export default defineComponent({
       }));
 
       const newValue: TextStyleDeclaration = {
-        ...this.selectedTextStyle,
+        ...this.overrideBaseStyle(),
         ...textCSSStyleOptionsConvertor.convertBack({ options }),
       };
 
@@ -401,14 +509,17 @@ export default defineComponent({
         option.isSelected = option.value === e.value;
       });
 
+      // Picking a role gives that role's look, as the RTE picker does: overrides kept from the
+      // previous role would otherwise win the per-property cascade. Colour is not typography,
+      // so it stays (global-text-style.md).
       this.emitChange(
-        this.value as unknown as TextStyleDeclaration,
+        omitTypography(this.value as unknown as TextStyleDeclaration),
         e.value as TextStyleType,
       );
     },
     onSelectAlignment(e) {
       const newValue: TextStyleDeclaration = {
-        ...this.selectedTextStyle,
+        ...this.overrideBaseStyle(),
         ...textAlignmentOptionsConvertor.convertBack({
           options: [{ ...e, isSelected: true }],
         }),
@@ -421,18 +532,14 @@ export default defineComponent({
 
       // A colour edit on a linked element keeps the link and layers a sticky colour
       // override rather than detaching. The renderer resolves colour element-first
-      // (resolveTextColor), so it wins over the style's colour while typography stays
-      // synced to the style. Written as a clean linked style (type, alignment,
-      // auto-scale, colour) with no baked-in typography; re-selecting the style from
-      // the dropdown resets it back to the style's colour.
+      // (resolveTextColor), so it wins over the role's colour while typography stays
+      // driven by the role class. Preserve the element's existing (typography) overrides.
       if (this.showTextStyleTypeOptions && current.textStyleType) {
         this.$emit('update:modelValue', {
           id: this.id,
           name: this.name,
           value: {
-            textStyleType: current.textStyleType,
-            textAlign: current.textAlign,
-            applyAutoScale: current.applyAutoScale,
+            ...current,
             ...colorConvertor.convertBack(color.value),
           } as TextStyleDeclaration,
         });
@@ -447,7 +554,7 @@ export default defineComponent({
     },
     onSelectBackgroundColor(color) {
       const newValue: TextStyleDeclaration = {
-        ...this.selectedTextStyle,
+        ...this.overrideBaseStyle(),
         ...backgroundColorConvertor.convertBack(color.value),
       };
 
@@ -455,7 +562,7 @@ export default defineComponent({
     },
     onTextSizeChange(textSize: string) {
       const newValue = {
-        ...this.selectedTextStyle,
+        ...this.overrideBaseStyle(),
         ...textSizeValueConvertor.convertBack(textSize),
       };
 
@@ -463,7 +570,7 @@ export default defineComponent({
     },
     onLetterSpacingChange(spacing: string) {
       const newValue = {
-        ...this.selectedTextStyle,
+        ...this.overrideBaseStyle(),
         ...letterSpacingValueConvertor.convertBack(spacing),
       };
 
@@ -471,12 +578,85 @@ export default defineComponent({
     },
     onLineHeightChange(lineHeight: string) {
       const newValue = {
-        ...this.selectedTextStyle,
+        ...this.overrideBaseStyle(),
         ...lineHeightValueConvertor.convertBack(lineHeight),
       };
 
       this.emitChange(newValue);
     },
+    // Clear the typography overrides so the block follows its role. Colour and background stay:
+    // a role carries no colour to fall back to (ADR 0020).
+    resetToGlobal() {
+      this.$emit('update:modelValue', {
+        id: this.id,
+        name: this.name,
+        value: omitTypography(
+          this.value as unknown as TextStyleDeclaration,
+        ) as TextStyleDeclaration,
+      });
+    },
+    // BP-5969 (A5): promote this block's typography overrides into the role definition, so
+    // every block linked to the role adopts them. Then reset this block to fully-linked and
+    // re-normalize its siblings (their now-role-equal overrides drop away).
+    saveToGlobal() {
+      const value = this.value as unknown as TextStyleDeclaration;
+      const type = value.textStyleType;
+
+      if (!type) return;
+
+      const role = this.textStyleOptions[type]?.style;
+
+      if (!role) return;
+
+      const overrides: Record<string, unknown> = {};
+
+      TEXT_STYLE_CASCADE_PROPS.forEach((prop) => {
+        const propValue = (value as Record<string, unknown>)[prop];
+
+        if (propValue != null) {
+          overrides[prop] =
+            prop === 'textDecoration'
+              ? composeTextDecoration(role.textDecoration, propValue as string)
+              : propValue;
+        }
+      });
+
+      const previousRole = { ...role } as unknown as Record<string, unknown>;
+
+      this.styleSettingsStore.setTextStyleOption({
+        type,
+        style: { ...role, ...overrides } as TextStyleDeclaration,
+      });
+
+      this.resetToGlobal();
+      this.contentSettingsStore.renormalizeTextStylesForRole(
+        type,
+        previousRole,
+      );
+    },
+    // The role dropdown pairs with a "style modified" toggle that opens this popup
+    // (apply to all / reset to default), mirroring the RTE toolbar affordance.
+    toggleStyleModifiedPopup() {
+      this.isStyleModifiedPopupOpen = !this.isStyleModifiedPopupOpen;
+    },
+    onClickOutsideStyleModified(event: Event) {
+      // v-click-outside also fires on window blur (its iframe detection), where the
+      // target is `window` and has no `closest` — treat a non-element target as outside.
+      const { target } = event;
+      const outside =
+        !(target instanceof Element) ||
+        !target.closest('.text-style-field__modified-popup');
+
+      if (outside) this.isStyleModifiedPopupOpen = false;
+    },
+    onApplyStyleToRole() {
+      this.saveToGlobal();
+      this.isStyleModifiedPopupOpen = false;
+    },
+    onResetStyleToRole() {
+      this.resetToGlobal();
+      this.isStyleModifiedPopupOpen = false;
+    },
     generateFontFamilySelectorKey() {
       return `fontFamilySelector-${this.id}-${Date.now()}`;
     },
@@ -486,9 +666,7 @@ export default defineComponent({
       const value = this.value as unknown as TextStyleDeclaration;
 
       this.textStyleTypeOptions.forEach((option) => {
-        // Do NOT simplify to `option.value === value?.textStyleType`: the "none"
-        // option's value is `undefined`, so that form would SELECT it whenever no
-        // style is set, but the convention (see emitChange) is all-flags-false.
+        // A value with no role selects nothing (see emitChange): every option stays unselected.
         option.isSelected =
           Boolean(value?.textStyleType) && option.value === value.textStyleType;
       });

package/src/shared/content-settings/components/text-style-field/TextStyleField.vue

@@ -12,10 +12,26 @@
   >
     <a
       v-if="!isTextContent"
-      class="tw-flex tw-gap-2 tw-cursor-pointer tw-justify-between"
+      data-test-text-style-field-toggle
+      class="tw-flex tw-gap-2 tw-cursor-pointer tw-justify-between tw-items-center"
       @click="toggleCollapsed()"
     >
+      <!-- BP-5969: the global Style tab renders the role name in its OWN
+           typography with a `Family • Sizepx` subtitle so each card previews the
+           role live. Other consumers keep the plain bold label. -->
+      <div v-if="showTypographyPreview" class="tw-min-w-0">
+        <div
+          class="tw-text-secondary-800 tw-truncate"
+          :style="textStylePreviewStyle"
+        >
+          {{ label }}
+        </div>
+        <div class="tw-text-grayscale-600 tw-text-xs tw-mt-1 tw-truncate">
+          {{ textStylePreviewSubtitle }}
+        </div>
+      </div>
       <div
+        v-else
         class="tw-font-bold tw-text-secondary-800"
         :class="{
           'tw-text-sm': titleTextSize === 'sm',
@@ -40,24 +56,74 @@
       >
         {{ textStyleFieldTr(`textStyle`) }}
       </p>
-      <Dropdown
+      <!-- The role selector pairs with the "style modified" toggle on one row: the
+           toggle only appears when this block overrides its role typography, and opens
+           the apply/reset popup — mirroring the RTE toolbar's affordance. -->
+      <div
         v-if="showTextStyleTypeOptions"
-        :ref="textStyleTypeDropdownRef"
-        class="tw-mb-4 tw-z-10"
-        :title="textStyleTypeDropdownTitle"
-        element-classes="!tw-rounded-lg !tw-h-auto !tw-py-3 tw-text-secondary-500"
-        menu-element-classes="tw-left-0"
-        icon-size="xs"
-        :force-down-position="true"
+        class="tw-flex tw-gap-2 tw-items-stretch tw-mb-4"
       >
-        <DropdownItem
-          v-for="option in textStyleTypeOptions"
-          :key="option.value"
-          @click="onSelectTextStyleType(option)"
+        <TextStyleRoleDropdown
+          :ref="textStyleTypeDropdownRef"
+          class="tw-flex-1 tw-min-w-0 tw-z-10"
+          data-test-text-style-type-dropdown
+          element-classes="!tw-rounded-lg !tw-h-auto !tw-py-3 tw-text-secondary-500"
+          menu-element-classes="tw-left-0"
+          :selected="selectedRoleType"
+          :has-override="hasTypographyOverride"
+          @select="onSelectTextStyleType({ value: $event })"
+        />
+        <!-- BP-5969: shown only when this block overrides its role's typography.
+             `v-click-outside` closes the popup; the directive is imported locally (it
+             is not registered globally). // extract if a third consumer appears -->
+        <div
+          v-if="hasTypographyOverride"
+          v-click-outside="onClickOutsideStyleModified"
+          class="text-style-field__modified-anchor"
         >
-          <span>{{ option.label }}</span>
-        </DropdownItem>
-      </Dropdown>
+          <Button
+            class="text-style-field__modified-toggle"
+            :class="{
+              'text-style-field__modified-toggle--active':
+                isStyleModifiedPopupOpen,
+            }"
+            data-test-style-modified-toggle
+            icon="roller-brush"
+            icon-size="sm"
+            justify="center"
+            @click="toggleStyleModifiedPopup()"
+          />
+          <div
+            v-if="isStyleModifiedPopupOpen"
+            class="text-style-field__modified-popup"
+            data-test-style-modified-popup
+          >
+            <p class="tw-text-xs tw-text-grayscale-600 tw-mb-1">
+              {{ textStyleFieldTr(`styleModifiedHeader`) }}
+            </p>
+            <a
+              class="tw-flex tw-items-center tw-gap-2 tw-cursor-pointer tw-text-sm tw-text-grayscale-700 tw-py-1"
+              data-test-save-to-global
+              @click="onApplyStyleToRole()"
+            >
+              <Icon name="refresh" size="sm" />
+              <span>{{
+                textStyleFieldTr(`applyChangesToAll`, {
+                  role: selectedRoleLabel,
+                })
+              }}</span>
+            </a>
+            <a
+              class="tw-flex tw-items-center tw-gap-2 tw-cursor-pointer tw-text-sm tw-text-grayscale-700 tw-py-1"
+              data-test-reset-to-global
+              @click="onResetStyleToRole()"
+            >
+              <Icon name="undo" size="sm" />
+              <span>{{ textStyleFieldTr(`resetToDefault`) }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
       <p
         class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-2"
       >
@@ -127,6 +193,7 @@
            right-aligned). `linked-style-type` + `inherited-color` let the readout report the
            "Inherits · <Style>" state that most linked text fields sit in. -->
       <ColorField
+        v-if="showColor"
         :id="`${id}-color`"
         :name="name"
         :label="textStyleFieldTr(`color`)"
@@ -157,25 +224,26 @@
 <script>
 import FontPicker from '@shared/font-family-selector/FontPicker.vue';
 import TextStyleFieldMixin from './TextStyleField.mixin.ts';
-import {
-  ButtonGroup,
-  Icon,
-  Slider,
-  Dropdown,
-  DropdownItem,
-} from '@designcrowd/fe-shared-lib';
+import { Button, ButtonGroup, Icon, Slider } from '@designcrowd/fe-shared-lib';
 import ColorField from '../color-field/ColorField.vue';
+import TextStyleRoleDropdown from '../text-style-role-dropdown/TextStyleRoleDropdown.vue';
 import { textStyleFieldTr } from '@src/composables/useTranslate';
+// v-click-outside resolves to this local binding — the directive is NOT registered
+// globally, so every component that uses it must import it (see RichTextEditor.vue).
+import { directive as vClickOutside } from 'click-outside-vue3';
 
 export default {
   components: {
-    Dropdown,
-    DropdownItem,
+    Button,
     FontPicker,
     ButtonGroup,
     ColorField,
     Icon,
     Slider,
+    TextStyleRoleDropdown,
+  },
+  directives: {
+    clickOutside: vClickOutside,
   },
   mixins: [TextStyleFieldMixin],
   setup(props, context) {
@@ -186,3 +254,23 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+/* The toggle's own positioning context so the popup hangs relative to it. */
+.text-style-field__modified-anchor {
+  @apply tw-relative tw-flex tw-shrink-0;
+}
+.text-style-field__modified-toggle {
+  @apply tw-flex tw-h-full tw-w-11 tw-items-center tw-justify-center tw-rounded-lg tw-border tw-border-solid tw-border-grayscale-400 tw-bg-white tw-text-secondary-500 tw-cursor-pointer;
+}
+.text-style-field__modified-toggle--active {
+  @apply tw-bg-grayscale-200;
+}
+/* Hangs just below the toggle, aligned to the panel's right edge. */
+.text-style-field__modified-popup {
+  @apply tw-absolute tw-right-0 tw-z-20 tw-flex tw-flex-col tw-gap-1 tw-rounded-lg tw-border tw-border-solid tw-border-grayscale-400 tw-bg-white tw-p-4;
+  top: calc(100% + 6px);
+  width: 260px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+</style>