@konce-pt/angular 0.8.3 → 0.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/angular",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Open-source Angular 22 component library on Signals & Signal Forms — 70+ components, rich data table, zoneless, fully tokenized. Selektory kpt-*, klasy Kpt*.",
   "license": "MIT",
   "author": "konce.pt",
@@ -46,13 +46,16 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@konce-pt/datetime": "0.8.3",
-    "@konce-pt/icons": "0.8.3",
-    "@konce-pt/i18n": "0.8.3",
-    "@konce-pt/chart": "0.8.3",
-    "@konce-pt/roadmap": "0.8.3",
-    "@konce-pt/map": "0.8.3",
-    "@konce-pt/table": "0.8.3"
+    "@konce-pt/chart": "0.8.5",
+    "@konce-pt/backdrop": "0.8.5",
+    "@konce-pt/datetime": "0.8.5",
+    "@konce-pt/chat": "0.8.5",
+    "@konce-pt/map": "0.8.5",
+    "@konce-pt/i18n": "0.8.5",
+    "@konce-pt/mention": "0.8.5",
+    "@konce-pt/table": "0.8.5",
+    "@konce-pt/roadmap": "0.8.5",
+    "@konce-pt/icons": "0.8.5"
   },
   "module": "fesm2022/konce-pt-angular.mjs",
   "typings": "types/konce-pt-angular.d.ts",
@@ -68,6 +71,10 @@
       "types": "./types/konce-pt-angular-charts.d.ts",
       "default": "./fesm2022/konce-pt-angular-charts.mjs"
     },
+    "./chat": {
+      "types": "./types/konce-pt-angular-chat.d.ts",
+      "default": "./fesm2022/konce-pt-angular-chat.mjs"
+    },
     "./grid": {
       "types": "./types/konce-pt-angular-grid.d.ts",
       "default": "./fesm2022/konce-pt-angular-grid.mjs"

package/src/lib/backdrop/llms.txt

@@ -0,0 +1,163 @@
+# KptBackdrop (kpt-backdrop)
+
+A decorative background layer for a section: the component wraps your content and paints an
+animated canvas beneath it. You reach for it where a flat surface looks unfinished, and where
+a video or a large image would cost bandwidth and refuse to follow the theme.
+Projected content sits a layer above the canvas and behaves normally.
+Import: `import { KptBackdrop } from '@konce-pt/angular';`
+
+## Inputs (shared)
+- `effect`: 'signal-grid' | 'wave' (default 'signal-grid') — the effect to draw
+- `background`: string — the section background; empty takes `--kpt-color-surface`
+- `speed`: number (default 1) — 1 is the calm pace of either effect, 0 freezes the picture
+- `seed`: number (default 0) — the same value gives the same layout and the same sway
+- `paused`: boolean — stops the animation, leaving the last frame
+- `adaptive`: boolean — carries hardcoded colours onto the current theme's surface
+
+## Inputs (signal-grid)
+- `color`: string — the square colour, any CSS notation, tokens included; empty takes
+  `--kpt-color-primary`
+- `anchor`: 'left' | 'right' (default 'right') — the edge the grid is densest at
+- `cell`: number (default 5) — the square's side in px
+- `gap`: number (default 11) — the space between squares in px
+- `density`: number (default 0.8) — the share of lit cells at the anchor, 0–1
+- `falloff`: number (default 1.4) — how fast the grid fades towards the far edge
+
+## Inputs (wave)
+- `colors`: string[] — the colour ramp the current slides along, closed into a loop; every
+  stop takes any CSS notation, `color`'s rules exactly
+- `rotation`: number (default 12) — the angle the current crosses the frame at, in degrees
+- `band`: number (default 0.34) — the band's width as a fraction of the frame's height
+- `amplitude`: number (default 0.16) — how far the centre line sways
+
+An input that does not belong to the current effect is simply not read.
+
+## Methods
+- `reseed()` — a fresh run of the effect at the same size and the same inputs
+
+## Example
+    <kpt-backdrop effect="wave" [rotation]="18" [colors]="['#5B8AF2', '#A86DF2', '#F25B9E']">
+      <h1>Build your app from the first prompt</h1>
+      <kpt-button>Get started</kpt-button>
+    </kpt-backdrop>
+
+## signal-grid
+A fine grid of squares that quietly twinkle, dense at one edge and fading to empty at the other.
+The gradient comes from **how many** squares are lit, not from opacity laid over an even grid —
+that is why it reads as a signal rather than as a texture with a mask on top.
+
+Each cell derives its own draws — whether it is lit, its twinkle phase and its rate — from its own
+column and row, so the layout survives a resize instead of reshuffling. The rates are spread over
+0.45–1.55, because at one shared rate the whole grid pulses in unison and the effect turns into
+breathing. The grid deliberately runs past the area and the overflow is clipped: a grid that stops
+before the edge looks cut off.
+
+## wave
+One soft current of light flowing across the frame, with hues sliding along it and no hard edge
+anywhere. The centre line is a sum of harmonics at incommensurable frequencies, so the current
+sways without a repeating pattern; brightness falls away from it on a Gaussian curve.
+
+`rotation` turns the whole current: 0 runs it horizontally, 90 stands it on end. `band` sets how
+wide it is, `amplitude` how much it sways — set `amplitude` to 0 and the shape stands still while
+the colours keep flowing.
+
+The ramp is closed into a loop, so the last colour returns to the first; a ramp with a seam would
+show it in the middle of the frame. Colours are mixed on the polar form of OKLab, going round the
+circle rather than across it: a straight mix of opposite hues crosses the achromatic axis and the
+current goes grey exactly where it is brightest.
+
+Without `colors` the ramp is `--kpt-color-primary` plus two hues derived from it by rotation.
+The library's palette is neutral, so that default current is single-hued and muted — the hue
+sliding only shows once you give it a real ramp.
+
+Every stop is put to the browser, so `oklch()`, `color-mix()`, `rgb()` and named colours are read
+the same as hex; alpha is dropped. A stop the browser refuses falls out of the ramp, and if every
+one of them falls out the default ramp takes over rather than the section going blank — a dev
+build says in the console which stops it dropped.
+
+## What it costs
+`wave` is computed in a buffer whose longer side is 160 px and scaled up: softness comes from the
+browser's interpolation, so a few thousand pixels a frame cover a frame of any size. It is not
+drawn at full canvas resolution.
+
+## Where the maths lives
+The grid layout, the density ramp, the twinkle, the current and the colour ramp — plus the
+renderers for both effects — live in `@konce-pt/backdrop`, plain TypeScript with its own
+`node --test` suite, shared by both ports. The component is the lifecycle around them.
+
+## Rest
+Drawing stops when there is nothing to watch: the section is off-screen (`IntersectionObserver`),
+the tab is in the background, `paused` is set, `speed` is 0, or the system asks for reduced motion
+(`prefers-reduced-motion`). What is left is a single static frame, not emptiness — the effect is
+part of the composition, not decoration.
+
+`speed` feeds the clock rather than the phase, so moving a speed slider accelerates the picture
+instead of jumping it.
+
+## Accessibility
+The canvas carries `aria-hidden="true"` and `pointer-events: none` — it is decoration with no
+content and nothing to hit. Content keeps its own roles and tab order. Under reduced motion the
+animation does not start at all.
+
+## Tokens
+`--kpt-color-primary` (squares and the default ramp), `--kpt-color-surface` (background),
+`--kpt-color-on-surface`. Overrides for a whole section without touching the inputs:
+`--kpt-backdrop-color`, `--kpt-backdrop-surface`.
+
+## Adaptive colours
+A literal stays put by design, which is right for a brand colour and wrong for a section meant to
+read in both themes. `adaptive` closes that gap: it carries `color`, `colors` and `background`
+onto the surface of the current theme, keeping each one's distance from that surface. Black picked
+for a white section comes out white on a near-black ground, and that white background comes out at
+the surface's own lightness. Only lightness moves — hue and chroma stay, so a brand colour keeps
+being that colour and only changes how light it is.
+
+It touches literals only. An empty input takes a token, and a value reaching through `var()`
+reaches a token too; both already follow the theme, and adapting them would turn them back again.
+Values written for the light theme are the assumption — the library keeps light in `:root` and
+dark as the override.
+
+## Content on a custom background
+The host paints `--kpt-color-surface` and lets content inherit `--kpt-color-on-surface`, which is
+right until the section gets a `background` of its own — then that token describes the page around
+it, not the ground the content actually sits on. A dark section in a light theme would come out
+black on black.
+
+So a section with its own background works out its own ink: the host sets `color` to match what it
+paints, and announces the result as `data-tone` (`light` for a light background, `dark` for a dark
+one). Text follows by inheritance; anything needing more than a text colour — buttons in the
+section, say — can hang its own tokens off the attribute:
+
+    :where(kpt-backdrop[data-tone='light']) .hero { --kpt-button-filled-bg: #15181a; }
+
+The tone is computed from the background the section really paints, so with `adaptive` on it
+matches the adapted value, not the one written in the template. A section without its own
+background announces nothing and content stays on `--kpt-color-on-surface`.
+
+## Theme
+Canvas does not expand `var()`, so the colour is read once and baked into the renderer — the
+component therefore watches for anything that can restyle the tokens under it and reads them
+again. `[data-theme="dark"]` is not tied to `:root`, so the watch covers `data-theme`, `class`
+and `style` on every ancestor from the host up to `<html>`, plus the `prefers-color-scheme` query
+for an application that keeps its dark tokens in a media query. A runtime override of
+`--kpt-color-primary` is picked up the same way as a theme switch. The renderer is rebuilt only
+when the colour actually came out different, so an unrelated class landing on `<html>` costs one
+cheap read and nothing else.
+
+Whether an explicit `color` or `colors` follows the theme is up to how it is written. A literal
+stays put — `#5b8af2` is `#5b8af2` in either theme, which is what someone spelling out a brand
+colour wants. An expression reaching for a token is resolved against the tree on every rebuild, so
+it moves with the theme on its own:
+
+    <kpt-backdrop color="color-mix(in oklab, #5b8af2, var(--kpt-color-surface) 30%)">
+
+`var(--kpt-color-primary)` works the same way. A name that resolves to nothing falls back to the
+token for `color`, and drops out of the ramp for `colors`.
+
+## Contrast
+The palette is neutral, so `--kpt-color-primary` is near-black on a light surface and near-white
+on a dark one — at the default density the picture is strong, and text laid over the dense half
+loses its reading. Keep the copy on the side the grid fades towards (that is what `anchor` is
+for), or drop `density`. `wave` is brightest along its centre line, so the same rule applies
+through `rotation` and `band`. On a custom `background` give the colours a muted shade:
+a full-strength colour behind text costs the reading, not the effect.

package/src/lib/chip/llms.txt

@@ -4,11 +4,19 @@ A chip / tag — a label, optionally removable. Import: `import { KptChip } from
 
 ## Inputs / outputs
 - `variant`: 'neutral'|'primary'|'success'|'danger'|'warning'|'info'
+- `textTransform`: 'none'|'capitalize'|'uppercase'|'lowercase' (default 'none') — the label's letter case
 - `removable`: boolean (a × button); `disabled`: boolean; `removed`: output<void>
 
 ## Examples
     <kpt-chip>Angular</kpt-chip>
     <kpt-chip variant="success" removable (removed)="onRemove()">UI</kpt-chip>
+    <kpt-chip textTransform="capitalize">new · starter kit</kpt-chip>
+
+## Letter case
+`textTransform` sets `text-transform` on the chip, so the label can stay in the application's own
+wording while the chip decides how it is displayed. `capitalize` raises the first letter of every
+word — **including after a hyphen** ("Agent-Ready"), because CSS does not know where a compound
+word ends. For labels with a hyphen, spelling it out in the content is the exact route.
 
 ## Tokens
 A color-mix background over the variant, `--kpt-color-muted` (neutral).

package/src/lib/data-view/llms.txt

@@ -7,12 +7,28 @@ Import: `import { KptDataView } from '@konce-pt/angular';`
 ## Inputs / model
 - `items`: T[]
 - `layout`: model<'list' | 'grid'> (the toggle in the bar)
-- `pageSize`: number (0 = no pagination); `paginated`: boolean
+- `pageSize`: model<number> (0 = no pagination) — two-way, because the paginator's select writes to it
+- `pageSizeOptions`: number[] (empty = the select offers the current size only)
+- `gridColumns`: model<number> (0 = as many as fit) — two-way, the density bar writes to it
+- `gridColumnsOptions`: number[] (fewer than two = no density bar)
+- `gridMinWidth`: string (default `10rem`) — the narrowest card worth rendering
+- `paginated`: boolean
 
 ## Example
-    <kpt-data-view [items]="products" [pageSize]="6">
+    <kpt-data-view [items]="products" [(pageSize)]="size" [pageSizeOptions]="[3, 6, 9]">
       <ng-template let-p><div>{{ p.name }}</div></ng-template>
     </kpt-data-view>
 
+## The column count is a ceiling
+`gridColumns` caps the grid, it does not pin it: the track minimum grows to the width of one of
+N columns, so a narrow container drops to two or one column instead of squeezing cards below
+`gridMinWidth`. Set `gridColumns` to one of `gridColumnsOptions` — with a value outside the list
+no density button reads as active.
+
+## The pager stays while there is a choice
+It shows up when the items outgrow one page, and also when `pageSizeOptions` holds more than one
+size. Otherwise picking the largest size would hide the very select that was just used, with no
+way back to a smaller one.
+
 ## Tokens
 Item cards `--kpt-color-surface-raised`; the toggle `--kpt-color-primary`.

package/src/lib/icon-button/llms.txt

@@ -7,6 +7,7 @@ Import: `import { KptIconButton } from '@konce-pt/angular';`
 - `variant`: 'filled'|'tonal'|'outline'|'text'|'danger'; `size`: 'sm'|'md'|'lg'; `shape`: 'round'|'square'
 - `type`, `disabled`, `loading`, `ariaLabel` (required)
 - `ariaPressed`: `boolean | null` = `null` — toggle state; lands on the inner `<button>`, so a screen reader announces it (`[attr.aria-pressed]` on the tag would sit on the host, which has no button role)
+- `ariaExpanded`: `boolean | null` = `null` — disclosure state for a button that opens a panel; lands on the inner `<button>` for the same reason
 
 ## Examples
     <kpt-icon-button ariaLabel="Settings"><kpt-icon name="menu" /></kpt-icon-button>

package/src/lib/mention/llms.txt

@@ -0,0 +1,60 @@
+# KptMention (kpt-mention) / KptMentions (kpt-mentions)
+
+Mentions in text: `@someone` as an element you can hover to see a peek card with the rest of the
+connections. `kpt-mention` is a single mention; `kpt-mentions` turns a whole paragraph into text
+plus mentions.
+Requires `import '@angular/cdk/overlay-prebuilt.css';` (the card runs on `kpt-peek`)
+Import: `import { KptMention, KptMentions } from '@konce-pt/angular';`
+
+## KptMention — inputs
+- `item`: `KptMentionItem` — the whole entry at once; the single inputs below win over it
+- `id`, `label`, `kind`: string — `kind` lands in `data-kind`, so it can be styled per type
+- `prefix`: string (default '@') — an empty string leaves the bare name
+- `href`: string | null — with it the mention is a link, without it a button opening the card
+- `placement`, `openDelay` — passed to `kpt-peek`
+- `disabled`: boolean — no card; the mention stays a plain highlighted word
+- projected content = the card
+
+## KptMentions — inputs
+- `text`: string — the content with `@id` or `@[Name with spaces](id)`
+- `items`: `readonly KptMentionItem[]` — entries the ids resolve against
+- `prefix`, `placement` — passed to every mention
+- an `<ng-template>` inside = the card; its context is the item as `$implicit` plus `id` and `label`
+
+## Example
+    <kpt-mentions [text]="note" [items]="people">
+      <ng-template let-item let-label="label">
+        <kpt-card>{{ item?.data?.role ?? label }}</kpt-card>
+      </ng-template>
+    </kpt-mentions>
+
+## The text stays text
+`kpt-mentions` does not render HTML: the paragraph goes in as a plain string, `parseMentionText()`
+from `@konce-pt/mention` splits it into segments and the mention is an element the library builds
+itself. An application does not have to push user-written content through a sanitizer to get
+mentions out of it.
+
+An id that is not on the list still renders — the label falls back to the id, because a note has to
+stay readable after someone leaves the team. Without a card template the mention is a highlighted
+word, not a button: there is nothing to open, so it does not pretend otherwise.
+
+## The id is what is stored
+`id` survives a rename, the label does not — that is why the text carries the id and the name comes
+from `items`. `@[Anna Kowalska](anna.k)` is the only way to write a name with spaces, and even then
+the list wins over the label written into the text: data is usually fresher than a note from last
+month.
+
+## Mentions in the editor
+`kpt-rich-text` has `mentions`, `mentionLimit` and `(mentioned)`: typing `@` opens the suggestion
+list, arrows and Enter (or Tab) insert the mention as
+`<span class="kpt-mention" data-mention="id" contenteditable="false">`. The id survives saving,
+and `contenteditable="false"` keeps the mention in one piece — without it the caret would walk into
+the middle of a surname.
+
+## Tokens
+The mention is underlined with a **dotted** line: `--kpt-color-primary-border` at rest, darkening
+to `--kpt-color-primary` on hover and while the card is open. Dotted, not solid — a solid underline
+would read as a link, and a mention usually leads nowhere, it opens a card. Text
+`--kpt-color-primary`; a mention without a card `--kpt-color-text` + `--kpt-font-weight-medium` and
+no line at all, since there is nothing to promise. Focus ring `--kpt-color-focus-ring`. The card
+takes its own tokens from `kpt-peek`.

package/src/lib/order-list/llms.txt

@@ -1,17 +1,28 @@
 # KptOrderList (kpt-order-list)
 
-A list with manual reordering (up/down). Select an item and move it with the buttons.
+A list with manual reordering (up/down). Select an item and move it with the buttons, or turn on
+`dragdrop` and drag it into place.
 The item template comes through projection: `<ng-template let-item>`.
 Import: `import { KptOrderList } from '@konce-pt/angular';`
 
 ## Inputs / model
 - `items`: model<T[]> (two-way — returns the new order)
 - `header`: string
+- `dragdrop`: boolean, default false — enables dragging (opt-in, nothing changes without it)
 
 ## Example
-    <kpt-order-list [(items)]="tasks" header="Order">
+    <kpt-order-list [(items)]="tasks" header="Order" dragdrop>
       <ng-template let-item>{{ item.name }}</ng-template>
     </kpt-order-list>
 
+## Where a dragged item lands
+Dropping onto a row puts the dragged item at that row's position and everything else shifts, while
+the buttons keep swapping with the neighbour. Dropping on the empty part of the list appends at the
+end. Either way the selection follows the item, so the next button press moves the same entry.
+
 ## Tokens
 Selection `--kpt-color-primary`; buttons `--kpt-color-surface-raised`.
+
+## Accessibility
+Native HTML5 drag and drop has no keyboard equivalent, so the up/down buttons stay the full keyboard
+path — `dragdrop` adds to them, it never replaces them.

package/src/lib/peek/llms.txt

@@ -0,0 +1,45 @@
+# KptPeek (kpt-peek)
+
+A peek card — content tied to what you are looking at, shown without leaving the text. Hover opens
+it, the card itself is interactive (links, buttons), and a click pins it.
+Requires `import '@angular/cdk/overlay-prebuilt.css';`
+Import: `import { KptPeek, KptPeekTrigger } from '@konce-pt/angular';`
+
+## Slots
+- the element carrying the `kptPeekTrigger` attribute = the trigger; everything else = the card
+
+## Inputs / outputs
+- `placement`: 'top' | 'bottom' (default 'bottom') — CDK flips it when there is no room
+- `openDelay`: number (default 300) — the wait before hover opens the card
+- `closeDelay`: number (default 200) — the wait before leaving the trigger closes it
+- `disabled`: boolean — the card never opens; the trigger stays a plain link or button
+- `label`: string — the card's accessible name; without it the trigger's text is used
+- `(opened)`, `(closed)` → `void` — the moment to fetch the card's data
+
+## Example
+    <kpt-peek>
+      <a kptPeekTrigger href="/people/anna">@Anna Kowalska</a>
+      <kpt-card>Profile, projects, contact…</kpt-card>
+    </kpt-peek>
+
+## Which of the three
+`kptTooltip` carries plain text and cannot be clicked (`pointer-events: none`), so a link inside it
+is unreachable. `kpt-popover` opens on click and puts a backdrop over the page, so it is a small
+modal. `kpt-peek` sits between them: it opens on hover, the card is interactive, and nothing is
+covered.
+
+## Hover is not the only way in
+Hover opens after `openDelay` and leaving closes after `closeDelay` — the pointer needs time to
+travel from the trigger to the card, so entering the card cancels the close. Focus opens it with no
+delay (a keyboard does not sweep across elements by accident). A click, Enter or a tap **pins** the
+card: it stays after the pointer leaves and focus moves inside it. That is the only route to the
+card's content where there is no hover at all, so interactive content stays reachable on touch and
+from the keyboard. Escape closes it and hands focus back to the trigger; so does a click outside.
+
+## Accessibility
+The trigger keeps its own role (a link stays a link) and carries `aria-expanded` plus
+`aria-controls` while the card is open. The card is `role="dialog"` with a name from `label` or
+the trigger's text. It is not a focus trap — the card is not modal and the page stays usable.
+
+## Tokens
+`--kpt-color-surface-raised`, `--kpt-color-border`, `--kpt-elevation-3`, `--kpt-color-focus-ring`.

package/src/lib/pick-list/llms.txt

@@ -1,17 +1,33 @@
 # KptPickList (kpt-pick-list)
 
-Transfers items between two lists (source and target). Select and move them (one at a time or all).
+Transfers items between two lists (source and target). Select and move them (one at a time or all),
+double-click a row to send it across, or turn on `dragdrop` and drag it.
 The item template comes through projection: `<ng-template let-item>`.
 Import: `import { KptPickList } from '@konce-pt/angular';`
 
 ## Inputs / model
 - `source`: model<T[]>; `target`: model<T[]> (both two-way)
 - `sourceHeader`/`targetHeader`: string
+- `dragdrop`: boolean, default false — enables dragging (opt-in, nothing changes without it)
 
 ## Example
-    <kpt-pick-list [(source)]="available" [(target)]="selected" sourceHeader="Available" targetHeader="Selected">
+    <kpt-pick-list [(source)]="available" [(target)]="selected" sourceHeader="Available" targetHeader="Selected" dragdrop>
       <ng-template let-item>{{ item.name }}</ng-template>
     </kpt-pick-list>
 
+## A double-click moves one item
+It sends exactly the row you clicked to the other panel and appends it at the end, whatever else is
+selected. It does not need `dragdrop` — the two clicks underneath cancel each other out, so the rest
+of the selection is left alone.
+
+## Where a dragged item lands
+Dropping onto a row puts the dragged item at that row's position: inside one panel that reorders,
+across panels it transfers. Dropping on the empty part of a panel appends at the end. An item that
+leaves a panel also leaves that panel's selection.
+
 ## Tokens
 Selection `--kpt-color-primary`; headers `--kpt-color-surface-variant`.
+
+## Accessibility
+Native HTML5 drag and drop has no keyboard equivalent, so the four move buttons stay the full
+keyboard path — `dragdrop` adds to them, it never replaces them.

package/src/lib/rich-text/llms.txt

@@ -12,6 +12,21 @@ Import: `import { KptRichText, KptRichTool, KptRichToolbar } from '@konce-pt/ang
 - `placeholder`: string; `disabled`/`invalid`/`touched`: boolean; `touch`: output
 - `maxListLevel`: number = 6 — the maximum list nesting depth. The limit applies to interaction
   (Tab and the `indent`/`outdent` tools); pasted content is not flattened, so that no data is lost.
+- `mentions`: `readonly KptMentionItem[]` — suggestions for `@`; an empty list turns the mechanism
+  off, so `@` stays an ordinary character. `mentionLimit`: number = 8; `(mentioned)` fires with the
+  inserted entry — the moment to notify a person or attach a link.
+
+## Mentions (`@`)
+With `mentions` set, typing `@` opens a suggestion list anchored at the caret: arrows move through
+it, Enter or Tab inserts, Escape closes. The query is read from the **text node** at the caret, not
+from the HTML, and recognised by `mentionQuery()` from `@konce-pt/mention` — the same rules as in a
+plain text field.
+
+An inserted mention is `<span class="kpt-mention" data-mention="id" contenteditable="false">@Name`
+plus a non-breaking space. The id survives a rename and the round trip through the value;
+`contenteditable="false"` keeps the mention in one piece, and the space is what gives the caret a
+place to stand after a block it cannot enter. Both attributes are on the sanitizer's allowlist —
+they are inert, so they open no new door.
 
 ## Tools (KptRichTool)
 - Clipboard: `copy`, `paste` (with formatting, sanitized), `pasteText` (without formatting)