@kubex/zinc 1.1.162 → 1.1.163

package/dist/custom-elements.json

@@ -53826,7 +53826,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.162",
+    "version": "1.1.163",
     "author": "",
     "license": "MIT"
   }

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.162",
+  "version": "1.1.163",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.min.js

@@ -4450,7 +4450,8 @@ ${this.parseList(r)}`}let a=t.ordered?"ol":"ul";return`<${a}>${n.join(`</li>
       </div>`}return u`
     <div class="remarkd-editor__conditional-body remarkd-rendered">
       ${o.map(t=>{if(t.kind==="nested")return wg(t.label,t.parts);let r=t.lines.join(`
-`).trim();return r?u`<div class="remarkd-editor__rendered--parsed">${Pt(xg(r))}</div>`:""})}
+`).trim();return r?u`
+          <div class="remarkd-editor__rendered--parsed">${Pt(xg(r))}</div>`:""})}
     </div>`}function wg(o,i){return u`
     <div part="conditional" class="remarkd-editor__conditional">
       <span class="remarkd-editor__conditional-label">
@@ -4490,7 +4491,8 @@ ${this.parseList(r)}`}let a=t.ordered?"ol":"ul";return`<${a}>${n.join(`</li>
             <span>Alignment</span>
             <zn-button-group>
               ${r.map(n=>u`
-                <zn-button type="button" icon-button="small" icon=${n.icon}
+                <zn-button icon-button="small"
+                           icon=${n.icon}
                            ?plain=${t.align!==n.value}
                            tooltip=${n.label}
                            @click=${()=>this.updateImageEdit({align:n.value})}></zn-button>`)}
@@ -4513,12 +4515,15 @@ ${this.parseList(r)}`}let a=t.ordered?"ol":"ul";return`<${a}>${n.join(`</li>
           </label>
         </div>
         <div class="remarkd-editor__image-buttons">
-          <zn-button type="button" color="primary" size="small" @click=${this.saveImageEdit}>Save</zn-button>
-          <zn-button type="button" color="secondary" size="small" @click=${this.closeImageEdit}>Cancel</zn-button>
+          <zn-button color="primary" size="small" @click=${this.saveImageEdit}>Save</zn-button>
+          <zn-button color="secondary" size="small" @click=${this.closeImageEdit}>Cancel</zn-button>
           <span class="remarkd-editor__image-buttons-spacer"></span>
-          <zn-button type="button" icon-button="small" plain icon="code@lu"
-                     tooltip="Edit source" @click=${this.editImageSource}></zn-button>
-          <zn-button type="button" icon-button="small" plain icon="trash-2@lu" color="error"
+          <zn-button icon-button="small"
+                     plain
+                     icon="code@lu"
+                     tooltip="Edit source"
+                     @click=${this.editImageSource}></zn-button>
+          <zn-button icon-button="small" plain icon="trash-2@lu" color="error"
                      tooltip="Delete image" @click=${this.deleteImageBlock}></zn-button>
         </div>
       </div>`}renderIncludeChip(t){let r=this.includeOptions?.find(l=>l.id===t.target),n=/[/.]/.test(t.target),a=!this.includeUrl||this.includeOptions===null,s=!r&&!a&&!n;return u`
@@ -4565,12 +4570,19 @@ ${this.parseList(r)}`}let a=t.ordered?"ol":"ul";return`<${a}>${n.join(`</li>
                   @pointerdown=${this.handleHandlePointerDown}>
               <zn-icon src="grip-vertical@lu" size="16"></zn-icon>
             </span>
-            <zn-button type="button" icon-button="small" plain icon="plus@lu" icon-size="16"
+            <zn-button icon-button="small"
+                       plain
+                       icon="plus@lu"
+                       icon-size="16"
                        tooltip="Add block below"
                        @click=${()=>this.insertDraftBlock(r+1)}></zn-button>
           </div>
           <zn-button class="remarkd-editor__delete"
-                     type="button" icon-button="small" plain icon="x@lu" icon-size="16" color="error"
+                     icon-button="small"
+                     plain
+                     icon="x@lu"
+                     icon-size="16"
+                     color="error"
                      tooltip="Delete block"
                      @click=${()=>this.deleteBlock(r)}></zn-button>`}
         <div part="rendered"
@@ -4578,7 +4590,10 @@ ${this.parseList(r)}`}let a=t.ordered?"ol":"ul";return`<${a}>${n.join(`</li>
              @click=${l=>this.handleRenderedClick(l,r)}>${n?this.renderIncludeChip(n):a||(s?this.renderMetaChips(s):Pt(xg(t)))}
         </div>
       </div>`}isActionDisabled(t){return(!!t.inline||t.opens==="link")&&this.editingIndex===null}actionAvailable(t){return t.opens==="image"?!!this.attachmentUrl:t.opens==="include"?!!this.includeUrl:t.opens==="link"?!!this.linkUrl:!0}slashItemAvailable(t){return t.action==="image"?!!this.attachmentUrl:t.action==="include"?!!this.includeUrl:t.action==="link"?!!this.linkUrl:!0}activateAction(t){t.opens==="link"?this.pickLink():t.inline?this.applyInline(t.inline):this.handleToolbarInsert(t)}renderAction(t){return u`
-      <zn-button type="button" icon-button plain icon=${t.icon} icon-size="18"
+      <zn-button icon-button="small"
+                 plain
+                 icon=${t.icon}
+                 icon-size="18"
                  tooltip=${t.label}
                  ?disabled=${this.isActionDisabled(t)}
                  @mousedown=${r=>r.preventDefault()}
@@ -4604,16 +4619,23 @@ ${this.parseList(r)}`}let a=t.ordered?"ol":"ul";return`<${a}>${n.join(`</li>
                   <zn-dropdown class="remarkd-editor__toolbar-more" placement="bottom-end"
                                @zn-show=${s=>{s.target===s.currentTarget&&(this.suppressBlurCommit=!0)}}
                                @zn-hide=${s=>{s.target===s.currentTarget&&(this.linkPickerOpen||(this.suppressBlurCommit=!1))}}>
-                    <zn-button slot="trigger" type="button" icon-button plain icon="ellipsis@lu"
-                               icon-size="18" tooltip="More"
+                    <zn-button slot="trigger"
+                               icon-button="small"
+                               plain
+                               icon="ellipsis@lu"
+                               icon-size="18"
+                               tooltip="More"
                                @mousedown=${s=>s.preventDefault()}></zn-button>
                     <zn-menu>
                       ${a.flatMap(s=>s.actions).map(s=>this.renderMenuAction(s))}
                     </zn-menu>
                   </zn-dropdown>`:""}`})()}
             ${this.allowRaw?u`
-              <zn-button part="raw-toggle" class="remarkd-editor__raw-toggle"
-                         type="button" icon-button icon="code-xml@lu" icon-size="18"
+              <zn-button part="raw-toggle"
+                         class="remarkd-editor__raw-toggle"
+                         icon-button="small"
+                         icon="code-xml@lu"
+                         icon-size="18"
                          ?plain=${!this.rawMode}
                          tooltip=${this.rawMode?"Show blocks":"Show raw source"}
                          @click=${this.toggleRawMode}></zn-button>`:""}
@@ -4649,16 +4671,22 @@ ${this.parseList(r)}`}let a=t.ordered?"ol":"ul";return`<${a}>${n.join(`</li>
                  placeholder="Find an Include"
                  .value=${this.includeQuery}
                  @input=${n=>{this.includeQuery=n.target.value}}>
-          <zn-button type="button" icon-button="small" plain icon="x@lu"
-                     tooltip="Cancel" @click=${this.closeIncludePicker}></zn-button>
+          <zn-button icon-button="small"
+                     plain
+                     icon="x@lu"
+                     tooltip="Cancel"
+                     @click=${this.closeIncludePicker}></zn-button>
         </div>
-        ${this.includeOptions===null?u`<div class="remarkd-editor__include-picker-empty">${this.includeLoadFailed?"Could not load Includes":"Loading\u2026"}</div>`:r.length?r.map(n=>u`
+        ${this.includeOptions===null?u`
+            <div class="remarkd-editor__include-picker-empty">${this.includeLoadFailed?"Could not load Includes":"Loading\u2026"}
+            </div>`:r.length?r.map(n=>u`
               <button type="button" class="remarkd-editor__include-option"
                       ?disabled=${!n.languages}
                       @click=${()=>this.insertInclude(n)}>
                 <span class="remarkd-editor__include-option-title">${n.title}</span>
                 <span class="remarkd-editor__include-option-meta">${n.scope??""}${n.languages?` \xB7 ${n.languages}`:" \xB7 No content"}</span>
-              </button>`):u`<div class="remarkd-editor__include-picker-empty">No Includes found</div>`}
+              </button>`):u`
+              <div class="remarkd-editor__include-picker-empty">No Includes found</div>`}
       </div>`}renderLinkPicker(){let t={document:"Article",category:"Category",page:"Page"};return u`
       <div part="link-picker" class="remarkd-editor__link-picker">
         <div class="remarkd-editor__link-picker-head">
@@ -4666,15 +4694,21 @@ ${this.parseList(r)}`}let a=t.ordered?"ol":"ul";return`<${a}>${n.join(`</li>
                  placeholder="Find an article"
                  .value=${this.linkQuery}
                  @input=${r=>{this.linkQuery=r.target.value,this.searchLinks(this.linkQuery)}}>
-          <zn-button type="button" icon-button="small" plain icon="x@lu"
-                     tooltip="Cancel" @click=${this.closeLinkPicker}></zn-button>
+          <zn-button icon-button="small"
+                     plain
+                     icon="x@lu"
+                     tooltip="Cancel"
+                     @click=${this.closeLinkPicker}></zn-button>
         </div>
-        ${this.linkResults===null?u`<div class="remarkd-editor__link-picker-empty">${this.linkSearchFailed?"Could not search for articles":"Searching\u2026"}</div>`:this.linkResults.length?this.linkResults.map(r=>u`
+        ${this.linkResults===null?u`
+            <div class="remarkd-editor__link-picker-empty">${this.linkSearchFailed?"Could not search for articles":"Searching\u2026"}
+            </div>`:this.linkResults.length?this.linkResults.map(r=>u`
               <button type="button" class="remarkd-editor__link-option"
                       @click=${()=>this.insertLink(r)}>
                 <span class="remarkd-editor__link-option-title">${r.title}</span>
                 <span class="remarkd-editor__link-option-meta">${[t[r.kind]??r.kind,r.context,r.status==="published"?"":r.status].filter(Boolean).join(" \xB7 ")}</span>
-              </button>`):u`<div class="remarkd-editor__link-picker-empty">No articles found</div>`}
+              </button>`):u`
+              <div class="remarkd-editor__link-picker-empty">No articles found</div>`}
       </div>`}insertLink(t){let r=this.shadowRoot?.querySelector(".remarkd-editor__input"),n=this.linkSelection;if(this.linkPickerOpen=!1,this.linkSelection=null,this.suppressBlurCommit=!1,!r||!n)return;let[a,s]=n,l=r.value.slice(a,s).trim(),d=bq(t.ref,l||t.title),h=r.value.slice(0,a)+d+r.value.slice(s);this.editingDraft=h,r.value=h,r.setSelectionRange(a+d.length,a+d.length),this.editShell=this.computeEditShell(h),this.autosize(r),r.focus({preventScroll:!0}),this.emit("zn-input")}renderImagePicker(){return u`
       <div class="remarkd-editor__image-picker">
         <zn-file class="remarkd-editor__image-file"
@@ -4682,7 +4716,9 @@ ${this.parseList(r)}`}let a=t.ordered?"ol":"ul";return`<${a}>${n.join(`</li>
                  accept="image/*"
                  droparea
                  @zn-change=${this.handleImagePicked}></zn-file>
-        <zn-button type="button" icon-button="small" plain icon="x@lu"
+        <zn-button icon-button="small"
+                   plain
+                   icon="x@lu"
                    tooltip="Cancel"
                    @click=${this.closeImagePicker}></zn-button>
       </div>`}};me.styles=z(Y2),me.dependencies={"zn-dropdown":ur,"zn-menu":on,"zn-menu-item":xi,"zn-slash-menu":Ea},c([B(".remarkd-editor__validation")],me.prototype,"validationInput",2),c([B("zn-slash-menu")],me.prototype,"slashMenuElement",2),c([I()],me.prototype,"blocks",2),c([I()],me.prototype,"editingIndex",2),c([p({attribute:"slash-recent-key"})],me.prototype,"slashRecentKey",2),c([I()],me.prototype,"hasSlashMenu",2),c([I()],me.prototype,"imagePickerIndex",2),c([I()],me.prototype,"imageEdit",2),c([I()],me.prototype,"dropIndicator",2),c([I()],me.prototype,"dragIndex",2),c([I()],me.prototype,"editShell",2),c([I()],me.prototype,"rawMode",2),c([I()],me.prototype,"includeOptions",2),c([I()],me.prototype,"includeLoadFailed",2),c([I()],me.prototype,"includePickerIndex",2),c([I()],me.prototype,"includeQuery",2),c([I()],me.prototype,"linkPickerOpen",2),c([I()],me.prototype,"linkQuery",2),c([I()],me.prototype,"linkResults",2),c([I()],me.prototype,"linkSearchFailed",2),c([p()],me.prototype,"name",2),c([p()],me.prototype,"value",2),c([Te()],me.prototype,"defaultValue",2),c([p()],me.prototype,"placeholder",2),c([p({attribute:"attachment-url"})],me.prototype,"attachmentUrl",2),c([p({attribute:"include-url"})],me.prototype,"includeUrl",2),c([p({attribute:"link-url"})],me.prototype,"linkUrl",2),c([p({type:Boolean,attribute:"allow-raw",reflect:!0})],me.prototype,"allowRaw",2),c([p({type:Boolean,reflect:!0})],me.prototype,"required",2),c([p({type:Boolean,reflect:!0})],me.prototype,"readonly",2),c([p({type:Boolean,reflect:!0})],me.prototype,"disabled",2),c([K("value")],me.prototype,"handleValueChange",1),c([K("includeUrl",{waitUntilFirstUpdate:!0})],me.prototype,"handleIncludeUrlChange",1),c([K("linkUrl",{waitUntilFirstUpdate:!0})],me.prototype,"handleLinkUrlChange",1);var qh=me;me.define("zn-remarkd-editor");var ok=k`:host{display:block}.translations{padding:var(--zn-spacing-small) var(--zn-spacing-medium)}.translations__language{margin-bottom:var(--zn-spacing-medium)}.translations__body{display:block}.translations--flush,.translations--grouped{padding:0}`;var Me=class extends S{constructor(){super(...arguments);this.formControlController=new re(this);this.hasSlotController=new Y(this,"label","help-text");this.name="";this.value='{"en":""}';this.label="";this.helpText="";this.disabled=!1;this.required=!1;this.flush=!1;this.inputType="text";this.allowRaw=!1;this.attachmentUrl="";this.includeUrl="";this.linkUrl="";this.inlineEdit=!1;this.slashItems=[];this.slashPreset="";this.slashTrigger="/";this.slashHeading="Insert";this.slashHideKeys=!1;this.slashRecentKey="";this.grouped=!1;this.languages={en:"EN"};this.values={};this.defaultValue='{"en":""}';this._activeLanguage="en";this.handleLanguageSelect=t=>{t.stopPropagation();let r=t.target.value;typeof r=="string"&&r&&r!==this._activeLanguage&&this.switchLanguage(r)};this.handleLanguageInput=t=>{t.stopPropagation()};this.switchLanguage=t=>{this._activeLanguage=t,this.requestUpdate()};this.handleValueUpdate=t=>{let r=t.target;if(this._activeLanguage){let n=r.value;n!==this.values[this._activeLanguage]&&(this.values={...this.values,[this._activeLanguage]:n},this.updateValue())}};this.handleKeyDown=t=>{if(t.key==="Enter"){if(t.target instanceof lp||t.target instanceof Jo||t.target instanceof qh)return;!(t.altKey||t.ctrlKey||t.metaKey||t.shiftKey)&&!t.defaultPrevented&&!t.isComposing&&this.formControlController.submit()}};this.handleSubmit=()=>{this.formControlController.submit()}}get validity(){return et}get validationMessage(){return""}checkValidity(){return!0}getForm(){return this.formControlController.getForm()}reportValidity(){return!0}setCustomValidity(){}setActiveLanguage(t){this._activeLanguage=t,this.requestUpdate()}getActiveLanguage(){return this._activeLanguage}addLanguageKey(t){let r=this.pendingValues();Object.prototype.hasOwnProperty.call(r,t)||(this.values={...r,[t]:""},this.updateValue())}getValueLanguages(){return Object.keys(this.pendingValues())}hasTranslation(t){return(this.pendingValues()[t]??"").trim()!==""}languageState(t){return this.hasTranslation(t)?{type:"success",label:"Translated"}:{type:"error",label:t==="en"?"Empty":"English"}}languageLabel(t){return this.languages[t]??t.toUpperCase()}pendingValues(){if(Object.keys(this.values).length>0)return this.values;try{return JSON.parse(this.value||"{}")}catch{return this.values}}firstUpdated(){this.hasAttribute("value")||(this.defaultValue=this.value),this.formControlController.updateValidity()}willUpdate(t){let r=t.has("value"),n=t.has("values");if(r&&n){let a=this.value==='{"en":""}',s=Object.keys(this.values).length===0;a&&!s?r=!1:!a&&s?n=!1:this.hasAttribute("values")&&!this.hasAttribute("value")?r=!1:this.hasAttribute("value")&&!this.hasAttribute("values")&&(n=!1)}if(r)try{let a=JSON.parse(this.value||"{}");JSON.stringify(a)!==JSON.stringify(this.values)&&(this.values=a)}catch{}if(n&&(this.value=JSON.stringify(this.values),!this.grouped)){let a=Object.prototype.hasOwnProperty.call(this.values,this._activeLanguage)||Object.prototype.hasOwnProperty.call(this.languages,this._activeLanguage);if(!this._activeLanguage||!a&&this._activeLanguage!=="en"){let s=Object.keys(this.values);s.length>0?this._activeLanguage=s[0]:this._activeLanguage="en"}}}updateValue(){this.value=JSON.stringify(this.values),this.emit("zn-change"),this.emit("zn-input")}renderField(t,r,n){let a=n?"rtl":"ltr";return this.inlineEdit?u`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.162",
+  "version": "1.1.163",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/remarkd-editor/remarkd-editor.component.ts

@@ -279,7 +279,8 @@ function renderConditionalParts(parts: ConditionalPart[]): TemplateResult {
       ${parts.map(part => {
         if (part.kind === 'nested') return renderConditionalWrapper(part.label, part.parts);
         const text = part.lines.join('\n').trim();
-        return text ? html`<div class="remarkd-editor__rendered--parsed">${unsafeHTML(safeParse(text))}</div>` : '';
+        return text ? html`
+          <div class="remarkd-editor__rendered--parsed">${unsafeHTML(safeParse(text))}</div>` : '';
       })}
     </div>`;
 }
@@ -1232,7 +1233,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       fetch(url, {headers: {Accept: 'application/json'}})
         .then(res => {
           if (!res.ok) throw new Error(`link search failed: ${res.status}`);
-          return res.json() as Promise<{items?: LinkOption[]}>;
+          return res.json() as Promise<{ items?: LinkOption[] }>;
         })
         .then(data => {
           if (token !== this.linkSearchToken) return;
@@ -1329,7 +1330,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       this.includeRequest = fetch(this.includeUrl, {headers: {Accept: 'application/json'}})
         .then(res => {
           if (!res.ok) throw new Error(`include list request failed: ${res.status}`);
-          return res.json() as Promise<{items?: IncludeOption[]}>;
+          return res.json() as Promise<{ items?: IncludeOption[] }>;
         })
         .then(data => {
           const items = data.items ?? [];
@@ -1367,7 +1368,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     fetch(url, {headers: {Accept: 'application/json'}})
       .then(res => {
         if (!res.ok) throw new Error(`link resolve failed: ${res.status}`);
-        return res.json() as Promise<{items?: LinkOption[]}>;
+        return res.json() as Promise<{ items?: LinkOption[] }>;
       })
       .then(data => {
         const known = new Map((data.items ?? []).map(item => [item.ref, item]));
@@ -1529,7 +1530,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   private renderImageControls() {
     const data = this.imageEdit;
     if (!data) return '';
-    const aligns: {value: ImageBlockData['align']; icon: string; label: string}[] = [
+    const aligns: { value: ImageBlockData['align']; icon: string; label: string }[] = [
       {value: '', icon: 'align-left@lu', label: 'Align left'},
       {value: 'center', icon: 'align-center@lu', label: 'Align center'},
       {value: 'right', icon: 'align-right@lu', label: 'Align right'},
@@ -1558,7 +1559,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
             <span>Alignment</span>
             <zn-button-group>
               ${aligns.map(align => html`
-                <zn-button type="button" icon-button="small" icon=${align.icon}
+                <zn-button icon-button="small"
+                           icon=${align.icon}
                            ?plain=${data.align !== align.value}
                            tooltip=${align.label}
                            @click=${() => this.updateImageEdit({align: align.value})}></zn-button>`)}
@@ -1581,12 +1583,15 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
           </label>
         </div>
         <div class="remarkd-editor__image-buttons">
-          <zn-button type="button" color="primary" size="small" @click=${this.saveImageEdit}>Save</zn-button>
-          <zn-button type="button" color="secondary" size="small" @click=${this.closeImageEdit}>Cancel</zn-button>
+          <zn-button color="primary" size="small" @click=${this.saveImageEdit}>Save</zn-button>
+          <zn-button color="secondary" size="small" @click=${this.closeImageEdit}>Cancel</zn-button>
           <span class="remarkd-editor__image-buttons-spacer"></span>
-          <zn-button type="button" icon-button="small" plain icon="code@lu"
-                     tooltip="Edit source" @click=${this.editImageSource}></zn-button>
-          <zn-button type="button" icon-button="small" plain icon="trash-2@lu" color="error"
+          <zn-button icon-button="small"
+                     plain
+                     icon="code@lu"
+                     tooltip="Edit source"
+                     @click=${this.editImageSource}></zn-button>
+          <zn-button icon-button="small" plain icon="trash-2@lu" color="error"
                      tooltip="Delete image" @click=${this.deleteImageBlock}></zn-button>
         </div>
       </div>`;
@@ -1744,12 +1749,19 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                   @pointerdown=${this.handleHandlePointerDown}>
               <zn-icon src="grip-vertical@lu" size="16"></zn-icon>
             </span>
-            <zn-button type="button" icon-button="small" plain icon="plus@lu" icon-size="16"
+            <zn-button icon-button="small"
+                       plain
+                       icon="plus@lu"
+                       icon-size="16"
                        tooltip="Add block below"
                        @click=${() => this.insertDraftBlock(index + 1)}></zn-button>
           </div>
           <zn-button class="remarkd-editor__delete"
-                     type="button" icon-button="small" plain icon="x@lu" icon-size="16" color="error"
+                     icon-button="small"
+                     plain
+                     icon="x@lu"
+                     icon-size="16"
+                     color="error"
                      tooltip="Delete block"
                      @click=${() => this.deleteBlock(index)}></zn-button>`}
         <div part="rendered"
@@ -1808,7 +1820,10 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   /** A single toolbar action button, shared by the toolbar bar and the overflow menu. */
   private renderAction(action: EditorAction) {
     return html`
-      <zn-button type="button" icon-button plain icon=${action.icon} icon-size="18"
+      <zn-button icon-button="small"
+                 plain
+                 icon=${action.icon}
+                 icon-size="18"
                  tooltip=${action.label}
                  ?disabled=${this.isActionDisabled(action)}
                  @mousedown=${(e: MouseEvent) => e.preventDefault()}
@@ -1869,8 +1884,12 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                                  // the textarea out from under it.
                                  if (!this.linkPickerOpen) this.suppressBlurCommit = false;
                                }}>
-                    <zn-button slot="trigger" type="button" icon-button plain icon="ellipsis@lu"
-                               icon-size="18" tooltip="More"
+                    <zn-button slot="trigger"
+                               icon-button="small"
+                               plain
+                               icon="ellipsis@lu"
+                               icon-size="18"
+                               tooltip="More"
                                @mousedown=${(e: MouseEvent) => e.preventDefault()}></zn-button>
                     <zn-menu>
                       ${overflowed.flatMap(entry => entry.actions).map(action => this.renderMenuAction(action))}
@@ -1878,8 +1897,11 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                   </zn-dropdown>` : ''}`;
             })()}
             ${this.allowRaw ? html`
-              <zn-button part="raw-toggle" class="remarkd-editor__raw-toggle"
-                         type="button" icon-button icon="code-xml@lu" icon-size="18"
+              <zn-button part="raw-toggle"
+                         class="remarkd-editor__raw-toggle"
+                         icon-button="small"
+                         icon="code-xml@lu"
+                         icon-size="18"
                          ?plain=${!this.rawMode}
                          tooltip=${this.rawMode ? 'Show blocks' : 'Show raw source'}
                          @click=${this.toggleRawMode}></zn-button>` : ''}
@@ -1944,12 +1966,17 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                  @input=${(e: Event) => {
                    this.includeQuery = (e.target as HTMLInputElement).value;
                  }}>
-          <zn-button type="button" icon-button="small" plain icon="x@lu"
-                     tooltip="Cancel" @click=${this.closeIncludePicker}></zn-button>
+          <zn-button icon-button="small"
+                     plain
+                     icon="x@lu"
+                     tooltip="Cancel"
+                     @click=${this.closeIncludePicker}></zn-button>
         </div>
         ${this.includeOptions === null
-          ? html`<div class="remarkd-editor__include-picker-empty">${
-            this.includeLoadFailed ? 'Could not load Includes' : 'Loading…'}</div>`
+          ? html`
+            <div class="remarkd-editor__include-picker-empty">${
+              this.includeLoadFailed ? 'Could not load Includes' : 'Loading…'}
+            </div>`
           : items.length
             ? items.map(item => html`
               <button type="button" class="remarkd-editor__include-option"
@@ -1959,7 +1986,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                 <span class="remarkd-editor__include-option-meta">${item.scope ?? ''}${
                   item.languages ? ` · ${item.languages}` : ' · No content'}</span>
               </button>`)
-            : html`<div class="remarkd-editor__include-picker-empty">No Includes found</div>`}
+            : html`
+              <div class="remarkd-editor__include-picker-empty">No Includes found</div>`}
       </div>`;
   }
 
@@ -1975,12 +2003,17 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                    this.linkQuery = (e.target as HTMLInputElement).value;
                    this.searchLinks(this.linkQuery);
                  }}>
-          <zn-button type="button" icon-button="small" plain icon="x@lu"
-                     tooltip="Cancel" @click=${this.closeLinkPicker}></zn-button>
+          <zn-button icon-button="small"
+                     plain
+                     icon="x@lu"
+                     tooltip="Cancel"
+                     @click=${this.closeLinkPicker}></zn-button>
         </div>
         ${this.linkResults === null
-          ? html`<div class="remarkd-editor__link-picker-empty">${
-            this.linkSearchFailed ? 'Could not search for articles' : 'Searching…'}</div>`
+          ? html`
+            <div class="remarkd-editor__link-picker-empty">${
+              this.linkSearchFailed ? 'Could not search for articles' : 'Searching…'}
+            </div>`
           : this.linkResults.length
             ? this.linkResults.map(item => html`
               <button type="button" class="remarkd-editor__link-option"
@@ -1990,7 +2023,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                   [kinds[item.kind] ?? item.kind, item.context, item.status === 'published' ? '' : item.status]
                     .filter(Boolean).join(' · ')}</span>
               </button>`)
-            : html`<div class="remarkd-editor__link-picker-empty">No articles found</div>`}
+            : html`
+              <div class="remarkd-editor__link-picker-empty">No articles found</div>`}
       </div>`;
   }
 
@@ -2024,7 +2058,9 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                  accept="image/*"
                  droparea
                  @zn-change=${this.handleImagePicked}></zn-file>
-        <zn-button type="button" icon-button="small" plain icon="x@lu"
+        <zn-button icon-button="small"
+                   plain
+                   icon="x@lu"
                    tooltip="Cancel"
                    @click=${this.closeImagePicker}></zn-button>
       </div>`;