feat: style enterprise feature terms and activate their tooltips

preview-src/enterprise-macro-test.adoc

@@ -0,0 +1,129 @@
+= Enterprise Macro Test
+:page-layout: default
+
+Test page for the `enterprise` inline macro from docs-extensions-and-macros (DOC-887). The markup below replicates the macro's exact rendered output so the `enterprise-feature` class can be styled in this UI bundle. Every output shape the macro can emit appears here, plus stress contexts for the lock glyph and underline. The first two sections use the link targets the macro really resolves to: the licensing page for `Topic Deletion Control`, which has no feature page in the registry, and the feature page for `Tiered Storage`, which has one. Later sections vary only the tooltip, role, or link handling, so their targets are placeholders.
+
+== Default output
+
+The macro `enterprise:Topic Deletion Control[]` with a registry entry that carries no `xref` renders, linking to the licensing page:
+
+++++
+<p>This cluster uses <span class="enterprise-feature" title="Topic Deletion Control requires an Enterprise Edition license."><a href="https://docs.redpanda.com/streaming/current/get-started/licensing/overview/" class="xref page">Topic Deletion Control</a></span> to block accidental topic deletes.</p>
+++++
+
+== With a feature xref
+
+The macro `enterprise:Tiered Storage[]` with a registry entry that carries an `xref` (or a per-use `xref=` attribute) renders the same shape, linking to the feature page:
+
+++++
+<p>Enable <span class="enterprise-feature" title="Tiered Storage requires an Enterprise Edition license."><a href="https://docs.redpanda.com/streaming/current/manage/tiered-storage/" class="xref page">Tiered Storage</a></span> to offload data to object storage.</p>
+++++
+
+== Display text override
+
+`enterprise:Audit Logging[text=audit logging]` keeps the canonical feature name in the tooltip while the sentence reads naturally:
+
+++++
+<p>Enable <span class="enterprise-feature" title="Audit Logging requires an Enterprise Edition license."><a href="#" class="xref page">audit logging</a></span> before compliance review.</p>
+++++
+
+== Tooltip override
+
+`enterprise:Iceberg Topics[tooltip=...]` replaces the generated tooltip sentence:
+
+++++
+<p>Set up <span class="enterprise-feature" title="Iceberg Topics requires an Enterprise Edition license and object storage."><a href="#" class="xref page">Iceberg Topics</a></span> for your lakehouse.</p>
+++++
+
+== Without a link
+
+With the `enterprise-links` attribute set to `false`:
+
+++++
+<p>Configure <span class="enterprise-feature" title="Audit Logging requires an Enterprise Edition license.">Audit Logging</span> on a SASL listener.</p>
+++++
+
+== Without a tooltip
+
+With `enterprise-tooltip` set to `false`, the span carries no tooltip attribute at all (underline and lock must still render):
+
+++++
+<p>Use <span class="enterprise-feature"><a href="#" class="xref page">Leader Pinning</a></span> to keep leaders in one zone.</p>
+++++
+
+== Data-attribute tooltip variant
+
+With `enterprise-tooltip` set to `true`, the tooltip renders as `data-enterprise-tooltip` for UI-driven tooltips instead of the native `title` (activated as a tippy tooltip by `12-activate-tooltips.js`):
+
+++++
+<p>Set up <span class="enterprise-feature" data-enterprise-tooltip="Iceberg Topics requires an Enterprise Edition license."><a href="#" class="xref page">Iceberg Topics</a></span> for your lakehouse.</p>
+++++
+
+== Custom role
+
+With `enterprise-feature-role` set to something other than `enterprise-feature`, the UI applies no styling. This one should look like a plain link, with no underline or lock:
+
+++++
+<p>A custom role renders <span class="my-custom-role" title="Shadowing requires an Enterprise Edition license."><a href="#" class="xref page">Shadowing</a></span> unstyled.</p>
+++++
+
+== Stress contexts
+
+Multiple terms in one paragraph, with punctuation directly after the term:
+
+++++
+<p>Both <span class="enterprise-feature" title="Tiered Storage requires an Enterprise Edition license."><a href="#" class="xref page">Tiered Storage</a></span>, <span class="enterprise-feature" title="Remote Read Replicas requires an Enterprise Edition license."><a href="#" class="xref page">Remote Read Replicas</a></span>, and <span class="enterprise-feature" title="Whole Cluster Restore (WCR) requires an Enterprise Edition license."><a href="#" class="xref page">Whole Cluster Restore (WCR)</a></span> share one license gate.</p>
+++++
+
+A long feature name that wraps across lines (the lock glyph must sit after the last word, not float alone):
+
+++++
+<p style="max-width: 14em;">Narrow container: <span class="enterprise-feature" title="Continuous Intra-Broker Partition Balancing requires an Enterprise Edition license."><a href="#" class="xref page">Continuous Intra-Broker Partition Balancing</a></span> wraps here.</p>
+++++
+
+In a list:
+
+++++
+<ul>
+<li>Plain list item for comparison</li>
+<li><span class="enterprise-feature" title="Audit Logging requires an Enterprise Edition license."><a href="#" class="xref page">Audit Logging</a></span> in a list item</li>
+</ul>
+++++
+
+In a table cell:
+
+++++
+<table class="tableblock frame-all grid-all stretch">
+<tbody>
+<tr>
+<td class="tableblock"><p class="tableblock"><span class="enterprise-feature" title="Tiered Storage requires an Enterprise Edition license."><a href="#" class="xref page">Tiered Storage</a></span></p></td>
+<td class="tableblock"><p class="tableblock">Feature description in the next cell</p></td>
+</tr>
+</tbody>
+</table>
+++++
+
+In an admonition:
+
+[NOTE]
+====
+This note mentions an enterprise feature: pass:[<span class="enterprise-feature" title="Shadowing requires an Enterprise Edition license."><a href="#" class="xref page">Shadowing</a></span>] inside admonition content.
+====
+
+== Enterprise properties share the lock
+
+Enterprise-only configuration properties get the same lock glyph through `code.is-enterprise-property` (added by `19-property-tooltips.js`):
+
+++++
+<p>The property <code class="is-enterprise-property">cloud_storage_enabled</code> requires an Enterprise license, while <code>log_segment_size</code> does not.</p>
+++++
+
+== Styling notes
+
+The implemented treatment for `.enterprise-feature`:
+
+* A dotted underline in `--link-highlight-color`, matching the glossary term affordance, applied to the inner link or to the span when links are disabled.
+* A small lock glyph (0.9em) after the term, rendered as an SVG mask filled with `--link-highlight-color`. The mask variable lives in the global `:root` design tokens so dark mode adapts automatically.
+* `code.is-enterprise-property` reuses the same mask variable, so feature terms and enterprise properties carry an identical lock.
+* The `data-enterprise-tooltip` variant is activated as a tippy tooltip by `12-activate-tooltips.js`, mirroring the site's other tooltips. The default `title` variant keeps the native browser tooltip.
+* The generated `enterprise_features::` tables need no UI styling: they render as ordinary AsciiDoc tables whose feature cells contain the same linked spans shown above.

src/css/property-tooltips.css

@@ -94,6 +94,18 @@ code.has-property-tooltip:focus-visible {
   border: 1px solid #c3e6cb;
 }
 
+.property-doc-tooltip .prop-badge-enterprise::before {
+  content: "";
+  display: inline-block;
+  width: 0.9em;
+  height: 0.9em;
+  margin-right: 0.25em;
+  vertical-align: -0.05em;
+  background-color: currentColor;
+  -webkit-mask: var(--enterprise-lock-icon) no-repeat center / contain;
+  mask: var(--enterprise-lock-icon) no-repeat center / contain;
+}
+
 /* Deprecated badge */
 .property-doc-tooltip .prop-badge-deprecated {
   background: #f8d7da;

src/css/tooltips.css

@@ -10,6 +10,31 @@ a.glossary-term {
   text-decoration: none !important;
 }
 
+/* Enterprise feature terms, emitted by the enterprise inline macro
+   (docs-extensions-and-macros). A dotted underline matches the glossary
+   affordance, and a small lock glyph marks the term as license-gated.
+   Both use --link-highlight-color, so dark mode adapts automatically. */
+.enterprise-feature > a {
+  border-bottom: 2px dotted var(--link-highlight-color);
+  text-decoration: none !important;
+}
+
+.enterprise-feature:not(:has(> a)) {
+  border-bottom: 2px dotted var(--link-highlight-color);
+}
+
+.enterprise-feature::after,
+code.is-enterprise-property::after {
+  content: "";
+  display: inline-block;
+  width: 0.9em;
+  height: 0.9em;
+  margin-left: 0.2em;
+  background-color: var(--link-highlight-color);
+  -webkit-mask: var(--enterprise-lock-icon) no-repeat center / contain;
+  mask: var(--enterprise-lock-icon) no-repeat center / contain;
+}
+
 h1 [data-tippy-root],
 h2 [data-tippy-root],
 h3 [data-tippy-root],

src/css/vars.css

@@ -379,6 +379,7 @@ html:not([data-theme=dark]) {
    ============================================================================= */
 
 :root {
+  --enterprise-lock-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9z"/></svg>');
   /* Typography - Font Families */
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
   --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;

src/js/12-activate-tooltips.js

@@ -45,6 +45,14 @@
       })
     })
 
+    // Initialize tippy for enterprise feature terms (enterprise inline macro)
+    document.querySelectorAll('[data-enterprise-tooltip]').forEach((el) => {
+      tippy(el, {
+        ...tooltipConfig,
+        content: el.getAttribute('data-enterprise-tooltip'),
+      })
+    })
+
     // Convert title attributes to tippy tooltips for code block buttons
     document.querySelectorAll('.source-toolbox [title]').forEach((el) => {
       const titleContent = el.getAttribute('title')

src/js/19-property-tooltips.js

@@ -398,6 +398,9 @@
           // Mark as having tooltip (for styling and to avoid re-processing)
           codeEl.classList.add('has-property-tooltip')
           codeEl.classList.add('has-documentation')
+          if (prop.isEnterprise) {
+            codeEl.classList.add('is-enterprise-property')
+          }
           codeEl.style.cursor = 'help'
           codeEl.setAttribute('tabindex', '0')
           codeEl.setAttribute('role', 'button')