@nectary/components 5.18.3 → 5.19.0

package/bundle.js

@@ -1070,23 +1070,30 @@ class CodeTag extends NectaryElement {
   }
 }
 defineCustomElement("sinch-code-tag", CodeTag);
-const templateHTML$14 = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
+const templateHTML$14 = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}</style><a referrerpolicy="no-referer"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
 const template$14 = document.createElement("template");
 template$14.innerHTML = templateHTML$14;
 class Link extends NectaryElement {
   #$anchor;
   #$text;
+  #$button;
+  #$buttonText;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template$14.content.cloneNode(true));
     this.#$anchor = shadowRoot.querySelector("a");
     this.#$text = shadowRoot.querySelector("#content");
+    this.#$button = shadowRoot.querySelector("button");
+    this.#$buttonText = shadowRoot.querySelector("#button-content");
   }
   connectedCallback() {
     this.#$anchor.addEventListener("click", this.#onAnchorClick);
     this.#$anchor.addEventListener("focus", this.#onAnchorFocus);
     this.#$anchor.addEventListener("blur", this.#onAnchorBlur);
+    this.#$button.addEventListener("click", this.#onButtonClick);
+    this.#$button.addEventListener("focus", this.#onAnchorFocus);
+    this.#$button.addEventListener("blur", this.#onAnchorBlur);
     this.addEventListener("-click", this.#onClickReactHandler);
     this.addEventListener("-focus", this.#onFocusReactHandler);
     this.addEventListener("-blur", this.#onBlurReactHandler);
@@ -1095,6 +1102,9 @@ class Link extends NectaryElement {
     this.#$anchor.removeEventListener("click", this.#onAnchorClick);
     this.#$anchor.removeEventListener("focus", this.#onAnchorFocus);
     this.#$anchor.removeEventListener("blur", this.#onAnchorBlur);
+    this.#$button.removeEventListener("click", this.#onButtonClick);
+    this.#$button.removeEventListener("focus", this.#onAnchorFocus);
+    this.#$button.removeEventListener("blur", this.#onAnchorBlur);
     this.removeEventListener("-click", this.#onClickReactHandler);
     this.removeEventListener("-focus", this.#onFocusReactHandler);
     this.removeEventListener("-blur", this.#onBlurReactHandler);
@@ -1103,19 +1113,38 @@ class Link extends NectaryElement {
     return [
       "text",
       "href",
+      "content-as-code",
       "use-history",
       "external",
       "standalone",
       "disabled"
     ];
   }
+  #renderContent() {
+    const text = getAttribute(this, "text", "");
+    const asCode = getBooleanAttribute(this, "content-as-code");
+    this.#$text.textContent = "";
+    this.#$buttonText.textContent = "";
+    if (asCode && text !== "") {
+      const $code = document.createElement("sinch-code-tag");
+      $code.text = text;
+      this.#$text.appendChild($code);
+      const $buttonCode = document.createElement("sinch-code-tag");
+      $buttonCode.text = text;
+      this.#$buttonText.appendChild($buttonCode);
+    } else {
+      this.#$text.textContent = text;
+      this.#$buttonText.textContent = text;
+    }
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "text": {
-        this.#$text.textContent = newVal;
+      case "text":
+      case "content-as-code": {
+        this.#renderContent();
         break;
       }
       case "href": {
@@ -1132,7 +1161,11 @@ class Link extends NectaryElement {
       }
       case "standalone":
       case "disabled": {
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        const isTrue = isAttrTrue(newVal);
+        updateBooleanAttribute(this, name, isTrue);
+        if (name === "disabled") {
+          this.#$button.disabled = isTrue;
+        }
         break;
       }
       case "external": {
@@ -1149,6 +1182,12 @@ class Link extends NectaryElement {
   set text(value) {
     updateAttribute(this, "text", value);
   }
+  get contentAsCode() {
+    return getBooleanAttribute(this, "content-as-code");
+  }
+  set contentAsCode(value) {
+    updateBooleanAttribute(this, "content-as-code", value);
+  }
   get href() {
     return getAttribute(this, "href", "");
   }
@@ -1185,15 +1224,24 @@ class Link extends NectaryElement {
   get preventDefault() {
     return getBooleanAttribute(this, "preventdefault");
   }
+  get #$activeElement() {
+    return this.preventDefault && !this["use-history"] ? this.#$button : this.#$anchor;
+  }
   get focusable() {
     return true;
   }
   focus() {
-    this.#$anchor.focus();
+    this.#$activeElement.focus();
   }
   blur() {
-    this.#$anchor.blur();
+    this.#$activeElement.blur();
   }
+  #onButtonClick = () => {
+    if (this.disabled) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("-click"));
+  };
   #onAnchorClick = (e) => {
     if (this.preventDefault) {
       e.preventDefault();
@@ -1346,6 +1394,7 @@ const regEm2Underscore = new RegExp("(?<!\\\\)__(?<em2>.+?)(?<!\\\\)__");
 const regEm1Underscore = new RegExp("(?<!\\\\)_(?<em1>.+?)(?<!\\\\)_");
 const regCodeTag = new RegExp("(?<!\\\\)`(?<code>.+?)(?<!\\\\)`");
 const regStrikethrough = new RegExp("(?<!\\\\)~~(?<strike>.+?)(?<!\\\\)~~");
+const regButtonPlaceholder = new RegExp("(?<!\\\\)\\[\\[(?<button>[a-zA-Z0-9_-]+)\\]\\]");
 const regLink = new RegExp("(?<!\\\\)!?\\[(?<linktext>[^\\]]*?)\\]\\((?<linkhref>[^)]+?)\\)(\\{(?<linkattrs>[^)]+?)\\})?");
 const regChip = new RegExp("(?<!\\\\)\\{\\{(?<chip>[a-zA-Z0-9_-]+)\\}\\}");
 const regEmoji = new RegExp("(?<emoji>(?![0-9*#])\\p{Emoji})", "u");
@@ -1355,6 +1404,7 @@ const regEscapedChars = /\\(?<escaped>[\\\*_\[\]`~\{\}])/;
 const allRegs = [
   regEscapedChars,
   regCodeTag,
+  regButtonPlaceholder,
   regLink,
   regChip,
   regEm3Star,
@@ -1398,13 +1448,23 @@ const createLineParser = (visitor) => function parseLine(regs, md, context = INI
       visitor.escaped(groups.escaped);
       continue;
     }
+    if (groups?.button != null) {
+      visitor.buttonPlaceholder(groups.button);
+      continue;
+    }
     if (groups?.linkhref != null) {
-      visitor.link(groups.linktext, groups.linkhref, groups.linkattrs?.split(" "));
+      const rawText = groups.linktext;
+      const isCode = rawText.length >= 2 && rawText.startsWith("`") && rawText.endsWith("`") && !rawText.slice(1, -1).includes("`");
+      const linkText = isCode ? rawText.slice(1, -1) : rawText;
+      visitor.link(linkText, groups.linkhref, groups.linkattrs?.split(" "), isCode);
     }
     if (groups?.code != null) {
       visitor.codetag(groups.code);
     }
     if (groups?.chip != null) {
+      if (visitor.linkPlaceholder(groups.chip)) {
+        continue;
+      }
       visitor.tag(groups.chip);
     }
     if (groups?.emoji != null) {
@@ -1523,14 +1583,14 @@ const createParseVisitor$1 = (doc) => {
       let $li = null;
       const $lists = [];
       return {
-        // Add new escaped method to handle escaped characters
         escaped(char) {
-          const $text = doc.createTextNode(char);
+          const $inline = doc.createElement("SPAN");
+          $inline.append(doc.createTextNode(char));
           if ($p != null) {
-            $p.appendChild($text);
+            $p.appendChild($inline);
           } else {
             this.paragraph();
-            $p.appendChild($text);
+            $p.appendChild($inline);
           }
         },
         emoji(emojiChar) {
@@ -1545,6 +1605,9 @@ const createParseVisitor$1 = (doc) => {
           $codeTag.text = text;
           $p.appendChild($codeTag);
         },
+        linkPlaceholder(_name) {
+          return false;
+        },
         tag(text) {
           const $chip = doc.createElement("sinch-rich-textarea-chip");
           const resolved = chipResolver?.(text);
@@ -1560,6 +1623,9 @@ const createParseVisitor$1 = (doc) => {
           }
           $p.appendChild($chip);
         },
+        buttonPlaceholder(name) {
+          this.inline(`[[${name}]]`, {});
+        },
         inline(text, { isBold, isItalic, isStrikethrough }) {
           const $inline = doc.createElement("SPAN");
           $inline.append(doc.createTextNode(text));
@@ -1578,10 +1644,13 @@ const createParseVisitor$1 = (doc) => {
           const $br = doc.createElement("br");
           $p.appendChild($br);
         },
-        link(text, href, attributes) {
+        link(text, href, attributes, isCode) {
           const $link = doc.createElement("sinch-link");
           $link.text = text;
           $link.href = href;
+          if (isCode === true) {
+            $link.contentAsCode = true;
+          }
           if (attributes != null) {
             attributes.forEach((attr) => {
               if (attr.startsWith("#")) {
@@ -1745,6 +1814,7 @@ class RichText extends NectaryElement {
   #handleElementClick = (e) => {
     const eventTarget = e.target;
     const elementClickEvent = new CustomEvent("-element-click");
+    Object.defineProperty(elementClickEvent, "target", { value: eventTarget });
     Object.defineProperty(elementClickEvent, "currentTarget", { value: eventTarget });
     this.dispatchEvent(elementClickEvent);
   };
@@ -8947,14 +9017,28 @@ const copyFormatName = ($source, $target) => {
   $target.className = $inline.className;
   if (isFormatLink($inline)) {
     $target.setAttribute(LINK_HREF_ATTR_NAME, $inline.getAttribute(LINK_HREF_ATTR_NAME) ?? "");
+  } else {
+    $target.removeAttribute(LINK_HREF_ATTR_NAME);
   }
 };
 const setInlineFormat = ($n, formatName, shouldEnable) => {
   if (shouldEnable) {
-    if (formatName === "c" || isFormatName($n, "c")) {
-      $n.className = "";
-    }
-    if (formatName === "l" || isFormatName($n, "l")) {
+    if (formatName === "c") {
+      if (isFormatName($n, "l")) {
+        $n.className = "l";
+      } else {
+        $n.className = "";
+        $n.removeAttribute(LINK_HREF_ATTR_NAME);
+      }
+    } else if (formatName === "l") {
+      if (!isFormatName($n, "c")) {
+        $n.className = "";
+        $n.removeAttribute(LINK_HREF_ATTR_NAME);
+      } else {
+        $n.className = "c";
+        $n.removeAttribute(LINK_HREF_ATTR_NAME);
+      }
+    } else if (isFormatName($n, "c") || isFormatName($n, "l")) {
       $n.className = "";
       $n.removeAttribute(LINK_HREF_ATTR_NAME);
     }
@@ -8995,14 +9079,14 @@ const areSameInlineFormat = ($a, $b) => {
   if ($a.classList.length !== $b.classList.length) {
     return false;
   }
-  if ($a.className === "l") {
-    return $b.className === "l" && $a.getAttribute(LINK_HREF_ATTR_NAME) === $b.getAttribute(LINK_HREF_ATTR_NAME);
-  }
   for (let i = 0; i < $a.classList.length; i++) {
     if (!$b.classList.contains($a.classList[i])) {
       return false;
     }
   }
+  if ($a.classList.contains("l")) {
+    return $a.getAttribute(LINK_HREF_ATTR_NAME) === $b.getAttribute(LINK_HREF_ATTR_NAME);
+  }
   return true;
 };
 const createInlineWithText = (data2, doc) => {
@@ -10282,6 +10366,11 @@ const serializeDescriptorReducer = (range) => (state, $n) => {
   if (isEmptyText(text)) {
     return state;
   }
+  if (isFormatCodetag($n) && isFormatLink($n)) {
+    const href = $n.getAttribute(LINK_HREF_ATTR_NAME) ?? "#";
+    state.push({ isCodetag: true, isLink: true, text, href });
+    return state;
+  }
   if (isFormatCodetag($n)) {
     state.push({ isCodetag: true, text });
     return state;
@@ -10332,7 +10421,8 @@ const MD_PARAGRAPH_JOIN = "\n\n";
 const serializeTextReducer = (state, desc, i, descArray) => {
   const { chunks } = state;
   if (desc.isLink === true) {
-    chunks.push(`[${desc.text}](${desc.href})`);
+    const inner = desc.isCodetag === true ? `${MD_CODETAG_TOKEN}${desc.text}${MD_CODETAG_TOKEN}` : desc.text;
+    chunks.push(`[${inner}](${desc.href})`);
     return state;
   }
   if (desc.isEmoji === true) {
@@ -10513,12 +10603,12 @@ const createParseVisitor = (doc) => {
       let isFirstListItem = false;
       return {
         escaped(char) {
-          const $text = doc.createTextNode(char);
+          const $inline = createInlineWithText(char, doc);
           if ($currentBlock != null) {
-            $currentBlock.appendChild($text);
+            $currentBlock.appendChild($inline);
           } else {
             this.paragraph();
-            $currentBlock.appendChild($text);
+            $currentBlock.appendChild($inline);
           }
         },
         emoji(emojiChar) {
@@ -10530,11 +10620,18 @@ const createParseVisitor = (doc) => {
           setInlineFormat($inline, "c", true);
           $currentBlock.appendChild($inline);
         },
+        linkPlaceholder(_name) {
+          return false;
+        },
         tag(text) {
           const resolved = chipResolver?.(text);
           const $tag = createTag(text, doc, resolved?.color ?? chipColor, resolved?.icon ?? chipIcon);
           $currentBlock.appendChild($tag);
         },
+        buttonPlaceholder(name) {
+          const $inline = createInlineWithText(`[[${name}]]`, doc);
+          $currentBlock.appendChild($inline);
+        },
         inline(text, { isBold, isItalic, isStrikethrough }) {
           const $inline = createInlineWithText(text, doc);
           setInlineFormat($inline, "b", isBold === true);
@@ -10548,8 +10645,11 @@ const createParseVisitor = (doc) => {
             $root.appendChild($currentBlock);
           }
         },
-        link(text, href) {
+        link(text, href, _attributes, isCode) {
           const $link = createLink(text, href, doc);
+          if (isCode === true) {
+            setInlineFormat($link, "c", true);
+          }
           $currentBlock.appendChild($link);
         },
         list(isOrdered) {

package/field-v2/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/field-v2/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-field-v2");

package/field-v2/index.d.ts

@@ -0,0 +1,21 @@
+import '../rich-text';
+import { NectaryElement } from '../utils';
+export * from './types';
+export declare class FieldV2 extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set label(value: string | null);
+    get label(): string | null;
+    set optionalText(value: string | null);
+    get optionalText(): string | null;
+    set additionalText(value: string | null);
+    get additionalText(): string | null;
+    set invalidText(value: string | null);
+    get invalidText(): string | null;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+}

package/field-v2/index.js

@@ -0,0 +1,159 @@
+import "../rich-text/index.js";
+import { getAttribute, setClass, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getFirstSlotElement } from "../utils/slot.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#top{display:flex;align-items:baseline;height:24px;margin-bottom:2px}#bottom{display:flex;flex-direction:column;align-items:baseline;width:100%}#top.empty{display:none}#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:left;line-height:20px;margin-top:2px;white-space:normal;overflow:visible;--sinch-comp-rich-text-font:var(--sinch-comp-field-font-additional);--sinch-global-color-text:var(--sinch-comp-field-color-default-additional-initial);--sinch-comp-link-color-default-text-initial:var(--sinch-comp-field-color-default-additional-initial);--sinch-comp-link-color-default-text-hover:var(--sinch-comp-field-color-default-additional-initial)}#additional:is([text=""],:not([text])){display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px;white-space:normal;overflow:visible;--sinch-comp-rich-text-font:var(--sinch-comp-field-font-invalid);--sinch-global-color-text:var(--sinch-comp-field-color-invalid-text-initial);--sinch-comp-link-color-default-text-initial:var(--sinch-comp-field-color-invalid-text-initial);--sinch-comp-link-color-default-text-hover:var(--sinch-comp-field-color-invalid-text-initial)}#invalid:is([text=""],:not([text])){display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{--sinch-global-color-text:var(--sinch-comp-field-color-disabled-additional-initial);--sinch-comp-link-color-default-text-initial:var(--sinch-comp-field-color-disabled-additional-initial);--sinch-comp-link-color-default-text-hover:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><sinch-rich-text id="additional"></sinch-rich-text><sinch-rich-text id="invalid"></sinch-rich-text></div></div>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class FieldV2 extends NectaryElement {
+  #topSection;
+  #$label;
+  #$optionalText;
+  #$additionalText;
+  #$invalidText;
+  #$inputSlot;
+  #$tooltipWrapper;
+  #$tooltipSlot;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#topSection = shadowRoot.querySelector("#top");
+    this.#$label = shadowRoot.querySelector("#label");
+    this.#$optionalText = shadowRoot.querySelector("#optional");
+    this.#$additionalText = shadowRoot.querySelector("#additional");
+    this.#$invalidText = shadowRoot.querySelector("#invalid");
+    this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
+    this.#$tooltipSlot = shadowRoot.querySelector('slot[name="tooltip"]');
+    this.#$tooltipWrapper = shadowRoot.querySelector("#tooltip");
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    const options = { signal };
+    this.#shouldShowTopSection();
+    this.#$label.addEventListener("click", this.#onLabelClick, options);
+    this.#$tooltipSlot.addEventListener("slotchange", this.#onTooltipSlotChange, options);
+    this.#$inputSlot.addEventListener("slotchange", this.#onInputSlotChange, options);
+    this.#$additionalText.addEventListener("-element-click", this.#onRichTextElementClick, options);
+    this.#$invalidText.addEventListener("-element-click", this.#onRichTextElementClick, options);
+    this.addEventListener("-element-click", this.#onElementClickReactHandler, options);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return [
+      "label",
+      "optionaltext",
+      "additionaltext",
+      "invalidtext",
+      "disabled"
+    ];
+  }
+  #shouldShowTopSection() {
+    const label = getAttribute(this, "label");
+    const optionaltext = getAttribute(this, "optionaltext");
+    setClass(this.#topSection, "empty", label === null && optionaltext === null);
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case "label": {
+        this.#$label.textContent = newVal;
+        this.#syncInputAriaLabel(newVal);
+        break;
+      }
+      case "optionaltext": {
+        this.#$optionalText.textContent = newVal;
+        break;
+      }
+      case "additionaltext": {
+        updateAttribute(this.#$additionalText, "text", newVal);
+        break;
+      }
+      case "invalidtext": {
+        updateAttribute(this.#$invalidText, "text", newVal);
+        break;
+      }
+      case "disabled": {
+        if (isAttrEqual(oldVal, newVal)) {
+          break;
+        }
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
+    }
+    this.#shouldShowTopSection();
+  }
+  set label(value) {
+    updateAttribute(this, "label", value);
+  }
+  get label() {
+    return getAttribute(this, "label");
+  }
+  set optionalText(value) {
+    updateAttribute(this, "optionaltext", value);
+  }
+  get optionalText() {
+    return getAttribute(this, "optionaltext");
+  }
+  set additionalText(value) {
+    updateAttribute(this, "additionaltext", value);
+  }
+  get additionalText() {
+    return getAttribute(this, "additionaltext");
+  }
+  set invalidText(value) {
+    updateAttribute(this, "invalidtext", value);
+  }
+  get invalidText() {
+    return getAttribute(this, "invalidtext");
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, "disabled", isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, "disabled");
+  }
+  #onRichTextElementClick = (e) => {
+    if (this.disabled) {
+      return;
+    }
+    const forwarded = new CustomEvent("-element-click");
+    const originalTarget = e.currentTarget;
+    Object.defineProperty(forwarded, "target", { value: originalTarget });
+    Object.defineProperty(forwarded, "currentTarget", { value: originalTarget });
+    this.dispatchEvent(forwarded);
+  };
+  #onElementClickReactHandler = (e) => {
+    getReactEventHandler(this, "on-element-click")?.(e);
+    getReactEventHandler(this, "onElementClick")?.(e);
+  };
+  #onLabelClick = () => {
+    getFirstSlotElement(this.#$inputSlot)?.focus?.();
+  };
+  #onTooltipSlotChange = () => {
+    setClass(this.#$tooltipWrapper, "empty", this.#$tooltipSlot.assignedElements().length === 0);
+  };
+  #syncInputAriaLabel(labelText) {
+    const inputElement = getFirstSlotElement(this.#$inputSlot);
+    if (inputElement === null) {
+      return;
+    }
+    if (labelText != null && labelText.length > 0) {
+      inputElement.setAttribute("aria-label", labelText);
+    } else {
+      inputElement.removeAttribute("aria-label");
+    }
+  }
+  #onInputSlotChange = () => {
+    this.#syncInputAriaLabel(this.#$label.textContent);
+  };
+}
+defineCustomElement("sinch-field-v2", FieldV2);
+export {
+  FieldV2
+};

package/field-v2/types.d.ts

@@ -0,0 +1,58 @@
+import type { ElementClickedEvent } from '../rich-text/types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export type TSinchFieldV2Events = {
+    /** Forwarded click from links in additionalText / invalidText */
+    '-element-click'?: (e: ElementClickedEvent) => void;
+};
+export type TSinchFieldV2Props = {
+    /** Label that shows in UI */
+    label?: string;
+    /** @hidden */
+    optionalText?: string;
+    /** Additional text */
+    additionalText?: string;
+    /** Invalid text, controls the overall invalid state of the text field */
+    invalidText?: string;
+    /** Disabled */
+    disabled?: boolean;
+};
+export type TSinchFieldV2Style = {
+    '--sinch-comp-field-font-label'?: string;
+    '--sinch-comp-field-font-optional'?: string;
+    '--sinch-comp-field-font-additional'?: string;
+    '--sinch-comp-field-font-invalid'?: string;
+    '--sinch-comp-field-color-default-label-initial'?: string;
+    '--sinch-comp-field-color-default-optional-initial'?: string;
+    '--sinch-comp-field-color-default-additional-initial'?: string;
+    '--sinch-comp-field-color-disabled-label-initial'?: string;
+    '--sinch-comp-field-color-disabled-optional-initial'?: string;
+    '--sinch-comp-field-color-disabled-additional-initial'?: string;
+    '--sinch-comp-field-color-invalid-text-initial'?: string;
+};
+export type TSinchFieldV2 = {
+    props: TSinchFieldV2Props;
+    events: TSinchFieldV2Events;
+    style: TSinchFieldV2Style;
+};
+export type TSinchFieldV2Element = NectaryComponentVanillaByType<TSinchFieldV2>;
+export type TSinchFieldV2React = NectaryComponentReactByType<TSinchFieldV2>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-field-v2': TSinchFieldV2;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-field-v2': NectaryComponentVanilla<'sinch-field-v2'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-field-v2': NectaryComponentReact<'sinch-field-v2'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-field-v2': NectaryComponentReact<'sinch-field-v2'>;
+        }
+    }
+}

package/field-v2/types.js

@@ -0,0 +1 @@
+

package/link/index.d.ts

@@ -1,3 +1,4 @@
+import '../code-tag';
 import '../icon';
 import { NectaryElement } from '../utils';
 export * from './types';
@@ -10,6 +11,8 @@ export declare class Link extends NectaryElement {
     attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
     get text(): string;
     set text(value: string);
+    get contentAsCode(): boolean;
+    set contentAsCode(value: boolean);
     get href(): string;
     set href(value: string);
     set 'use-history'(value: boolean);

package/link/index.js

@@ -1,24 +1,32 @@
+import "../code-tag/index.js";
 import "../icon/index.js";
-import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { getAttribute, getBooleanAttribute, isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}button{display:none;border:none;background:0 0;padding:0;margin:0;cursor:pointer;font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap}button:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover)}button:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([disabled]) button{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled)}#button-content{white-space:var(--sinch-global-text-white-space,normal)}:host([preventdefault]:not([use-history])) a{display:none}:host([preventdefault]:not([use-history])) button{display:inline}</style><a referrerpolicy="no-referer"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a><button type="button"><span id="button-content"></span></button>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Link extends NectaryElement {
   #$anchor;
   #$text;
+  #$button;
+  #$buttonText;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$anchor = shadowRoot.querySelector("a");
     this.#$text = shadowRoot.querySelector("#content");
+    this.#$button = shadowRoot.querySelector("button");
+    this.#$buttonText = shadowRoot.querySelector("#button-content");
   }
   connectedCallback() {
     this.#$anchor.addEventListener("click", this.#onAnchorClick);
     this.#$anchor.addEventListener("focus", this.#onAnchorFocus);
     this.#$anchor.addEventListener("blur", this.#onAnchorBlur);
+    this.#$button.addEventListener("click", this.#onButtonClick);
+    this.#$button.addEventListener("focus", this.#onAnchorFocus);
+    this.#$button.addEventListener("blur", this.#onAnchorBlur);
     this.addEventListener("-click", this.#onClickReactHandler);
     this.addEventListener("-focus", this.#onFocusReactHandler);
     this.addEventListener("-blur", this.#onBlurReactHandler);
@@ -27,6 +35,9 @@ class Link extends NectaryElement {
     this.#$anchor.removeEventListener("click", this.#onAnchorClick);
     this.#$anchor.removeEventListener("focus", this.#onAnchorFocus);
     this.#$anchor.removeEventListener("blur", this.#onAnchorBlur);
+    this.#$button.removeEventListener("click", this.#onButtonClick);
+    this.#$button.removeEventListener("focus", this.#onAnchorFocus);
+    this.#$button.removeEventListener("blur", this.#onAnchorBlur);
     this.removeEventListener("-click", this.#onClickReactHandler);
     this.removeEventListener("-focus", this.#onFocusReactHandler);
     this.removeEventListener("-blur", this.#onBlurReactHandler);
@@ -35,19 +46,38 @@ class Link extends NectaryElement {
     return [
       "text",
       "href",
+      "content-as-code",
       "use-history",
       "external",
       "standalone",
       "disabled"
     ];
   }
+  #renderContent() {
+    const text = getAttribute(this, "text", "");
+    const asCode = getBooleanAttribute(this, "content-as-code");
+    this.#$text.textContent = "";
+    this.#$buttonText.textContent = "";
+    if (asCode && text !== "") {
+      const $code = document.createElement("sinch-code-tag");
+      $code.text = text;
+      this.#$text.appendChild($code);
+      const $buttonCode = document.createElement("sinch-code-tag");
+      $buttonCode.text = text;
+      this.#$buttonText.appendChild($buttonCode);
+    } else {
+      this.#$text.textContent = text;
+      this.#$buttonText.textContent = text;
+    }
+  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "text": {
-        this.#$text.textContent = newVal;
+      case "text":
+      case "content-as-code": {
+        this.#renderContent();
         break;
       }
       case "href": {
@@ -64,7 +94,11 @@ class Link extends NectaryElement {
       }
       case "standalone":
       case "disabled": {
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        const isTrue = isAttrTrue(newVal);
+        updateBooleanAttribute(this, name, isTrue);
+        if (name === "disabled") {
+          this.#$button.disabled = isTrue;
+        }
         break;
       }
       case "external": {
@@ -81,6 +115,12 @@ class Link extends NectaryElement {
   set text(value) {
     updateAttribute(this, "text", value);
   }
+  get contentAsCode() {
+    return getBooleanAttribute(this, "content-as-code");
+  }
+  set contentAsCode(value) {
+    updateBooleanAttribute(this, "content-as-code", value);
+  }
   get href() {
     return getAttribute(this, "href", "");
   }
@@ -117,15 +157,24 @@ class Link extends NectaryElement {
   get preventDefault() {
     return getBooleanAttribute(this, "preventdefault");
   }
+  get #$activeElement() {
+    return this.preventDefault && !this["use-history"] ? this.#$button : this.#$anchor;
+  }
   get focusable() {
     return true;
   }
   focus() {
-    this.#$anchor.focus();
+    this.#$activeElement.focus();
   }
   blur() {
-    this.#$anchor.blur();
+    this.#$activeElement.blur();
   }
+  #onButtonClick = () => {
+    if (this.disabled) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("-click"));
+  };
   #onAnchorClick = (e) => {
     if (this.preventDefault) {
       e.preventDefault();

package/link/types.d.ts

@@ -14,6 +14,8 @@ export type TSinchLinkProps = {
     standalone?: boolean;
     /** Prevents default behaviour on hyperlink click */
     preventDefault?: boolean;
+    /** Render link text as code (e.g. for Markdown `` [`word`](url) ``) */
+    contentAsCode?: boolean;
     /** Label that is used for a11y – might be different from `text` */
     'aria-label': string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.18.3",
+  "version": "5.19.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.4.4"
+    "@nectary/assets": "3.5.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package/readme.md

@@ -10,7 +10,7 @@ Design System's framework-agnostic Component Library implementation.
 
 Add the component library dependency to `package.json`:
 
-```
+```bash
 npm install @nectary/components
 # or
 yarn add @nectary/components
@@ -74,7 +74,7 @@ Use it in React/Vue/Angular/etc, for example:
 <sinch-button value="Click me" onClick={() => console.log('click')}></sinch-button>
 ```
 
-⚠️ Note that it's not allowed to self-close custom element tags.
+> ⚠️ Note: it's not allowed to self-close custom element tags.
 
 ## Testing
 

package/rich-text/index.js

@@ -110,6 +110,7 @@ class RichText extends NectaryElement {
   #handleElementClick = (e) => {
     const eventTarget = e.target;
     const elementClickEvent = new CustomEvent("-element-click");
+    Object.defineProperty(elementClickEvent, "target", { value: eventTarget });
     Object.defineProperty(elementClickEvent, "currentTarget", { value: eventTarget });
     this.dispatchEvent(elementClickEvent);
   };

package/rich-text/utils.js

@@ -24,14 +24,14 @@ const createParseVisitor = (doc) => {
       let $li = null;
       const $lists = [];
       return {
-        // Add new escaped method to handle escaped characters
         escaped(char) {
-          const $text = doc.createTextNode(char);
+          const $inline = doc.createElement("SPAN");
+          $inline.append(doc.createTextNode(char));
           if ($p != null) {
-            $p.appendChild($text);
+            $p.appendChild($inline);
           } else {
             this.paragraph();
-            $p.appendChild($text);
+            $p.appendChild($inline);
           }
         },
         emoji(emojiChar) {
@@ -46,6 +46,9 @@ const createParseVisitor = (doc) => {
           $codeTag.text = text;
           $p.appendChild($codeTag);
         },
+        linkPlaceholder(_name) {
+          return false;
+        },
         tag(text) {
           const $chip = doc.createElement("sinch-rich-textarea-chip");
           const resolved = chipResolver?.(text);
@@ -61,6 +64,9 @@ const createParseVisitor = (doc) => {
           }
           $p.appendChild($chip);
         },
+        buttonPlaceholder(name) {
+          this.inline(`[[${name}]]`, {});
+        },
         inline(text, { isBold, isItalic, isStrikethrough }) {
           const $inline = doc.createElement("SPAN");
           $inline.append(doc.createTextNode(text));
@@ -79,10 +85,13 @@ const createParseVisitor = (doc) => {
           const $br = doc.createElement("br");
           $p.appendChild($br);
         },
-        link(text, href, attributes) {
+        link(text, href, attributes, isCode) {
           const $link = doc.createElement("sinch-link");
           $link.text = text;
           $link.href = href;
+          if (isCode === true) {
+            $link.contentAsCode = true;
+          }
           if (attributes != null) {
             attributes.forEach((attr) => {
               if (attr.startsWith("#")) {

package/rich-textarea/utils.js

@@ -176,14 +176,28 @@ const copyFormatName = ($source, $target) => {
   $target.className = $inline.className;
   if (isFormatLink($inline)) {
     $target.setAttribute(LINK_HREF_ATTR_NAME, $inline.getAttribute(LINK_HREF_ATTR_NAME) ?? "");
+  } else {
+    $target.removeAttribute(LINK_HREF_ATTR_NAME);
   }
 };
 const setInlineFormat = ($n, formatName, shouldEnable) => {
   if (shouldEnable) {
-    if (formatName === "c" || isFormatName($n, "c")) {
-      $n.className = "";
-    }
-    if (formatName === "l" || isFormatName($n, "l")) {
+    if (formatName === "c") {
+      if (isFormatName($n, "l")) {
+        $n.className = "l";
+      } else {
+        $n.className = "";
+        $n.removeAttribute(LINK_HREF_ATTR_NAME);
+      }
+    } else if (formatName === "l") {
+      if (!isFormatName($n, "c")) {
+        $n.className = "";
+        $n.removeAttribute(LINK_HREF_ATTR_NAME);
+      } else {
+        $n.className = "c";
+        $n.removeAttribute(LINK_HREF_ATTR_NAME);
+      }
+    } else if (isFormatName($n, "c") || isFormatName($n, "l")) {
       $n.className = "";
       $n.removeAttribute(LINK_HREF_ATTR_NAME);
     }
@@ -224,14 +238,14 @@ const areSameInlineFormat = ($a, $b) => {
   if ($a.classList.length !== $b.classList.length) {
     return false;
   }
-  if ($a.className === "l") {
-    return $b.className === "l" && $a.getAttribute(LINK_HREF_ATTR_NAME) === $b.getAttribute(LINK_HREF_ATTR_NAME);
-  }
   for (let i = 0; i < $a.classList.length; i++) {
     if (!$b.classList.contains($a.classList[i])) {
       return false;
     }
   }
+  if ($a.classList.contains("l")) {
+    return $a.getAttribute(LINK_HREF_ATTR_NAME) === $b.getAttribute(LINK_HREF_ATTR_NAME);
+  }
   return true;
 };
 const createInlineWithText = (data, doc) => {
@@ -1511,6 +1525,11 @@ const serializeDescriptorReducer = (range) => (state, $n) => {
   if (isEmptyText(text)) {
     return state;
   }
+  if (isFormatCodetag($n) && isFormatLink($n)) {
+    const href = $n.getAttribute(LINK_HREF_ATTR_NAME) ?? "#";
+    state.push({ isCodetag: true, isLink: true, text, href });
+    return state;
+  }
   if (isFormatCodetag($n)) {
     state.push({ isCodetag: true, text });
     return state;
@@ -1561,7 +1580,8 @@ const MD_PARAGRAPH_JOIN = "\n\n";
 const serializeTextReducer = (state, desc, i, descArray) => {
   const { chunks } = state;
   if (desc.isLink === true) {
-    chunks.push(`[${desc.text}](${desc.href})`);
+    const inner = desc.isCodetag === true ? `${MD_CODETAG_TOKEN}${desc.text}${MD_CODETAG_TOKEN}` : desc.text;
+    chunks.push(`[${inner}](${desc.href})`);
     return state;
   }
   if (desc.isEmoji === true) {
@@ -1742,12 +1762,12 @@ const createParseVisitor = (doc) => {
       let isFirstListItem = false;
       return {
         escaped(char) {
-          const $text = doc.createTextNode(char);
+          const $inline = createInlineWithText(char, doc);
           if ($currentBlock != null) {
-            $currentBlock.appendChild($text);
+            $currentBlock.appendChild($inline);
           } else {
             this.paragraph();
-            $currentBlock.appendChild($text);
+            $currentBlock.appendChild($inline);
           }
         },
         emoji(emojiChar) {
@@ -1759,11 +1779,18 @@ const createParseVisitor = (doc) => {
           setInlineFormat($inline, "c", true);
           $currentBlock.appendChild($inline);
         },
+        linkPlaceholder(_name) {
+          return false;
+        },
         tag(text) {
           const resolved = chipResolver?.(text);
           const $tag = createTag(text, doc, resolved?.color ?? chipColor, resolved?.icon ?? chipIcon);
           $currentBlock.appendChild($tag);
         },
+        buttonPlaceholder(name) {
+          const $inline = createInlineWithText(`[[${name}]]`, doc);
+          $currentBlock.appendChild($inline);
+        },
         inline(text, { isBold, isItalic, isStrikethrough }) {
           const $inline = createInlineWithText(text, doc);
           setInlineFormat($inline, "b", isBold === true);
@@ -1777,8 +1804,11 @@ const createParseVisitor = (doc) => {
             $root.appendChild($currentBlock);
           }
         },
-        link(text, href) {
+        link(text, href, _attributes, isCode) {
           const $link = createLink(text, href, doc);
+          if (isCode === true) {
+            setInlineFormat($link, "c", true);
+          }
           $currentBlock.appendChild($link);
         },
         list(isOrdered) {

package/utils/component-names.d.ts

@@ -1,3 +1,3 @@
-export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "file-drop", "file-picker", "file-status", "flag", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
-export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "file-drop" | "file-picker" | "file-status" | "flag" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
+export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "field-v2", "file-drop", "file-picker", "file-status", "flag", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
+export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "field-v2" | "file-drop" | "file-picker" | "file-status" | "flag" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
 export type ComponentName = `sinch-${typeof BASE_COMPONENT_NAMES_LIST[number]}`;

package/utils/component-names.js

@@ -23,6 +23,7 @@ const BASE_COMPONENT_NAMES_LIST = [
   "emoji-picker",
   "emoji",
   "field",
+  "field-v2",
   "file-drop",
   "file-picker",
   "file-status",

package/utils/element.d.ts

@@ -32,6 +32,7 @@ declare const BASE_COMPONENT_NAMES_LIST: readonly [
 	"emoji-picker",
 	"emoji",
 	"field",
+	"field-v2",
 	"file-drop",
 	"file-picker",
 	"file-status",

package/utils/markdown.d.ts

@@ -5,10 +5,13 @@ export type TMarkdownInlineParams = {
 };
 export type TMarkdownParseVisitor = {
     escaped(char: string): void;
-    link(text: string, href: string, attributes?: string[]): void;
+    link(text: string, href: string, attributes?: string[], isCode?: boolean): void;
     emoji(emojiChar: string): void;
     codetag(text: string): void;
+    /** Returns true if placeholder was handled as a link; false to fall through to tag (chip). */
+    linkPlaceholder(name: string): boolean;
     tag(username: string): void;
+    buttonPlaceholder(name: string): void;
     inline(text: string, params: TMarkdownInlineParams): void;
     linebreak(): void;
     paragraph(): void;

package/utils/markdown.js

@@ -8,6 +8,7 @@ const regEm2Underscore = new RegExp("(?<!\\\\)__(?<em2>.+?)(?<!\\\\)__");
 const regEm1Underscore = new RegExp("(?<!\\\\)_(?<em1>.+?)(?<!\\\\)_");
 const regCodeTag = new RegExp("(?<!\\\\)`(?<code>.+?)(?<!\\\\)`");
 const regStrikethrough = new RegExp("(?<!\\\\)~~(?<strike>.+?)(?<!\\\\)~~");
+const regButtonPlaceholder = new RegExp("(?<!\\\\)\\[\\[(?<button>[a-zA-Z0-9_-]+)\\]\\]");
 const regLink = new RegExp("(?<!\\\\)!?\\[(?<linktext>[^\\]]*?)\\]\\((?<linkhref>[^)]+?)\\)(\\{(?<linkattrs>[^)]+?)\\})?");
 const regChip = new RegExp("(?<!\\\\)\\{\\{(?<chip>[a-zA-Z0-9_-]+)\\}\\}");
 const regEmoji = new RegExp("(?<emoji>(?![0-9*#])\\p{Emoji})", "u");
@@ -17,6 +18,7 @@ const regEscapedChars = /\\(?<escaped>[\\\*_\[\]`~\{\}])/;
 const allRegs = [
   regEscapedChars,
   regCodeTag,
+  regButtonPlaceholder,
   regLink,
   regChip,
   regEm3Star,
@@ -60,13 +62,23 @@ const createLineParser = (visitor) => function parseLine(regs, md, context = INI
       visitor.escaped(groups.escaped);
       continue;
     }
+    if (groups?.button != null) {
+      visitor.buttonPlaceholder(groups.button);
+      continue;
+    }
     if (groups?.linkhref != null) {
-      visitor.link(groups.linktext, groups.linkhref, groups.linkattrs?.split(" "));
+      const rawText = groups.linktext;
+      const isCode = rawText.length >= 2 && rawText.startsWith("`") && rawText.endsWith("`") && !rawText.slice(1, -1).includes("`");
+      const linkText = isCode ? rawText.slice(1, -1) : rawText;
+      visitor.link(linkText, groups.linkhref, groups.linkattrs?.split(" "), isCode);
     }
     if (groups?.code != null) {
       visitor.codetag(groups.code);
     }
     if (groups?.chip != null) {
+      if (visitor.linkPlaceholder(groups.chip)) {
+        continue;
+      }
       visitor.tag(groups.chip);
     }
     if (groups?.emoji != null) {