@kubex/zinc 1.1.161 → 1.1.163

package/src/components/data-table/data-table.scss

@@ -44,7 +44,7 @@ table {
     border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
   }
 
-  &.with-hover tbody tr.table__row--data:not(.table__row--selected):hover td {
+  &.with-hover tbody tr.table__row--data:hover td {
     background-color: rgba(var(--zn-primary), 0.05) !important;
     cursor: pointer;
   }
@@ -414,68 +414,24 @@ zn-menu::part(base) {
   background-color: rgb(var(--zn-panel, 255, 255, 255));
 }
 
-/* Table Select Styles */
-table tbody tr.table__row--selected {
-  background-color: var(--zn-color-purple-100);
-
-  &:hover {
-    background-color: var(--zn-color-purple-200) !important;
-  }
-
-  td {
-    border-top: 1px solid var(--zn-color-purple-600) !important;
-    border-bottom: 1px solid var(--zn-color-purple-600) !important;
-  }
-
-  td:first-of-type {
-    border-left: 1px solid var(--zn-color-purple-600);
-  }
-
-  td:last-of-type {
-    border-right: 1px solid var(--zn-color-purple-600);
-  }
-
-  &:last-of-type td:first-of-type {
-    border-bottom-left-radius: var(--zn-border-radius);
-  }
-
-  &:last-of-type td:last-of-type {
-    border-bottom-right-radius: var(--zn-border-radius);
-  }
-
-  & + tr.table__row--selected td {
-    border-top: 0 !important;
-
-    &:first-of-type {
-      border-top-left-radius: 0;
-    }
-
-    &:last-of-type {
-      border-top-right-radius: 0;
-    }
-  }
-
-  &:has(+ tr.table__row--selected) td {
-    border-bottom: 0 !important;
-  }
-
-  &:first-of-type td {
-    border-top: 0 !important;
-  }
-
-  &:has(+ tr.table__row--selected) {
-    td:first-of-type {
-      border-bottom-left-radius: 0;
-    }
+.table tr .table__head[tabindex]:focus-visible {
+  outline: var(--zn-focus-ring);
+  outline-offset: calc(-1 * var(--zn-focus-ring-width));
+}
 
-    td:last-of-type {
-      border-bottom-right-radius: 0;
-    }
-  }
+.table tr .table__head--checkbox,
+.table tr .table__cell--checkbox {
+  width: 1px;
+  min-width: 0;
+  padding-right: 0;
 }
 
-table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
-  border-bottom-color: var(--zn-color-purple-600) !important;
+// Visually hidden rather than display: none, which would stop a slotted zn-confirm's dialog rendering
+.table__actions-source {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
 }
 
 tbody tr.table__row--group th {

package/src/components/dropdown/dropdown.component.ts

@@ -182,7 +182,7 @@ export default class ZnDropdown extends ZincElement {
   }
 
   private async handleTriggerKeyDown(event: KeyboardEvent) {
-    if ([' ', 'Enter', 'Tab'].includes(event.key)) {
+    if ([' ', 'Enter'].includes(event.key)) {
       event.preventDefault();
       await this.handleTriggerClick();
       return;
@@ -252,9 +252,12 @@ export default class ZnDropdown extends ZincElement {
 
     if (event.key === 'Tab') {
       if (this.open) {
-        event.preventDefault();
         this.hide().then(r => r);
-        this.focusOnTrigger();
+        // Tabbing out of the menu resumes from the trigger; from the trigger, Tab moves on as usual
+        if (this.panel?.assignedElements({flatten: true}).some(el => el.matches(':focus-within'))) {
+          event.preventDefault();
+          this.focusOnTrigger();
+        }
         return;
       }
 

package/src/components/panel/panel.scss

@@ -141,11 +141,34 @@
     }
   }
 
+  // Nothing visible to clip to, so leave room for the focus ring of a control sitting flush against the edge.
+  // The body scrolls, so it can't take a clip margin — it gets a gutter cancelled by a negative margin instead.
   &--transparent {
     .panel__header {
       padding-left: 0;
       padding-right: 0;
     }
+
+    .panel__inner,
+    .panel__content {
+      overflow: clip;
+      overflow-clip-margin: var(--zn-focus-ring-outset);
+    }
+
+    &.panel--flush .panel__body {
+      padding: var(--zn-focus-ring-outset);
+      margin: calc(var(--zn-focus-ring-outset) * -1);
+    }
+
+    &.panel--flush-x .panel__body {
+      padding-inline: var(--zn-focus-ring-outset);
+      margin-inline: calc(var(--zn-focus-ring-outset) * -1);
+    }
+
+    &.panel--flush-y .panel__body {
+      padding-block: var(--zn-focus-ring-outset);
+      margin-block: calc(var(--zn-focus-ring-outset) * -1);
+    }
   }
 
   &--cosmic {

package/src/components/popup/popup.component.ts

@@ -386,6 +386,12 @@ export default class ZnPopup extends ZincElement {
         ? (element: Element) => platform.getOffsetParent(element, offsetParent)
         : platform.getOffsetParent;
 
+    // A closed popover has no size to measure, so it would first land on top of its anchor
+    if (this.popup.isConnected && !this.popup.matches(':popover-open')) {
+      this.popup.style.visibility = 'hidden';
+      this.popup.showPopover();
+    }
+
     computePosition(this.anchorEl, this.popup, {
       placement: this.placement,
       middleware,
@@ -402,7 +408,8 @@ export default class ZnPopup extends ZincElement {
 
       Object.assign(this.popup.style, {
         left: `${x}px`,
-        top: `${y}px`
+        top: `${y}px`,
+        visibility: ''
       });
 
       if (!this.popup?.isConnected) return;

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>`;

package/src/components/tooltip/tooltip.component.ts

@@ -191,6 +191,14 @@ export default class ZnTooltip extends ZincElement {
     waitForEvent(this, 'zn-after-hide');
   }
 
+  // The bubble renders inside its anchor's host (e.g. zn-button), so its clicks would reach the host's
+  // listeners. Anchor clicks target the slotted element, so only bubble clicks target the popup.
+  private handlePopupClick = (event: MouseEvent) => {
+    if (event.target === event.currentTarget) {
+      event.stopPropagation();
+    }
+  };
+
   render() {
     return html`
       <zn-popup
@@ -207,7 +215,8 @@ export default class ZnTooltip extends ZincElement {
         flip
         shift
         arrow
-        hover-bridge>
+        hover-bridge
+        @click="${this.handlePopupClick}">
         <slot slot="anchor"></slot>
         <div part="body" id="tooltip" class="tooltip__body"
              role="tooltip"

package/src/components/tooltip/tooltip.scss

@@ -9,6 +9,11 @@
   --arrow-size: 6px;
 }
 
+.tooltip::part(popup),
+.tooltip::part(hover-bridge) {
+  cursor: default;
+}
+
 .tooltip[placement^='top']::part(popup) {
   transform-origin: bottom;
 }