@h-k-dev/angular-email-editor 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@h-k-dev/angular-email-editor",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "An email editor for Angular on ProseMirror — a visual composer and an HTML source editor over one schema that is the vocabulary of email HTML.",
   "license": "MIT",
   "author": "h-k-dev",

package/types/h-k-dev-angular-email-editor-address-chip.d.ts

@@ -57,6 +57,12 @@ declare class AddressChipRemove {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AddressChipRemove, "ng-template[emailAddressChipRemove]", never, {}, {}, never, never, true, never>;
 }
 
+/** The drag data type that carries a chip's address between address
+    inputs — one entry, in header form, exactly as the list holds it. It is
+    the only thing a chip's drag carries: no plain text, so no text field,
+    editor or page drop zone can take it — a chip lands in an address input
+    or nowhere. */
+declare const ADDRESS_DRAG_TYPE = "application/x-email-address";
 /**
  * One address as a chip, the way Gmail draws it: the display name when the
  * mailbox has one, the address otherwise, and the whole header form in the
@@ -87,7 +93,20 @@ declare class AddressChipRemove {
  * to the clipboard, mouse or touch alike; a release or a drag before that
  * does not, and the browser's own context menu stays away. The chip shows
  * and says "Copied" for a moment (`data-copied`, a live `status` slot) and
- * emits `copied`.
+ * emits `copied`. A list that copies the chip itself — the address input
+ * on Ctrl+C or Cmd+C — shows the same through `showCopied()`.
+ *
+ * **Drag, when asked.** Marked `draggable`, the chip can be dragged — by a
+ * mouse or a pen; a touch keeps the press for the hold, so a phone's
+ * long-press never lifts the chip instead of copying it. The drag carries
+ * the header form as `ADDRESS_DRAG_TYPE` and nothing else — no text for
+ * another field to take — allows copy and move, and cancels a hold in progress: the browser starts a drag only
+ * once the press has moved, so the two gestures never both happen. A drag
+ * from the remove control is no drag. What travels under the pointer is
+ * the chip as a pill, whole — a copy with room around it, so no engine
+ * clips its edge or a ring it wears. `data-dragging` marks the chip while
+ * it is in flight. Where the drag lands, and whether the chip leaves its
+ * list, is the list's business — the address input does both.
  *
  * **It asks, it does not do.** The chip holds no list: `removed` is a
  * request the host answers by dropping the address. The address input
@@ -143,6 +162,18 @@ declare class AddressChip {
     /** The address was just copied: shown for a moment, and said. Reflected
         as `data-copied`. */
     protected readonly justCopied: _angular_core.WritableSignal<boolean>;
+    /** What the `status` slot says for a moment — a copy, or a list's
+        `announce()`. */
+    protected readonly status: _angular_core.WritableSignal<string>;
+    /** The chip may be dragged — to another address input, or as text into
+        any field. Off by default: a chip on its own has no list to leave; the
+        address input turns it on for an editable list. Reflected as
+        `draggable` for a mouse or pen, never for a touch. */
+    readonly draggable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The last press was a touch: no drag, so the press stays the hold's. */
+    protected readonly touching: _angular_core.WritableSignal<boolean>;
+    /** The chip is being dragged. Reflected as `data-dragging`. */
+    protected readonly dragging: _angular_core.WritableSignal<boolean>;
     constructor();
     /** A press begins a hold — a primary pointer, mouse or touch alike, on
         the chip itself and not its remove control. */
@@ -151,18 +182,28 @@ declare class AddressChip {
     protected onPointermove(event: PointerEvent): void;
     /** Released, cancelled or gone before the time: no copy. */
     protected cancelHold(): void;
+    /** A drag begins: the address goes along in header form, as the
+        library's own type only, and a hold in progress is over.
+        Not from the remove control. */
+    protected onDragstart(event: DragEvent): void;
     /** The hold is the chip's, not the browser's: no context menu on it, on
         a phone or under a right button. */
     protected onContextmenu(event: Event): void;
-    /** Writes the address to the clipboard: the async API first, and when
-        it refuses — an unfocused document, a context without it — the old
-        copy command on a selection made for the purpose. */
     /** Copies the address, in header form, to the clipboard — what a hold
         does, and what a host's own control may ask for — and shows and says
         so. The async API first; when it refuses (an unfocused document, a
         context without it), the old copy command on a selection made for the
         purpose. Resolves to whether the copy went. */
     copy(): Promise<boolean>;
+    /** Shows and says, for a moment, that the address is on the clipboard,
+        and emits `copied` — what a copy does once the clipboard has it. For a
+        list that put it there itself: the address input's Ctrl+C, which
+        writes the clipboard in the copy event, synchronously. */
+    showCopied(): void;
+    /** Says something about the chip through its `status` slot, for a
+        moment — what a copy says, and what a list says of a chip it just
+        received ("Moved to Cc: …"). */
+    announce(message: string): void;
     /** A remove template handed down by a list that renders the chip — the
         address input passes its own `emailAddressChipRemove` slot here. One
         in the chip's own content wins. */
@@ -186,8 +227,8 @@ declare class AddressChip {
     protected readonly note: _angular_core.Signal<string | null>;
     protected readonly title: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AddressChip, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AddressChip, "[email-address-chip]", never, { "address": { "alias": "address"; "required": true; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "ariaCurrent": { "alias": "aria-current"; "required": false; "isSignal": true; }; "removeTabbable": { "alias": "removeTabbable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "invalidLabel": { "alias": "invalidLabel"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; "isSignal": true; }; "holdDelay": { "alias": "holdDelay"; "required": false; "isSignal": true; }; "copiedLabel": { "alias": "copiedLabel"; "required": false; "isSignal": true; }; "removeTemplate": { "alias": "removeTemplate"; "required": false; "isSignal": true; }; }, { "removed": "removed"; "copied": "copied"; }, ["removeSlot"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AddressChip, "[email-address-chip]", never, { "address": { "alias": "address"; "required": true; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "ariaCurrent": { "alias": "aria-current"; "required": false; "isSignal": true; }; "removeTabbable": { "alias": "removeTabbable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "invalidLabel": { "alias": "invalidLabel"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; "isSignal": true; }; "holdDelay": { "alias": "holdDelay"; "required": false; "isSignal": true; }; "copiedLabel": { "alias": "copiedLabel"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "removeTemplate": { "alias": "removeTemplate"; "required": false; "isSignal": true; }; }, { "removed": "removed"; "copied": "copied"; }, ["removeSlot"], never, true, never>;
 }
 
-export { AddressChip, AddressChipRemove };
+export { ADDRESS_DRAG_TYPE, AddressChip, AddressChipRemove };
 export type { AddressChipRemoveContext };

package/types/h-k-dev-angular-email-editor-address-input.d.ts

@@ -26,6 +26,14 @@ declare class AddressInputLabel {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AddressInputLabel, "ng-template[emailAddressLabel]", never, {}, {}, never, never, true, never>;
 }
 
+/** Where a drag over an input would land — the index in its list — and the
+    line drawn there, in the chip list's own coordinates. */
+interface DropMarker {
+    index: number;
+    x: number;
+    y: number;
+    height: number;
+}
 /**
  * An address field the way Gmail's works: committed addresses as chips,
  * free typing after them. Enter, comma, semicolon or a paste commits what
@@ -62,7 +70,9 @@ declare class AddressInputLabel {
  * the caret at the start of the typing, ← puts a highlight on the last chip
  * and walks back along the list; → walks forward, and past the last chip
  * returns to the caret. Enter or F2 — or a double click on
- * any chip — edits it,
+ * any chip — edits it, Alt+← and Alt+→ move it a place along the list,
+ * Ctrl+C (Cmd+C) copies it, as a hold does, and Ctrl+X cuts it — unless
+ * text is selected in the input, which copies as ever —
  * Backspace or Delete removes it, Escape drops the highlight, and so does
  * typing. A click on a chip highlights it. Reaching a chip either way is
  * being done with the typing: an address in the input becomes a chip first,
@@ -114,6 +124,32 @@ declare class AddressInputLabel {
  * the input, and the selection with it — focus leaving the control clears
  * the selection.
  *
+ * **Chips move between inputs by drag and drop.** A chip of an editable
+ * input can be dragged to another — To into Cc, as Gmail and Outlook do —
+ * and leaves its own list when the other takes it. The other commits it
+ * as it was, flagged or pending alike. A chip whose address the other
+ * already holds is absorbed, as Gmail does: it leaves its list and the
+ * other keeps its own entry. A full list (From holds one) refuses the
+ * drop, and the chip stays. Dropped in its own list, a chip is reordered:
+ * it moves to the line; the line is not drawn where the chip already is. Alt (Option), or Ctrl, makes
+ * it a copy — onto a duplicate, a copy is nothing, so refused. Nothing
+ * moves while a drag is over a target: a thin line between its chips
+ * (`drop-marker`) shows where the chip will land, before or after the chip
+ * under the pointer, and the drop puts it there; the host carries
+ * `data-dropping` meanwhile. Only chips are places: a draft — typed in the
+ * input, or left at the end of the list when the row lost focus — is not,
+ * and a drop lands before it.
+ * A drop counts as working both fields: each is touched.
+ * A chip lands in an address input or nowhere: it carries no plain text,
+ * so a subject line or an editor can't take it. `emailAddressDragGroup` on
+ * the element around a writer's rows keeps its chips among them. Plain text
+ * dropped from elsewhere is a paste — the addresses become chips, the rest
+ * is left typed.
+ * `moveTo()` is the same move for the keyboard — a host's "Move to Cc" —
+ * and the moved chip says so (`movedLabel`). A touch is never a drag: on
+ * a phone the press is the chip's hold-to-copy. `allowDrag` turns it off;
+ * a disabled or read-only input is neither source nor target.
+ *
  * **The chips' remove control is a template slot.** An
  * `ng-template[emailAddressChipRemove]` in the input's content is handed to
  * every chip it renders, in place of the default × button.
@@ -155,6 +191,13 @@ declare class AddressInput implements FormValueControl<string[]> {
     readonly invalidLabel: _angular_core.InputSignal<string>;
     /** The chips' note on a placeholder a template fills in later. */
     readonly pendingLabel: _angular_core.InputSignal<string>;
+    /** What a chip moved into this input says, before its address — a host
+        with labelled rows says where: "Moved to Cc:". */
+    readonly movedLabel: _angular_core.InputSignal<string>;
+    /** Chips may be dragged out of this input and dropped into it. Set false
+        for a row that only shows; a disabled or read-only input never takes
+        part either way. */
+    readonly allowDrag: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** The input's `name` attribute; the directive derives one from the path. */
     readonly name: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -177,6 +220,8 @@ declare class AddressInput implements FormValueControl<string[]> {
     /** The host's remove template, passed on to every chip. */
     protected readonly removeSlot: _angular_core.Signal<AddressChipRemove | undefined>;
     protected readonly field: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    /** The list of chips, where a press on a draggable chip parks focus. */
+    protected readonly chipList: _angular_core.Signal<ElementRef<HTMLElement>>;
     /** Focus is somewhere in the control — the input or a chip's remove
         button. The chips are chips only then. Read-only; for a host's own
         frame (a form field whose label floats on it). */
@@ -209,6 +254,15 @@ declare class AddressInput implements FormValueControl<string[]> {
     /** Nothing may change: disabled or read-only. Chips lose their remove
         button, the input is out of play. */
     protected readonly locked: _angular_core.Signal<boolean>;
+    /** Chips can be dragged out of the list, and dropped into it. */
+    protected readonly canDrag: _angular_core.Signal<boolean>;
+    /** Where a drag over the input would land: the index in the list, and
+        the line drawn there — in the chip list's own coordinates. Null while
+        no drag the input would take is over it. Drawn on top, out of the
+        flow, so nothing moves under the pointer. */
+    protected readonly dropMarker: _angular_core.WritableSignal<DropMarker | null>;
+    /** A drag the input would take is over it. */
+    protected readonly dropping: _angular_core.Signal<boolean>;
     /** Invalid *and* touched — the moment the state becomes the user's business. */
     protected readonly flagged: _angular_core.Signal<boolean>;
     /** Splits a run into addresses and adds the new ones to the end of the
@@ -246,7 +300,12 @@ declare class AddressInput implements FormValueControl<string[]> {
         its button, the gap between — leaves the caret where it is. The
         browser would otherwise move focus to the body for the press and back
         on the click, and in that instant the row would drop to text and
-        reflow: a flash, and a blur that commits and touches for nothing. */
+        reflow: a flash, and a blur that commits and touches for nothing.
+        Except a mouse's press on a draggable chip: no engine starts a drag
+        from a press whose default was declined, so it keeps it, and the
+        press's focus lands on the chip list instead (`tabindex="-1"`) —
+        still inside the control, so nothing commits; the click or the drag's
+        end brings the caret back. */
     protected keepCaret(event: MouseEvent): void;
     /** A click on a chip — not on its remove control — picks it, and only
         that: a click on the picked chip picks it again. The caret is in the
@@ -259,13 +318,51 @@ declare class AddressInput implements FormValueControl<string[]> {
         clipboard, as a hold on the chip does; the chip shows and says so.
         Resolves to whether the copy went. */
     copy(address?: string | null): Promise<boolean>;
+    /** Moves a chip — the picked one by default — to another address input:
+        the keyboard's way to do what a drag does, for a host's own "Move to
+        Cc". The target takes it as it is, to the end of its list — before
+        a draft the row was left with — and it
+        leaves this one; both are touched, and the moved chip says so
+        (`movedLabel`). One the target already holds is absorbed: it leaves
+        here, and the target keeps its own entry. A full target, or either
+        input locked, moves nothing. Returns whether it moved. */
+    moveTo(target: AddressInput, address?: string | null): boolean;
+    /** A chip of this list started a drag: remember it, so a target on the
+        page can judge the drop before it happens and tell this list to let
+        go after. */
+    protected onChipDragstart(address: string): void;
+    /** The drag ended: if an address input took the chip as a move, it
+        leaves — through `remove()`, as the × takes it — and the field is
+        touched. The press parked focus on the list; the caret comes back. */
+    protected onChipDragend(): void;
+    protected onDragover(event: DragEvent): void;
+    /** Leaving for somewhere outside the control: the drag is no longer over
+        it. (A leave with nowhere named — some engines — ends it too; the
+        next `dragover` inside brings it back.) */
+    protected onDragleave(event: DragEvent): void;
+    /** The drop: a chip is committed as it was; plain text from elsewhere is
+        a paste — its addresses become chips, the rest joins the typing. What
+        was typed stays. A chip the list holds already is absorbed by a move:
+        nothing is added, and the source lets it go. Nothing added otherwise
+        (the limit) is no drop: the source keeps its chip. */
+    protected onDrop(event: DragEvent): void;
     protected onFocusin(): void;
     protected onInput(input: HTMLInputElement): void;
     protected onKeydown(event: KeyboardEvent, input: HTMLInputElement): void;
     /** A paste of several addresses: the addresses become chips, the rest
         joins what the input already holds. A single token is left to the
-        input, so a name with spaces can still be edited before it commits. */
+        input, so a name with spaces can still be edited before it commits —
+        but a chip's own copy (Ctrl+C, Ctrl+X, a hold) comes back as a chip,
+        as it was. With a chip picked, what is pasted goes right after it. */
     protected onPaste(event: ClipboardEvent, input: HTMLInputElement): void;
+    /** Ctrl+C or Ctrl+X (Cmd on a Mac, or the Edit menu) with a chip picked
+        and no text selected: the chip goes on the clipboard — its header
+        form, as text and as the library's own type, so a paste into an
+        address input brings it back as a chip — and shows and says so, as a
+        hold does. A cut then removes it, as the × would. */
+    protected onClipboard(event: ClipboardEvent, input: HTMLInputElement, cut: boolean): void;
+    /** A chip's hold copied it: remembered, so a paste of it is a chip. */
+    protected onChipCopied(address: string): void;
     /** Focus arrived in the input: the typos at the end of the list come back
         into it, to be fixed — unless the user is already typing there. They
         come back as plain typing, not flagged: the caret is on them, and the
@@ -278,7 +375,7 @@ declare class AddressInput implements FormValueControl<string[]> {
     protected onBlur(event: FocusEvent, input: HTMLInputElement): void;
     protected onFocusout(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AddressInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AddressInput, "[email-address-input]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "invalidLabel": { "alias": "invalidLabel"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, ["labelSlot", "removeSlot"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AddressInput, "[email-address-input]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "invalidLabel": { "alias": "invalidLabel"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; "movedLabel": { "alias": "movedLabel"; "required": false; "isSignal": true; }; "allowDrag": { "alias": "allowDrag"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, ["labelSlot", "removeSlot"], never, true, never>;
 }
 
 /** The error kinds `addressList` reports, for a host that switches on them. */
@@ -324,5 +421,29 @@ interface AddressListOptions {
  */
 declare function addressList<TPathKind extends PathKind = PathKind.Root>(path: SchemaPath<string[], SchemaPathRules.Supported, TPathKind>, options?: AddressListOptions): void;
 
-export { ADDRESS_LIST_EMPTY, ADDRESS_LIST_INVALID, ADDRESS_LIST_TOO_MANY, AddressInput, AddressInputLabel, addressList };
+/**
+ * Scopes chip drag and drop to the address inputs inside it: they trade
+ * chips with each other and refuse anyone else's — a writer's From, To, Cc
+ * and Bcc, and not the rows of another writer on the same page. Put it on
+ * whatever holds the rows:
+ *
+ *     <form emailAddressDragGroup [formRoot]="envelope">
+ *       <div email-address-input [formField]="envelope.from" limit="1"></div>
+ *       <div email-address-input [formField]="envelope.to"></div>
+ *       …
+ *     </form>
+ *
+ * The nearest group around an input is its group. Inputs in no group make
+ * up one group of their own, so a page with a single writer needs none.
+ * Behaviour only: it renders nothing and sets no attribute.
+ *
+ * A chip lands in an address input or nowhere — it carries no plain text,
+ * so a subject line, an editor or any other field leaves it alone.
+ */
+declare class AddressDragGroup {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AddressDragGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AddressDragGroup, "[emailAddressDragGroup]", ["emailAddressDragGroup"], {}, {}, never, never, true, never>;
+}
+
+export { ADDRESS_LIST_EMPTY, ADDRESS_LIST_INVALID, ADDRESS_LIST_TOO_MANY, AddressDragGroup, AddressInput, AddressInputLabel, addressList };
 export type { AddressListOptions };

package/types/h-k-dev-angular-email-editor-focus.d.ts

@@ -24,6 +24,12 @@ declare const KEEP_FOCUS_EXCEPT = "input, textarea, select, [contenteditable]:no
  *
  * It needs no editor: what keeps focus is whichever element has it, so the
  * same directive serves a composer's address rows.
+ *
+ * A press on something marked `draggable="true"` — an address chip that
+ * can be dragged to another row — is always left alone, exceptions or not:
+ * no engine starts a drag from a press whose default was declined. Such an
+ * element keeps focus in its own way (the address input parks it on its
+ * chip list).
  */
 declare class KeepFocus {
     #private;

package/types/h-k-dev-angular-email-editor.d.ts

@@ -2042,6 +2042,8 @@ declare const Image: _h_k_dev_angular_email_editor.NodeExtension;
     not text, so it is exempt from the dual-contrast rule. */
 declare const Divider: _h_k_dev_angular_email_editor.NodeExtension;
 
+/** The default button's fill — the primary blue — and the text on it. */
+declare const BUTTON_FILL = "rgb(26, 115, 232)";
 /** The button's canonical styling — the *border-based* bulletproof button:
     the touch target (≥ 44px tall, per the ledger) comes from borders in the
     background colour, not from padding, because Outlook's Word engine ignores
@@ -2054,8 +2056,6 @@ declare const Divider: _h_k_dev_angular_email_editor.NodeExtension;
     rgb to stay stable. The label's weight and slant are the button's
     own (`bold`, `italic`): this is a default button's. */
 declare const BUTTON_STYLE: string;
-/** The default button's fill — the primary blue — and the text on it. */
-declare const BUTTON_FILL = "rgb(26, 115, 232)";
 /** The canonical style of a button with that label styling and fill: bold
     is `font-weight: bold` and not bold `normal` (said, never left out — a
     client's own anchor styling may be bold); italic adds `font-style`