@besaitech/ng-design-system 0.0.71 → 0.0.72

package/fesm2022/besaitech-ng-design-system-rich-text.mjs

@@ -0,0 +1,1341 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, input, booleanAttribute, numberAttribute, inject, ChangeDetectorRef, ElementRef, viewChild, viewChildren, contentChild, signal, computed, afterNextRender, effect, untracked, DestroyRef, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { SdsIcon, SdsButton } from '@besaitech/ng-design-system';
+import { Editor } from '@tiptap/core';
+import { Placeholder, CharacterCount } from '@tiptap/extensions';
+import StarterKit from '@tiptap/starter-kit';
+
+/** The toolbar shown when `[tools]` is not set. */
+const SDS_RICH_TEXT_DEFAULT_TOOLS = [
+    'heading2',
+    'heading3',
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'bulletList',
+    'orderedList',
+    'blockquote',
+    'link',
+    'clearFormatting',
+    'undo',
+    'redo',
+];
+const SDS_RICH_TEXT_LABELS_EN = {
+    toolbar: 'Formatting',
+    paragraph: 'Normal text',
+    heading2: 'Heading',
+    heading3: 'Subheading',
+    bold: 'Bold',
+    italic: 'Italic',
+    underline: 'Underline',
+    strike: 'Strikethrough',
+    bulletList: 'Bulleted list',
+    orderedList: 'Numbered list',
+    blockquote: 'Quote',
+    link: 'Link',
+    horizontalRule: 'Divider',
+    clearFormatting: 'Clear formatting',
+    undo: 'Undo',
+    redo: 'Redo',
+    linkUrl: 'Link address',
+    linkPlaceholder: 'https://… or e-mail address',
+    linkApply: 'Apply',
+    linkRemove: 'Remove link',
+    linkCancel: 'Cancel',
+    linkInvalid: 'Enter a web address (https://…), an e-mail address or a path starting with /.',
+    countLimit: '{count} of {max} characters used',
+    count: '{count} characters',
+};
+/**
+ * App-wide label overrides for every {@link SdsRichTextEditor} — provide a (partial) translation once, e.g.
+ * `{ provide: SDS_RICH_TEXT_LABELS, useValue: { bold: 'Gras', … } }`. A component's own `[labels]` win over it.
+ * For an app that switches language at runtime, bind `[labels]` instead.
+ */
+const SDS_RICH_TEXT_LABELS = new InjectionToken('SDS_RICH_TEXT_LABELS', { factory: () => ({}) });
+const SCHEME = /^([a-z][a-z0-9+-]*):/i;
+const ALLOWED_SCHEMES = new Set(['http', 'https', 'mailto', 'tel']);
+const BARE_EMAIL = /^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/;
+const BARE_DOMAIN = /^[a-z0-9-]+(\.[a-z0-9-]+)+(:\d+)?([/?#].*)?$/i;
+/**
+ * The link target the editor accepts for `raw`, normalised — or `null` when it is not safe to link to.
+ * Accepted: `http(s):`, `mailto:` and `tel:` URLs, site-relative paths (`/formations`) and anchors (`#faq`);
+ * a bare domain (`example.ch/page`) gets `https://`, a bare e-mail address gets `mailto:`. Everything else —
+ * `javascript:`, `data:`, protocol-relative `//host`, whitespace — is refused. The editor applies the same
+ * rule to pasted and loaded HTML, so an unsafe link never survives in its output.
+ */
+function sdsSafeHref(raw) {
+    const url = (raw ?? '').trim();
+    if (!url || /[\s\u0000-\u001f\u007f]/.test(url)) {
+        return null;
+    }
+    if (url.startsWith('#')) {
+        return url;
+    }
+    if (url.startsWith('/')) {
+        return url.startsWith('//') ? null : url;
+    }
+    const scheme = SCHEME.exec(url);
+    if (scheme) {
+        return ALLOWED_SCHEMES.has(scheme[1].toLowerCase()) ? url : null;
+    }
+    if (BARE_EMAIL.test(url)) {
+        return `mailto:${url}`;
+    }
+    if (BARE_DOMAIN.test(url)) {
+        return `https://${url}`;
+    }
+    return null;
+}
+
+let nextId$1 = 0;
+const TOOL_DEFS = [
+    { tool: 'paragraph', icon: 'pilcrow', group: 0, toggle: true, shortcut: 'Mod-Alt-0' },
+    { tool: 'heading2', icon: 'heading-2', group: 0, toggle: true, shortcut: 'Mod-Alt-2' },
+    { tool: 'heading3', icon: 'heading-3', group: 0, toggle: true, shortcut: 'Mod-Alt-3' },
+    { tool: 'bold', icon: 'bold', group: 1, toggle: true, shortcut: 'Mod-B' },
+    { tool: 'italic', icon: 'italic', group: 1, toggle: true, shortcut: 'Mod-I' },
+    { tool: 'underline', icon: 'underline', group: 1, toggle: true, shortcut: 'Mod-U' },
+    { tool: 'strike', icon: 'strikethrough', group: 1, toggle: true, shortcut: 'Mod-Shift-S' },
+    { tool: 'bulletList', icon: 'list', group: 2, toggle: true, shortcut: 'Mod-Shift-8' },
+    { tool: 'orderedList', icon: 'list-ordered', group: 2, toggle: true, shortcut: 'Mod-Shift-7' },
+    { tool: 'blockquote', icon: 'text-quote', group: 2, toggle: true, shortcut: 'Mod-Shift-B' },
+    { tool: 'link', icon: 'link', group: 3, toggle: true, shortcut: 'Mod-K' },
+    { tool: 'horizontalRule', icon: 'minus', group: 3, toggle: false },
+    { tool: 'clearFormatting', icon: 'remove-formatting', group: 4, toggle: false },
+    { tool: 'undo', icon: 'undo-2', group: 5, toggle: false, shortcut: 'Mod-Z' },
+    { tool: 'redo', icon: 'redo-2', group: 5, toggle: false, shortcut: 'Mod-Shift-Z' },
+];
+/** One line of the editable area, for `[rows]` → min-height. */
+const LINE_EM = 1.6;
+const FRAME_BASE = 'overflow-hidden rounded-control border text-ink transition-colors';
+const TOOL_BUTTON = 'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-ink-soft transition-colors ' +
+    'hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ' +
+    'disabled:pointer-events-none disabled:opacity-40';
+/**
+ * Pressed (active) state: the brand tint, like a tertiary button. In dark mode it takes the preset's
+ * `--sds-dark-tint` / `--sds-dark-on-tint` and falls back to a neutral white tint (see theme/dark-fills.ts —
+ * internal to the root entry, hence the literals here; Tailwind finds them by scanning the bundle).
+ */
+const TOOL_BUTTON_ON = 'bg-brand-50 text-brand-700 hover:bg-brand-100 hover:text-brand-700 ' +
+    'dark:bg-[color:var(--sds-dark-tint,rgb(255_255_255/0.12))] ' +
+    'dark:text-[color:var(--sds-dark-on-tint,var(--color-ink))] ' +
+    'dark:hover:bg-[color:var(--sds-dark-tint-hover,rgb(255_255_255/0.16))] ' +
+    'dark:hover:text-[color:var(--sds-dark-on-tint,var(--color-ink))]';
+/**
+ * Marks content projected at the END of an {@link SdsRichTextEditor}'s toolbar — a language switcher (as in
+ * {@link SdsLocalizedRichTextEditor}), an "insert variable" menu… It stays visible in `readonly` mode, where
+ * the formatting buttons are hidden: `<div sdsRichTextToolbarEnd>…</div>`.
+ */
+class SdsRichTextToolbarEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsRichTextToolbarEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsRichTextToolbarEnd, isStandalone: true, selector: "[sdsRichTextToolbarEnd]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsRichTextToolbarEnd, decorators: [{
+            type: Directive,
+            args: [{ selector: '[sdsRichTextToolbarEnd]' }]
+        }] });
+/**
+ * A rich-text field — headings, bold / italic / underline / strike, lists, quotes, links, dividers, undo/redo —
+ * for content that is stored and shown as HTML (course pages, instructions, articles). Built on Tiptap
+ * (ProseMirror), so the HTML it emits is always clean and structured: no inline styles, no `<font>`/`<span>`
+ * soup from Word or web pages, nothing outside the enabled tools.
+ *
+ * **The tools are the schema.** `[tools]` chooses the toolbar AND what the document may contain: drop
+ * `heading2`/`heading3` and pasted headings become paragraphs; drop `link` and links are unwrapped. Links
+ * only accept http(s), mailto, tel, site-relative paths and anchors ({@link sdsSafeHref}) — `javascript:`
+ * and friends are stripped from typed, pasted and loaded HTML alike, and links open in a new tab with
+ * `rel="noopener noreferrer nofollow"`. Still sanitise on display, as for any stored HTML.
+ *
+ * Implements ControlValueAccessor over an HTML string — use with reactive forms or `[(ngModel)]`. An empty
+ * document is `''` (not `<p></p>`), so `Validators.required` works. Writing a value never marks the control
+ * dirty. Keyboard: the usual shortcuts (⌘/Ctrl+B, I, U, K for a link, ⌘/Ctrl+Alt+2/3 for headings, Markdown
+ * shortcuts like `## ` or `- `); the toolbar is one Tab stop, arrows move inside it.
+ *
+ * Strings are English by default: pass `[labels]` (or provide {@link SDS_RICH_TEXT_LABELS}) in another
+ * language. Import from the secondary entry point `@besaitech/ng-design-system/rich-text`.
+ */
+class SdsRichTextEditor {
+    fieldId = `sds-rte-${nextId$1++}`;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name used when no visible [label] is provided. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Shown in the empty document. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message. */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Language of the content (`lang` on the editable document), so the browser spell-checks it in the right
+     * language — e.g. `'de'` for the German version of a translated text.
+     */
+    contentLanguage = input('', ...(ngDevMode ? [{ debugName: "contentLanguage" }] : []));
+    /** Asterisk after the [label] (hidden from screen readers) + `aria-required`. It does not validate. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Shows the content without the toolbar; it can be selected and copied but not changed. */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * The toolbar, in display order (groups are fixed: block, text, lists, insert, clear, history) — and the
+     * content the document may hold. Defaults to {@link SDS_RICH_TEXT_DEFAULT_TOOLS}. Set once: changing it
+     * rebuilds the editor (the content is kept, minus what the new tools no longer allow).
+     */
+    tools = input(SDS_RICH_TEXT_DEFAULT_TOOLS, ...(ngDevMode ? [{ debugName: "tools" }] : []));
+    /** Minimum visible lines of the editing area. */
+    rows = input(6, ...(ngDevMode ? [{ debugName: "rows", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Lines after which the area scrolls instead of growing; 0 (default) grows with the content. */
+    maxRows = input(0, ...(ngDevMode ? [{ debugName: "maxRows", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Cap on the plain-text length (markup is not counted); 0 means no limit. Typing stops at the cap. */
+    maxLength = input(0, ...(ngDevMode ? [{ debugName: "maxLength", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Show the character counter (always shown with a [maxLength]). */
+    showCount = input(false, ...(ngDevMode ? [{ debugName: "showCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** `filled`: a borderless field on a muted ground, like `sds-textarea`'s. */
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Per-instance strings (merged over {@link SDS_RICH_TEXT_LABELS} and the English defaults). */
+    labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    cdr = inject(ChangeDetectorRef);
+    host = inject(ElementRef);
+    appLabels = inject(SDS_RICH_TEXT_LABELS);
+    contentHost = viewChild.required('content');
+    linkInput = viewChild('linkInput', ...(ngDevMode ? [{ debugName: "linkInput" }] : []));
+    toolButtons = viewChildren('toolButton', ...(ngDevMode ? [{ debugName: "toolButtons" }] : []));
+    toolbarEnd = contentChild(SdsRichTextToolbarEnd, ...(ngDevMode ? [{ debugName: "toolbarEnd" }] : []));
+    editor = null;
+    /** The HTML last written to or emitted by the control — '' for an empty document. */
+    html = '';
+    builtTools = '';
+    ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    /** Formatting active at the selection, per tool (refreshed on every transaction). */
+    activeTools = signal(new Set(), ...(ngDevMode ? [{ debugName: "activeTools" }] : []));
+    history = signal({ undo: false, redo: false }, ...(ngDevMode ? [{ debugName: "history" }] : []));
+    characters = signal(0, ...(ngDevMode ? [{ debugName: "characters" }] : []));
+    rovingTool = signal(null, ...(ngDevMode ? [{ debugName: "rovingTool" }] : []));
+    linkOpen = signal(false, ...(ngDevMode ? [{ debugName: "linkOpen" }] : []));
+    linkDraft = signal('', ...(ngDevMode ? [{ debugName: "linkDraft" }] : []));
+    linkError = signal(false, ...(ngDevMode ? [{ debugName: "linkError" }] : []));
+    l = computed(() => ({
+        ...SDS_RICH_TEXT_LABELS_EN,
+        ...this.appLabels,
+        ...this.labels(),
+    }), ...(ngDevMode ? [{ debugName: "l" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** The document can be changed (and the toolbar used). */
+    interactive = computed(() => !this.isDisabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "interactive" }] : []));
+    showToolbar = computed(() => !this.readonly() && this.groups().length > 0, ...(ngDevMode ? [{ debugName: "showToolbar" }] : []));
+    toolSet = computed(() => new Set(this.tools()), ...(ngDevMode ? [{ debugName: "toolSet" }] : []));
+    groups = computed(() => {
+        const enabled = this.toolSet();
+        const byGroup = new Map();
+        for (const def of TOOL_DEFS) {
+            if (enabled.has(def.tool)) {
+                byGroup.set(def.group, [...(byGroup.get(def.group) ?? []), def]);
+            }
+        }
+        return [...byGroup.entries()].sort(([a], [b]) => a - b).map(([, defs]) => defs);
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+    hasCounter = computed(() => this.showCount() || this.maxLength() > 0, ...(ngDevMode ? [{ debugName: "hasCounter" }] : []));
+    atLimit = computed(() => this.maxLength() > 0 && this.characters() >= this.maxLength(), ...(ngDevMode ? [{ debugName: "atLimit" }] : []));
+    countLabel = computed(() => (this.maxLength() ? this.l().countLimit : this.l().count)
+        .replace('{count}', String(this.characters()))
+        .replace('{max}', String(this.maxLength())), ...(ngDevMode ? [{ debugName: "countLabel" }] : []));
+    maxHeight = computed(() => this.maxRows() > 0 ? `calc(${this.maxRows() * LINE_EM}em + 1.25rem)` : null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
+    danger = computed(() => !!this.error() || this.invalid(), ...(ngDevMode ? [{ debugName: "danger" }] : []));
+    frameClasses = computed(() => {
+        const parts = [FRAME_BASE];
+        if (this.appearance() === 'filled') {
+            parts.push('bg-muted');
+            parts.push(this.danger()
+                ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
+                : 'border-transparent focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        else {
+            parts.push('bg-surface');
+            parts.push(this.danger()
+                ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
+                : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        if (this.isDisabled()) {
+            parts.push('opacity-60 cursor-not-allowed');
+        }
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.error())
+            ids.push(`${this.fieldId}-err`);
+        else if (this.hint())
+            ids.push(`${this.fieldId}-hint`);
+        if (this.hasCounter())
+            ids.push(`${this.fieldId}-count`);
+        return ids.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    /** Attributes of the contenteditable document (ProseMirror's own element). */
+    documentAttributes = computed(() => {
+        const attrs = {
+            id: this.fieldId,
+            class: 'sds-rte-content',
+            role: 'textbox',
+            'aria-multiline': 'true',
+            style: `min-height: calc(${Math.max(1, this.rows()) * LINE_EM}em + 1.25rem)`,
+        };
+        if (this.label())
+            attrs['aria-labelledby'] = `${this.fieldId}-label`;
+        else if (this.ariaLabel())
+            attrs['aria-label'] = this.ariaLabel();
+        if (this.describedBy())
+            attrs['aria-describedby'] = this.describedBy();
+        if (this.danger())
+            attrs['aria-invalid'] = 'true';
+        if (this.contentLanguage())
+            attrs['lang'] = this.contentLanguage();
+        if (this.required())
+            attrs['aria-required'] = 'true';
+        if (this.readonly())
+            attrs['aria-readonly'] = 'true';
+        if (this.isDisabled())
+            attrs['aria-disabled'] = 'true';
+        return attrs;
+    }, ...(ngDevMode ? [{ debugName: "documentAttributes" }] : []));
+    isApple = typeof navigator !== 'undefined' &&
+        /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+    constructor() {
+        // The editor needs the DOM: create it after the first render, in the browser only (SSR-safe).
+        afterNextRender(() => this.build());
+        effect(() => {
+            const props = this.editorProps(this.documentAttributes());
+            if (this.ready()) {
+                untracked(() => this.editor?.setOptions({ editorProps: props }));
+            }
+        });
+        effect(() => {
+            const editable = this.interactive();
+            if (this.ready()) {
+                untracked(() => {
+                    this.editor?.setEditable(editable, false);
+                    if (!editable)
+                        this.linkOpen.set(false);
+                });
+            }
+        });
+        // A new tool set (or a new length cap) changes the schema: rebuild, keeping the content.
+        effect(() => {
+            const key = JSON.stringify([this.tools(), this.maxLength()]);
+            if (this.ready() && key !== this.builtTools) {
+                untracked(() => this.build());
+            }
+        });
+        effect(() => {
+            // Keep one toolbar button tabbable: the first enabled one unless the user moved.
+            const first = this.groups()[0]?.[0]?.tool ?? null;
+            const current = untracked(this.rovingTool);
+            if (!current || !this.toolSet().has(current))
+                this.rovingTool.set(first);
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.editor?.destroy();
+            this.editor = null;
+        });
+    }
+    /** Move the caret into the document. */
+    focus() {
+        this.editor?.commands.focus();
+    }
+    /**
+     * Insert plain text at the caret (replacing the selection) — for an "insert variable" button in the
+     * {@link SdsRichTextToolbarEnd} slot, say. The text is inserted as text, never parsed as HTML. No-op while
+     * disabled or read-only.
+     */
+    insertText(text) {
+        if (!this.editor || !this.interactive() || !text)
+            return;
+        this.editor.chain().focus().insertContent({ type: 'text', text }).run();
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.html = value ?? '';
+        const editor = this.editor;
+        if (editor && this.currentHtml(editor) !== this.html) {
+            // A value written by the form is the starting point, not an edit: keep it out of the undo history,
+            // or ⌘Z right after loading would empty the document.
+            editor
+                .chain()
+                .setMeta('addToHistory', false)
+                .setContent(this.html, { emitUpdate: false })
+                .run();
+            this.refresh(editor);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- toolbar ----------------------------------------------------------------
+    isOn(tool) {
+        return this.activeTools().has(tool);
+    }
+    canRun(tool) {
+        if (tool === 'undo')
+            return this.history().undo;
+        if (tool === 'redo')
+            return this.history().redo;
+        return true;
+    }
+    buttonClass(def) {
+        return def.toggle && this.isOn(def.tool) ? `${TOOL_BUTTON} ${TOOL_BUTTON_ON}` : TOOL_BUTTON;
+    }
+    tooltip(def) {
+        const name = this.l()[def.tool];
+        if (!def.shortcut)
+            return name;
+        const keys = def.shortcut
+            .split('-')
+            .map((k) => k === 'Mod'
+            ? this.isApple
+                ? '⌘'
+                : 'Ctrl'
+            : k === 'Alt'
+                ? this.isApple
+                    ? '⌥'
+                    : 'Alt'
+                : k === 'Shift'
+                    ? this.isApple
+                        ? '⇧'
+                        : 'Shift'
+                    : k);
+        return `${name} (${keys.join(this.isApple ? '' : '+')})`;
+    }
+    run(tool) {
+        const editor = this.editor;
+        if (!editor || !this.interactive())
+            return;
+        const chain = editor.chain().focus();
+        switch (tool) {
+            case 'paragraph':
+                chain.setParagraph().run();
+                break;
+            case 'heading2':
+                chain.toggleHeading({ level: 2 }).run();
+                break;
+            case 'heading3':
+                chain.toggleHeading({ level: 3 }).run();
+                break;
+            case 'bold':
+                chain.toggleBold().run();
+                break;
+            case 'italic':
+                chain.toggleItalic().run();
+                break;
+            case 'underline':
+                chain.toggleUnderline().run();
+                break;
+            case 'strike':
+                chain.toggleStrike().run();
+                break;
+            case 'bulletList':
+                chain.toggleBulletList().run();
+                break;
+            case 'orderedList':
+                chain.toggleOrderedList().run();
+                break;
+            case 'blockquote':
+                chain.toggleBlockquote().run();
+                break;
+            case 'horizontalRule':
+                chain.setHorizontalRule().run();
+                break;
+            case 'clearFormatting':
+                chain.unsetAllMarks().clearNodes().run();
+                break;
+            case 'undo':
+                chain.undo().run();
+                break;
+            case 'redo':
+                chain.redo().run();
+                break;
+            case 'link':
+                this.openLink();
+                break;
+        }
+    }
+    /** Roving focus inside the toolbar: one Tab stop, arrows / Home / End move between the buttons. */
+    onToolbarKeydown(event) {
+        const buttons = this.toolButtons()
+            .map((b) => b.nativeElement)
+            .filter((b) => !b.disabled);
+        const index = buttons.indexOf(document.activeElement);
+        if (index < 0)
+            return;
+        let next = -1;
+        if (event.key === 'ArrowRight')
+            next = (index + 1) % buttons.length;
+        else if (event.key === 'ArrowLeft')
+            next = (index - 1 + buttons.length) % buttons.length;
+        else if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = buttons.length - 1;
+        if (next >= 0) {
+            event.preventDefault();
+            buttons[next].focus();
+        }
+    }
+    /** A click in the blank area under the last line still places the caret (at the end). */
+    onAreaClick(event) {
+        const editor = this.editor;
+        if (editor && this.interactive() && event.target === this.contentHost().nativeElement) {
+            editor.commands.focus('end');
+        }
+    }
+    // --- link -------------------------------------------------------------------
+    openLink() {
+        const editor = this.editor;
+        if (!editor || !this.interactive() || !this.toolSet().has('link'))
+            return;
+        this.linkDraft.set(editor.getAttributes('link')['href'] ?? '');
+        this.linkError.set(false);
+        this.linkOpen.set(true);
+        // Render the field and move focus into it NOW: deferring to the next render lets keystrokes typed
+        // right after ⌘K land in the document and replace the selection.
+        this.cdr.detectChanges();
+        this.linkInput()?.nativeElement.focus();
+    }
+    onLinkInput(event) {
+        this.linkDraft.set(event.target.value);
+        this.linkError.set(false);
+    }
+    onLinkKeydown(event) {
+        if (event.key === 'Enter') {
+            // Never let Enter submit a surrounding form.
+            event.preventDefault();
+            this.applyLink();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.closeLink(true);
+        }
+    }
+    applyLink() {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const href = sdsSafeHref(this.linkDraft());
+        if (!href) {
+            this.linkError.set(true);
+            this.linkInput()?.nativeElement.focus();
+            return;
+        }
+        if (editor.state.selection.empty && !editor.isActive('link')) {
+            // Nothing selected: insert the address itself as the link text.
+            const text = href.replace(/^mailto:/i, '').replace(/^tel:/i, '');
+            editor
+                .chain()
+                .focus()
+                .insertContent({ type: 'text', text, marks: [{ type: 'link', attrs: { href } }] })
+                .run();
+        }
+        else {
+            editor.chain().focus().extendMarkRange('link').setLink({ href }).run();
+        }
+        this.linkOpen.set(false);
+    }
+    removeLink() {
+        this.editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+        this.linkOpen.set(false);
+    }
+    closeLink(refocus) {
+        this.linkOpen.set(false);
+        if (refocus)
+            this.editor?.commands.focus();
+    }
+    // --- editor -----------------------------------------------------------------
+    build() {
+        const element = this.contentHost().nativeElement;
+        const content = this.editor ? this.currentHtml(this.editor) : this.html;
+        this.editor?.destroy();
+        element.replaceChildren();
+        this.builtTools = JSON.stringify([this.tools(), this.maxLength()]);
+        const editor = new Editor({
+            element,
+            extensions: this.extensions(),
+            content,
+            editable: this.interactive(),
+            editorProps: this.editorProps(this.documentAttributes()),
+            onUpdate: ({ editor }) => this.emit(editor),
+            onTransaction: ({ editor }) => this.refresh(editor),
+            onBlur: ({ event }) => {
+                const next = event.relatedTarget;
+                if (!next || !this.host.nativeElement.contains(next))
+                    this.onTouched();
+            },
+        });
+        this.editor = editor;
+        this.refresh(editor);
+        this.ready.set(true);
+    }
+    extensions() {
+        const tools = this.toolSet();
+        const on = (tool) => (tools.has(tool) ? {} : false);
+        const levels = [2, 3].filter((level) => tools.has(`heading${level}`));
+        const lists = tools.has('bulletList') || tools.has('orderedList');
+        return [
+            StarterKit.configure({
+                heading: levels.length ? { levels: [...levels] } : false,
+                bold: on('bold'),
+                italic: on('italic'),
+                underline: on('underline'),
+                strike: on('strike'),
+                bulletList: on('bulletList'),
+                orderedList: on('orderedList'),
+                listItem: lists ? {} : false,
+                listKeymap: lists ? {} : false,
+                blockquote: on('blockquote'),
+                horizontalRule: on('horizontalRule'),
+                code: false,
+                codeBlock: false,
+                link: tools.has('link')
+                    ? {
+                        openOnClick: false,
+                        autolink: true,
+                        linkOnPaste: true,
+                        defaultProtocol: 'https',
+                        isAllowedUri: (url) => sdsSafeHref(url) === url.trim(),
+                        HTMLAttributes: { target: '_blank', rel: 'noopener noreferrer nofollow' },
+                    }
+                    : false,
+            }),
+            Placeholder.configure({ placeholder: () => this.placeholder() }),
+            CharacterCount.configure({ limit: this.maxLength() > 0 ? this.maxLength() : null }),
+        ];
+    }
+    editorProps(attributes) {
+        return {
+            attributes,
+            handleKeyDown: (_view, event) => this.onDocumentKeydown(event),
+        };
+    }
+    /**
+     * ⌘/Ctrl+K opens the link field. The editor owns the shortcut while it has focus: the event is stopped
+     * so an app-wide ⌘K (a command palette such as `sds-search-command`) does not open on top of it.
+     */
+    onDocumentKeydown(event) {
+        const modK = (event.metaKey || event.ctrlKey) &&
+            !event.altKey &&
+            !event.shiftKey &&
+            event.key.toLowerCase() === 'k';
+        if (!modK || !this.toolSet().has('link'))
+            return false;
+        event.preventDefault();
+        event.stopPropagation();
+        this.openLink();
+        return true;
+    }
+    /**
+     * The control's value for the editor's document: '' when it is empty, and without the empty paragraphs
+     * the editor keeps after a final list / quote / divider so the caret can leave it (Tiptap's trailing node).
+     */
+    currentHtml(editor) {
+        return editor.isEmpty ? '' : editor.getHTML().replace(/(?:<p><\/p>)+$/, '');
+    }
+    emit(editor) {
+        const html = this.currentHtml(editor);
+        if (html !== this.html) {
+            this.html = html;
+            this.onChange(html);
+        }
+    }
+    refresh(editor) {
+        const active = new Set();
+        const check = (tool, name, attrs) => {
+            if (this.toolSet().has(tool) && editor.isActive(name, attrs))
+                active.add(tool);
+        };
+        check('heading2', 'heading', { level: 2 });
+        check('heading3', 'heading', { level: 3 });
+        check('paragraph', 'paragraph');
+        check('bold', 'bold');
+        check('italic', 'italic');
+        check('underline', 'underline');
+        check('strike', 'strike');
+        check('bulletList', 'bulletList');
+        check('orderedList', 'orderedList');
+        check('blockquote', 'blockquote');
+        check('link', 'link');
+        this.activeTools.set(active);
+        this.history.set({ undo: editor.can().undo(), redo: editor.can().redo() });
+        this.characters.set(editor.storage.characterCount.characters());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsRichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsRichTextEditor, isStandalone: true, selector: "sds-rich-text-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, contentLanguage: { classPropertyName: "contentLanguage", publicName: "contentLanguage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsRichTextEditor),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "toolbarEnd", first: true, predicate: SdsRichTextToolbarEnd, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "linkInput", first: true, predicate: ["linkInput"], descendants: true, isSignal: true }, { propertyName: "toolButtons", predicate: ["toolButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label
+        [id]="fieldId + '-label'"
+        class="mb-1.5 block text-sm font-medium text-ink"
+        (click)="focus()"
+        >{{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+
+    <div [class]="frameClasses()">
+      @if (showToolbar() || toolbarEnd()) {
+        <div
+          [attr.role]="showToolbar() ? 'toolbar' : null"
+          [attr.aria-label]="showToolbar() ? l().toolbar : null"
+          [attr.aria-controls]="showToolbar() ? fieldId : null"
+          [attr.aria-disabled]="showToolbar() && !interactive() ? 'true' : null"
+          class="flex flex-wrap items-center gap-0.5 border-b border-border px-1.5 py-1"
+          [class.bg-muted]="appearance() === 'default'"
+          (keydown)="onToolbarKeydown($event)"
+        >
+          @for (group of showToolbar() ? groups() : []; track $index; let gi = $index) {
+            @if (gi > 0) {
+              <span class="mx-1 h-5 w-px shrink-0 bg-border" aria-hidden="true"></span>
+            }
+            @for (def of group; track def.tool) {
+              <button
+                #toolButton
+                type="button"
+                [attr.data-tool]="def.tool"
+                [attr.tabindex]="def.tool === rovingTool() ? 0 : -1"
+                [attr.aria-pressed]="def.toggle ? (isOn(def.tool) ? 'true' : 'false') : null"
+                [attr.aria-label]="l()[def.tool]"
+                [attr.title]="tooltip(def)"
+                [disabled]="!interactive() || !canRun(def.tool)"
+                [class]="buttonClass(def)"
+                (mousedown)="$event.preventDefault()"
+                (click)="run(def.tool)"
+                (focus)="rovingTool.set(def.tool)"
+              >
+                <sds-icon [name]="def.icon" [size]="16" />
+              </button>
+            }
+          }
+          <div class="ml-auto flex shrink-0 items-center pl-1">
+            <ng-content select="[sdsRichTextToolbarEnd]" />
+          </div>
+        </div>
+      }
+
+      @if (linkOpen()) {
+        <div
+          role="group"
+          [attr.aria-label]="l().link"
+          class="flex flex-wrap items-center gap-2 border-b border-border bg-surface px-2 py-2"
+        >
+          <label class="sr-only" [for]="fieldId + '-url'">{{ l().linkUrl }}</label>
+          <input
+            #linkInput
+            [id]="fieldId + '-url'"
+            type="text"
+            inputmode="url"
+            autocomplete="url"
+            spellcheck="false"
+            [value]="linkDraft()"
+            [placeholder]="l().linkPlaceholder"
+            [attr.aria-invalid]="linkError() ? 'true' : null"
+            [attr.aria-describedby]="linkError() ? fieldId + '-url-err' : null"
+            class="h-8 min-w-0 flex-1 basis-48 rounded-control border bg-surface px-2.5 text-sm text-ink outline-none placeholder:text-ink-faint focus:ring-2"
+            [class]="
+              linkError()
+                ? 'border-danger focus:ring-danger/25'
+                : 'border-border focus:border-brand-500 focus:ring-brand-500/25'
+            "
+            (input)="onLinkInput($event)"
+            (keydown)="onLinkKeydown($event)"
+          />
+          <sds-button size="sm" (click)="applyLink()">{{ l().linkApply }}</sds-button>
+          @if (isOn('link')) {
+            <sds-button size="sm" variant="ghost" (click)="removeLink()">
+              <sds-icon name="unlink" [size]="15" />
+              {{ l().linkRemove }}
+            </sds-button>
+          }
+          <sds-button size="sm" variant="ghost" (click)="closeLink(true)">{{
+            l().linkCancel
+          }}</sds-button>
+          @if (linkError()) {
+            <p [id]="fieldId + '-url-err'" class="basis-full text-xs font-medium text-danger">
+              {{ l().linkInvalid }}
+            </p>
+          }
+        </div>
+      }
+
+      <div
+        #content
+        class="sds-rte"
+        [class.overflow-y-auto]="maxRows() > 0"
+        [style.max-height]="maxHeight()"
+        (click)="onAreaClick($event)"
+      ></div>
+    </div>
+
+    @if (hasCounter()) {
+      <div class="mt-1.5 flex items-start gap-2 text-xs">
+        @if (error()) {
+          <p [id]="fieldId + '-err'" class="flex-1 font-medium text-danger">{{ error() }}</p>
+        } @else if (hint()) {
+          <p [id]="fieldId + '-hint'" class="flex-1 text-ink-faint">{{ hint() }}</p>
+        } @else {
+          <span class="flex-1"></span>
+        }
+        <span
+          [id]="fieldId + '-count'"
+          aria-live="polite"
+          [attr.aria-label]="countLabel()"
+          class="shrink-0 tabular-nums"
+          [class.text-ink-faint]="!atLimit()"
+          [class.text-danger]="atLimit()"
+          >{{ characters() }}{{ maxLength() ? ' / ' + maxLength() : '' }}</span
+        >
+      </div>
+    } @else if (error()) {
+      <p [id]="fieldId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="fieldId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `, isInline: true, styles: [".sds-rte-content{outline:none;padding:.625rem .875rem;color:var(--color-ink);font-size:.875rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.sds-rte-content>:first-child{margin-top:0}.sds-rte-content>:last-child{margin-bottom:0}.sds-rte-content p,.sds-rte-content ul,.sds-rte-content ol,.sds-rte-content blockquote{margin:0 0 .75em}.sds-rte-content h2{font-size:1.25em;font-weight:600;line-height:1.3;margin:1.1em 0 .5em}.sds-rte-content h3{font-size:1.1em;font-weight:600;line-height:1.35;margin:1em 0 .4em}.sds-rte-content ul{list-style:disc;padding-left:1.5em}.sds-rte-content ol{list-style:decimal;padding-left:1.5em}.sds-rte-content li>p{margin:0}.sds-rte-content li+li{margin-top:.25em}.sds-rte-content li>ul,.sds-rte-content li>ol{margin:.25em 0 0}.sds-rte-content blockquote{border-left:3px solid var(--color-border);padding-left:.875em;color:var(--color-ink-soft)}.sds-rte-content a{color:var(--color-brand-700, var(--color-accent-blue));text-decoration:underline;text-underline-offset:2px}.dark .sds-rte-content a{color:var(--sds-dark-on-tint, var(--color-ink))}.sds-rte-content hr{border:0;border-top:1px solid var(--color-border);margin:1em 0}.sds-rte-content hr.ProseMirror-selectednode{outline:2px solid var(--color-brand-500, var(--color-accent-blue));outline-offset:2px}.sds-rte-content p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-ink-faint);float:left;height:0;pointer-events:none}.sds-rte-content[contenteditable=false]{cursor:default}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsButton, selector: "sds-button", inputs: ["variant", "size", "shape", "type", "disabled", "loading", "block", "iconOnly", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsRichTextEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-rich-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SdsIcon, SdsButton], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsRichTextEditor),
+                            multi: true,
+                        },
+                    ], host: { class: 'block' }, template: `
+    @if (label()) {
+      <label
+        [id]="fieldId + '-label'"
+        class="mb-1.5 block text-sm font-medium text-ink"
+        (click)="focus()"
+        >{{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+
+    <div [class]="frameClasses()">
+      @if (showToolbar() || toolbarEnd()) {
+        <div
+          [attr.role]="showToolbar() ? 'toolbar' : null"
+          [attr.aria-label]="showToolbar() ? l().toolbar : null"
+          [attr.aria-controls]="showToolbar() ? fieldId : null"
+          [attr.aria-disabled]="showToolbar() && !interactive() ? 'true' : null"
+          class="flex flex-wrap items-center gap-0.5 border-b border-border px-1.5 py-1"
+          [class.bg-muted]="appearance() === 'default'"
+          (keydown)="onToolbarKeydown($event)"
+        >
+          @for (group of showToolbar() ? groups() : []; track $index; let gi = $index) {
+            @if (gi > 0) {
+              <span class="mx-1 h-5 w-px shrink-0 bg-border" aria-hidden="true"></span>
+            }
+            @for (def of group; track def.tool) {
+              <button
+                #toolButton
+                type="button"
+                [attr.data-tool]="def.tool"
+                [attr.tabindex]="def.tool === rovingTool() ? 0 : -1"
+                [attr.aria-pressed]="def.toggle ? (isOn(def.tool) ? 'true' : 'false') : null"
+                [attr.aria-label]="l()[def.tool]"
+                [attr.title]="tooltip(def)"
+                [disabled]="!interactive() || !canRun(def.tool)"
+                [class]="buttonClass(def)"
+                (mousedown)="$event.preventDefault()"
+                (click)="run(def.tool)"
+                (focus)="rovingTool.set(def.tool)"
+              >
+                <sds-icon [name]="def.icon" [size]="16" />
+              </button>
+            }
+          }
+          <div class="ml-auto flex shrink-0 items-center pl-1">
+            <ng-content select="[sdsRichTextToolbarEnd]" />
+          </div>
+        </div>
+      }
+
+      @if (linkOpen()) {
+        <div
+          role="group"
+          [attr.aria-label]="l().link"
+          class="flex flex-wrap items-center gap-2 border-b border-border bg-surface px-2 py-2"
+        >
+          <label class="sr-only" [for]="fieldId + '-url'">{{ l().linkUrl }}</label>
+          <input
+            #linkInput
+            [id]="fieldId + '-url'"
+            type="text"
+            inputmode="url"
+            autocomplete="url"
+            spellcheck="false"
+            [value]="linkDraft()"
+            [placeholder]="l().linkPlaceholder"
+            [attr.aria-invalid]="linkError() ? 'true' : null"
+            [attr.aria-describedby]="linkError() ? fieldId + '-url-err' : null"
+            class="h-8 min-w-0 flex-1 basis-48 rounded-control border bg-surface px-2.5 text-sm text-ink outline-none placeholder:text-ink-faint focus:ring-2"
+            [class]="
+              linkError()
+                ? 'border-danger focus:ring-danger/25'
+                : 'border-border focus:border-brand-500 focus:ring-brand-500/25'
+            "
+            (input)="onLinkInput($event)"
+            (keydown)="onLinkKeydown($event)"
+          />
+          <sds-button size="sm" (click)="applyLink()">{{ l().linkApply }}</sds-button>
+          @if (isOn('link')) {
+            <sds-button size="sm" variant="ghost" (click)="removeLink()">
+              <sds-icon name="unlink" [size]="15" />
+              {{ l().linkRemove }}
+            </sds-button>
+          }
+          <sds-button size="sm" variant="ghost" (click)="closeLink(true)">{{
+            l().linkCancel
+          }}</sds-button>
+          @if (linkError()) {
+            <p [id]="fieldId + '-url-err'" class="basis-full text-xs font-medium text-danger">
+              {{ l().linkInvalid }}
+            </p>
+          }
+        </div>
+      }
+
+      <div
+        #content
+        class="sds-rte"
+        [class.overflow-y-auto]="maxRows() > 0"
+        [style.max-height]="maxHeight()"
+        (click)="onAreaClick($event)"
+      ></div>
+    </div>
+
+    @if (hasCounter()) {
+      <div class="mt-1.5 flex items-start gap-2 text-xs">
+        @if (error()) {
+          <p [id]="fieldId + '-err'" class="flex-1 font-medium text-danger">{{ error() }}</p>
+        } @else if (hint()) {
+          <p [id]="fieldId + '-hint'" class="flex-1 text-ink-faint">{{ hint() }}</p>
+        } @else {
+          <span class="flex-1"></span>
+        }
+        <span
+          [id]="fieldId + '-count'"
+          aria-live="polite"
+          [attr.aria-label]="countLabel()"
+          class="shrink-0 tabular-nums"
+          [class.text-ink-faint]="!atLimit()"
+          [class.text-danger]="atLimit()"
+          >{{ characters() }}{{ maxLength() ? ' / ' + maxLength() : '' }}</span
+        >
+      </div>
+    } @else if (error()) {
+      <p [id]="fieldId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="fieldId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `, styles: [".sds-rte-content{outline:none;padding:.625rem .875rem;color:var(--color-ink);font-size:.875rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.sds-rte-content>:first-child{margin-top:0}.sds-rte-content>:last-child{margin-bottom:0}.sds-rte-content p,.sds-rte-content ul,.sds-rte-content ol,.sds-rte-content blockquote{margin:0 0 .75em}.sds-rte-content h2{font-size:1.25em;font-weight:600;line-height:1.3;margin:1.1em 0 .5em}.sds-rte-content h3{font-size:1.1em;font-weight:600;line-height:1.35;margin:1em 0 .4em}.sds-rte-content ul{list-style:disc;padding-left:1.5em}.sds-rte-content ol{list-style:decimal;padding-left:1.5em}.sds-rte-content li>p{margin:0}.sds-rte-content li+li{margin-top:.25em}.sds-rte-content li>ul,.sds-rte-content li>ol{margin:.25em 0 0}.sds-rte-content blockquote{border-left:3px solid var(--color-border);padding-left:.875em;color:var(--color-ink-soft)}.sds-rte-content a{color:var(--color-brand-700, var(--color-accent-blue));text-decoration:underline;text-underline-offset:2px}.dark .sds-rte-content a{color:var(--sds-dark-on-tint, var(--color-ink))}.sds-rte-content hr{border:0;border-top:1px solid var(--color-border);margin:1em 0}.sds-rte-content hr.ProseMirror-selectednode{outline:2px solid var(--color-brand-500, var(--color-accent-blue));outline-offset:2px}.sds-rte-content p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--color-ink-faint);float:left;height:0;pointer-events:none}.sds-rte-content[contenteditable=false]{cursor:default}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], contentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLanguage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], tools: [{ type: i0.Input, args: [{ isSignal: true, alias: "tools", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], contentHost: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], linkInput: [{ type: i0.ViewChild, args: ['linkInput', { isSignal: true }] }], toolButtons: [{ type: i0.ViewChildren, args: ['toolButton', { isSignal: true }] }], toolbarEnd: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsRichTextToolbarEnd), { isSignal: true }] }] } });
+
+let nextId = 0;
+const TAB_BASE = 'flex items-center gap-1 rounded px-1.5 py-1 text-[11px] font-semibold uppercase leading-none transition-colors ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ' +
+    'disabled:cursor-not-allowed disabled:opacity-50';
+const TAB_ON = 'bg-brand-50 text-brand-700 ' +
+    'dark:bg-[color:var(--sds-dark-tint,rgb(255_255_255/0.12))] ' +
+    'dark:text-[color:var(--sds-dark-on-tint,var(--color-ink))]';
+const TAB_OFF = 'text-ink-faint hover:bg-muted hover:text-ink-soft';
+/**
+ * The translatable twin of {@link SdsRichTextEditor}: one rich-text field over a {@link SdsLocalizedValue} —
+ * `{ fr: '<p>…</p>', de: '<p>…</p>', en: … }` — for content stored per language (course pages, homework
+ * instructions, articles). It works like `sds-localized-input`: one language is edited at a time, a compact
+ * switcher at the end of the toolbar flips the language, and a dot marks the languages that already have
+ * content (green), a required one that is still empty (danger) or a missing translation (faint). Empty
+ * translations are pruned from the emitted value, so an untouched language never appears in the map.
+ *
+ * Each language has its own editor underneath, kept alive while hidden: undo / redo, the caret and the
+ * scroll position stay per language, and undoing after a switch can never bring another language's text
+ * back. The document carries its `lang`, so the browser spell-checks each translation in its language.
+ *
+ * The active language defaults to {@link currentLanguage} when it is one of {@link languages}, otherwise the
+ * first accepted language. Everything else — `[tools]` (the schema), safe links, `rows` / `maxRows`,
+ * `maxLength` (per language), labels — behaves as in {@link SdsRichTextEditor}.
+ *
+ * Implements ControlValueAccessor over the map — use with reactive forms or `[(ngModel)]`:
+ * `<sds-localized-rich-text-editor [languages]="['fr','de','en']" formControlName="description" />`.
+ * Import from `@besaitech/ng-design-system/rich-text`.
+ */
+class SdsLocalizedRichTextEditor {
+    baseId = `sds-lrte-${nextId++}`;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name when there is no visible {@link label}; each language's editor adds its code. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /** Error message under the field (danger frame + `aria-invalid`); replaces the hint. */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message. */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** An asterisk after the [label] and `aria-required`. It does not validate — keep your own validator. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Languages that must be filled (e.g. the site's main language): while empty, their switcher dot shows in the
+     * danger colour and its title says {@link requiredLanguageLabel}. Display only — validate in the form.
+     */
+    requiredLanguages = input([], ...(ngDevMode ? [{ debugName: "requiredLanguages" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Every translation can be read (the switcher still works) but none changed; the toolbar is hidden. */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** The accepted language codes, in display order (e.g. `['fr','de','en']`). */
+    languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    /** Language to open on; used when it is one of {@link languages}, else the first accepted language. */
+    currentLanguage = input(null, ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
+    /** The toolbar and the schema, as on {@link SdsRichTextEditor}. */
+    tools = input(SDS_RICH_TEXT_DEFAULT_TOOLS, ...(ngDevMode ? [{ debugName: "tools" }] : []));
+    rows = input(6, ...(ngDevMode ? [{ debugName: "rows", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    maxRows = input(0, ...(ngDevMode ? [{ debugName: "maxRows", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Cap on each language's plain-text length; 0 means no limit. */
+    maxLength = input(0, ...(ngDevMode ? [{ debugName: "maxLength", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Show the character counter of the language being edited (always shown with a [maxLength]). */
+    showCount = input(false, ...(ngDevMode ? [{ debugName: "showCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Editor strings, as on {@link SdsRichTextEditor}. */
+    labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    /**
+     * Accessible name of the language switcher, and the title suffixes of an empty language. English defaults;
+     * translate them in a multi-language app (the tabs show only the language code).
+     */
+    languageSwitcherLabel = input('Language', ...(ngDevMode ? [{ debugName: "languageSwitcherLabel" }] : []));
+    untranslatedLabel = input('not translated yet', ...(ngDevMode ? [{ debugName: "untranslatedLabel" }] : []));
+    /** Title suffix of a required language that is still empty (see {@link requiredLanguages}). */
+    requiredLanguageLabel = input('required', ...(ngDevMode ? [{ debugName: "requiredLanguageLabel" }] : []));
+    host = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
+    editors = viewChildren(SdsRichTextEditor, ...(ngDevMode ? [{ debugName: "editors" }] : []));
+    valueMap = signal({}, ...(ngDevMode ? [{ debugName: "valueMap" }] : []));
+    /** Language chosen with the switcher; null means "follow currentLanguage / the first language". */
+    manual = signal(null, ...(ngDevMode ? [{ debugName: "manual" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** The language being edited. */
+    activeLang = computed(() => {
+        const langs = this.languages();
+        if (!langs.length)
+            return '';
+        const manual = this.manual();
+        if (manual && langs.includes(manual))
+            return manual;
+        const preferred = this.currentLanguage();
+        return preferred && langs.includes(preferred) ? preferred : langs[0];
+    }, ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    /** Move the caret into the active language's document. */
+    focus() {
+        this.editorFor(this.activeLang())?.focus();
+    }
+    filled(lang) {
+        const html = this.valueMap()[lang];
+        return !!html && html.trim().length > 0;
+    }
+    /** A required language (see {@link requiredLanguages}) that is still empty. */
+    mustFill(lang) {
+        return this.requiredLanguages().includes(lang) && !this.filled(lang);
+    }
+    editorName(lang) {
+        const name = this.label() || this.ariaLabel();
+        return name ? `${name} (${lang.toUpperCase()})` : lang.toUpperCase();
+    }
+    placeholderFor(lang) {
+        const base = this.placeholder();
+        return base ? `${base} (${lang.toUpperCase()})` : '';
+    }
+    tabTitle(lang) {
+        const code = lang.toUpperCase();
+        if (this.filled(lang))
+            return code;
+        return `${code} — ${this.mustFill(lang) ? this.requiredLanguageLabel() : this.untranslatedLabel()}`;
+    }
+    tabClass(lang) {
+        return `${TAB_BASE} ${lang === this.activeLang() ? TAB_ON : TAB_OFF}`;
+    }
+    dotClass(lang) {
+        return this.filled(lang) ? 'bg-success' : this.mustFill(lang) ? 'bg-danger' : 'bg-current/30';
+    }
+    /**
+     * Switch language. From a click, the caret goes into the new language's document (ready to type); from the
+     * arrow keys, focus follows to the new language's tab. Rendered at once so focus never lands on the
+     * editor that was just hidden.
+     */
+    select(lang, focusTarget) {
+        if (lang === this.activeLang()) {
+            if (focusTarget === 'editor')
+                this.focus();
+            return;
+        }
+        this.manual.set(lang);
+        // Switching language counts as touching the field, as in sds-localized-input.
+        this.onTouched();
+        this.cdr.detectChanges();
+        if (focusTarget === 'editor') {
+            this.editorFor(lang)?.focus();
+        }
+        else {
+            this.host.nativeElement
+                .querySelector(`sds-rich-text-editor[data-active-language] [role="tab"][data-lang="${CSS.escape(lang)}"]`)
+                ?.focus();
+        }
+    }
+    /** The switcher is one Tab stop; arrows / Home / End change the language (automatic activation). */
+    onTabsKeydown(event) {
+        const langs = this.languages();
+        const index = langs.indexOf(this.activeLang());
+        let next = -1;
+        if (event.key === 'ArrowRight')
+            next = (index + 1) % langs.length;
+        else if (event.key === 'ArrowLeft')
+            next = (index - 1 + langs.length) % langs.length;
+        else if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = langs.length - 1;
+        if (next >= 0 && !this.isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.select(langs[next], 'tab');
+        }
+    }
+    write(lang, html) {
+        const current = this.valueMap()[lang] ?? '';
+        if ((html ?? '') === current)
+            return;
+        const next = { ...this.valueMap() };
+        if (html) {
+            next[lang] = html;
+        }
+        else {
+            delete next[lang];
+        }
+        this.valueMap.set(next);
+        this.onChange(next);
+    }
+    /** Touched once focus leaves the whole field (moving between toolbar, link field and document is not leaving). */
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.host.nativeElement.contains(next))
+            this.onTouched();
+    }
+    editorFor(lang) {
+        return this.editors()[this.languages().indexOf(lang)];
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.valueMap.set(value ? { ...value } : {});
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLocalizedRichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLocalizedRichTextEditor, isStandalone: true, selector: "sds-localized-rich-text-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, requiredLanguages: { classPropertyName: "requiredLanguages", publicName: "requiredLanguages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null }, tools: { classPropertyName: "tools", publicName: "tools", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, languageSwitcherLabel: { classPropertyName: "languageSwitcherLabel", publicName: "languageSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, untranslatedLabel: { classPropertyName: "untranslatedLabel", publicName: "untranslatedLabel", isSignal: true, isRequired: false, transformFunction: null }, requiredLanguageLabel: { classPropertyName: "requiredLanguageLabel", publicName: "requiredLanguageLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "onFocusOut($event)" }, classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsLocalizedRichTextEditor),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "editors", predicate: SdsRichTextEditor, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label
+        [id]="baseId + '-label'"
+        class="mb-1.5 block text-sm font-medium text-ink"
+        (click)="focus()"
+        >{{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+
+    @for (lang of languages(); track lang) {
+      <sds-rich-text-editor
+        [style.display]="lang === activeLang() ? null : 'none'"
+        [attr.data-active-language]="lang === activeLang() ? '' : null"
+        [ariaLabel]="editorName(lang)"
+        [contentLanguage]="lang"
+        [placeholder]="placeholderFor(lang)"
+        [hint]="hint()"
+        [error]="error()"
+        [invalid]="invalid()"
+        [required]="required()"
+        [disabled]="isDisabled()"
+        [readonly]="readonly()"
+        [tools]="tools()"
+        [rows]="rows()"
+        [maxRows]="maxRows()"
+        [maxLength]="maxLength()"
+        [showCount]="showCount()"
+        [appearance]="appearance()"
+        [labels]="labels()"
+        [ngModel]="valueMap()[lang] ?? ''"
+        [ngModelOptions]="{ standalone: true }"
+        (ngModelChange)="write(lang, $event)"
+      >
+        @if (languages().length > 1) {
+          <div
+            sdsRichTextToolbarEnd
+            role="tablist"
+            class="flex items-center gap-0.5"
+            [attr.aria-label]="languageSwitcherLabel()"
+            (keydown)="onTabsKeydown($event)"
+          >
+            @for (code of languages(); track code) {
+              <button
+                type="button"
+                role="tab"
+                [attr.data-lang]="code"
+                [attr.aria-selected]="code === activeLang() ? 'true' : 'false'"
+                [attr.tabindex]="code === activeLang() ? 0 : -1"
+                [attr.title]="tabTitle(code)"
+                [disabled]="isDisabled()"
+                [class]="tabClass(code)"
+                (mousedown)="$event.preventDefault()"
+                (click)="select(code, 'editor')"
+              >
+                {{ code }}
+                <span class="inline-block h-1.5 w-1.5 rounded-full" [class]="dotClass(code)"></span>
+              </button>
+            }
+          </div>
+        }
+      </sds-rich-text-editor>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SdsRichTextEditor, selector: "sds-rich-text-editor", inputs: ["label", "ariaLabel", "placeholder", "hint", "error", "invalid", "contentLanguage", "required", "disabled", "readonly", "tools", "rows", "maxRows", "maxLength", "showCount", "appearance", "labels"] }, { kind: "directive", type: SdsRichTextToolbarEnd, selector: "[sdsRichTextToolbarEnd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLocalizedRichTextEditor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-localized-rich-text-editor',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormsModule, SdsRichTextEditor, SdsRichTextToolbarEnd],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsLocalizedRichTextEditor),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        class: 'block',
+                        '(focusout)': 'onFocusOut($event)',
+                    },
+                    template: `
+    @if (label()) {
+      <label
+        [id]="baseId + '-label'"
+        class="mb-1.5 block text-sm font-medium text-ink"
+        (click)="focus()"
+        >{{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+
+    @for (lang of languages(); track lang) {
+      <sds-rich-text-editor
+        [style.display]="lang === activeLang() ? null : 'none'"
+        [attr.data-active-language]="lang === activeLang() ? '' : null"
+        [ariaLabel]="editorName(lang)"
+        [contentLanguage]="lang"
+        [placeholder]="placeholderFor(lang)"
+        [hint]="hint()"
+        [error]="error()"
+        [invalid]="invalid()"
+        [required]="required()"
+        [disabled]="isDisabled()"
+        [readonly]="readonly()"
+        [tools]="tools()"
+        [rows]="rows()"
+        [maxRows]="maxRows()"
+        [maxLength]="maxLength()"
+        [showCount]="showCount()"
+        [appearance]="appearance()"
+        [labels]="labels()"
+        [ngModel]="valueMap()[lang] ?? ''"
+        [ngModelOptions]="{ standalone: true }"
+        (ngModelChange)="write(lang, $event)"
+      >
+        @if (languages().length > 1) {
+          <div
+            sdsRichTextToolbarEnd
+            role="tablist"
+            class="flex items-center gap-0.5"
+            [attr.aria-label]="languageSwitcherLabel()"
+            (keydown)="onTabsKeydown($event)"
+          >
+            @for (code of languages(); track code) {
+              <button
+                type="button"
+                role="tab"
+                [attr.data-lang]="code"
+                [attr.aria-selected]="code === activeLang() ? 'true' : 'false'"
+                [attr.tabindex]="code === activeLang() ? 0 : -1"
+                [attr.title]="tabTitle(code)"
+                [disabled]="isDisabled()"
+                [class]="tabClass(code)"
+                (mousedown)="$event.preventDefault()"
+                (click)="select(code, 'editor')"
+              >
+                {{ code }}
+                <span class="inline-block h-1.5 w-1.5 rounded-full" [class]="dotClass(code)"></span>
+              </button>
+            }
+          </div>
+        }
+      </sds-rich-text-editor>
+    }
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], tools: [{ type: i0.Input, args: [{ isSignal: true, alias: "tools", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }], requiredLanguageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguageLabel", required: false }] }], editors: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SdsRichTextEditor), { isSignal: true }] }] } });
+
+/*
+ * Secondary entry point `@besaitech/ng-design-system/rich-text` — the Tiptap (ProseMirror) powered
+ * rich-text editor.
+ *
+ * Kept out of the root entry for the same reason as the charts: the root is one module, so anything it
+ * exports that an app uses anywhere lands in the app's initial chunk. Importing the editor from here lets
+ * the bundler keep it, and ProseMirror, in the lazy chunk of the page that edits rich text.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SDS_RICH_TEXT_DEFAULT_TOOLS, SDS_RICH_TEXT_LABELS, SDS_RICH_TEXT_LABELS_EN, SdsLocalizedRichTextEditor, SdsRichTextEditor, SdsRichTextToolbarEnd, sdsSafeHref };
+//# sourceMappingURL=besaitech-ng-design-system-rich-text.mjs.map