@kubex/zinc 1.1.161 → 1.1.162

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/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;
 }