@kubex/zinc 1.1.0 → 1.1.2

package/package.json

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

package/scss/shared/_table.scss

@@ -39,12 +39,12 @@ table:not(.remarkd-table) {
 
   thead tr th:first-of-type,
   tbody tr td:first-of-type {
-    padding-left: 14px;
+    padding-left: var(--zn-base-gap, 14px);
   }
 
   thead tr th:last-of-type,
   tbody tr td:last-of-type {
-    padding-right: 14px;
+    padding-right: var(--zn-base-gap, 14px);
   }
 
   th, td {

package/src/components/collapsible/collapsible.scss

@@ -8,6 +8,10 @@
   transform: rotate(180deg);
 }
 
+:host-context(.app-navigation) .header {
+  padding: var(--zn-base-px);
+}
+
 .header {
   display: flex;
   flex-direction: row;

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

@@ -69,12 +69,12 @@ table {
 
   thead tr th:first-of-type,
   tbody tr td:first-of-type {
-    padding-left: 14px;
+    padding-left: var(--zn-base-gap, 14px);
   }
 
   thead tr th:last-of-type,
   tbody tr td:last-of-type {
-    padding-right: 14px;
+    padding-right: var(--zn-base-gap, 14px);
   }
 
   th, td {

package/src/components/expanding-action/expanding-action.component.ts

@@ -56,6 +56,7 @@ export default class ZnExpandingAction extends ZincElement {
   private _actions: HTMLElement[] = [];
   private _preload = true;
   private _metaObserved = false;
+  private _placementObserver?: MutationObserver;
 
   private readonly _countObserver = new MutationController(this, {
     target: null,
@@ -241,6 +242,42 @@ export default class ZnExpandingAction extends ZincElement {
     this.open = false;
   }
 
+  private _updateTriggerSide = () => {
+    const trigger = this.shadowRoot?.querySelector('.expanding-action__dropdown zn-button[slot="trigger"]');
+    const content = this.shadowRoot?.querySelector('#content');
+    if (!trigger || !content) return;
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    if (contentRect.width === 0) return;
+
+    const triggerCenter = (triggerRect.left + triggerRect.right) / 2;
+    const contentCenter = (contentRect.left + contentRect.right) / 2;
+    this.setAttribute('data-trigger-side', triggerCenter > contentCenter ? 'right' : 'left');
+  }
+
+  private _observePlacement() {
+    const dropdown = this.shadowRoot?.querySelector('.expanding-action__dropdown');
+    const popup = dropdown?.shadowRoot?.querySelector('.dropdown');
+    if (!popup) {
+      requestAnimationFrame(() => this._observePlacement());
+      return;
+    }
+
+    this._updateTriggerSide();
+
+    if (this._placementObserver) return;
+
+    this._placementObserver = new MutationObserver(this._updateTriggerSide);
+    this._placementObserver.observe(popup, {attributes: true, attributeFilter: ['data-current-placement']});
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._placementObserver?.disconnect();
+    this._placementObserver = undefined;
+  }
+
   render() {
     return html`
       ${this.method === 'fill' ? html`
@@ -274,6 +311,7 @@ export default class ZnExpandingAction extends ZincElement {
                    placement="bottom-end"
                    @zn-show="${() => {
                      this.open = true;
+                     this._observePlacement();
                    }}"
                    @zn-hide="${() => {
                      this.open = false;

package/src/components/expanding-action/expanding-action.scss

@@ -79,24 +79,31 @@
   min-width: 300px;
   width: var(--expanding-action-basis, var(--zn-container-smp, 320px));
   max-width: 80vw;
-  max-height: min(60vh, var(--expanding-action-max-height, var(--auto-size-available-height, 50vh)));
   background-color: rgb(var(--zn-panel));
   box-shadow: 0 8px 16px -6px rgba(33, 33, 33, 0.18);
   border: solid 1px rgb(var(--zn-border-color));
-  border-top: 0;
-  border-radius: 0 0 var(--zn-border-radius) var(--zn-border-radius);
+  border-radius: var(--zn-border-radius) 0 var(--zn-border-radius) var(--zn-border-radius);
   padding: 0;
   height: 100%;
-  overflow: hidden;
-  overflow-y: auto;
 
   &::before {
     content: "";
     position: absolute;
-    inset: 0 calc(var(--expanding-action-trigger-width) - 2px) auto 0;
-    z-index: 2;
-    height: 1px;
-    background: rgb(var(--zn-border-color));
+    top: -1px;
+    left: calc(100% - var(--expanding-action-trigger-width) + 2px); // Works with width of trigger button and borders
+    right: 0;
+    z-index: 1;
+    height: 2px;
+    background: rgb(var(--zn-panel));
+  }
+}
+
+:host([data-trigger-side="left"]) .expanding-action--drop .expanding-action__content {
+  border-radius: 0 var(--zn-border-radius) var(--zn-border-radius) var(--zn-border-radius);
+
+  &::before {
+    left: 0;
+    right: calc(100% - var(--expanding-action-trigger-width) + 2px); // Works with width of trigger button and borders
   }
 }
 
@@ -109,6 +116,7 @@
     position: absolute;
     inset: 0;
     z-index: -1;
+    height: 41px;
     background: rgb(var(--zn-panel));
     border: solid 1px rgb(var(--zn-border-color));
     border-bottom-color: rgb(var(--zn-panel));

package/src/components/menu/menu.scss

@@ -22,8 +22,8 @@
 :host([variant="shell"]) {
   display: flex;
   flex-direction: column;
-  gap: var(--zn-spacing-x-small);
-  padding: var(--zn-spacing-x-small);
+  gap: var(--zn-spacing-2x-small);
+  padding: var(--zn-spacing-2x-small);
   border: 1px solid rgb(var(--zn-border-color));
   border-radius: var(--zn-border-radius);
   min-width: 245px;

package/src/components/navbar/navbar.scss

@@ -25,19 +25,18 @@
   transform: translateY(-100%);
 
   ul.navbar {
-    background-color: rgb(var(--zn-body));
+    position: relative;
 
     li {
       z-index: 2;
     }
 
-    position: relative;
-
     &::after {
       z-index: 1;
       content: "";
       position: absolute;
       inset: 0;
+      border-radius: 6px 6px 0 0;
       background-color: rgb(var(--zn-body));
     }
 
@@ -49,7 +48,7 @@
       right: -2px;
       left: -2px;
       bottom: 0;
-      border-radius: 3px;
+      border-radius: 10px;
       backdrop-filter: blur(2px) opacity(0.8);
     }
   }
@@ -249,7 +248,7 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
 
 :host([icon-only]:not([stacked]):not([icon-bar])) {
   ul.navbar {
-    height: 32px;
+    height: 36px;
   }
 }
 
@@ -277,7 +276,6 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
 
       &.active, &.zn-tb-active {
         color: var(--zn-text-tab-link-active-color);
-        border-bottom: 1px solid rgb(var(--navbar-active-colour));
       }
     }
 
@@ -380,7 +378,7 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
         content: '';
         left: 50%;
         right: 50%;
-        bottom: -2px;
+        bottom: -1px;
         position: absolute;
         background-color: rgb(var(--navbar-active-colour));
         transition: all 300ms ease-in-out;

package/src/internal/zinc-element.ts

@@ -10,8 +10,13 @@ import type {
   ValidEventTypeMap,
   ZincEventInit
 } from "./event";
+import type {SignalWatcherApi} from "@lit-labs/signals";
 
-export default class ZincElement extends SignalWatcher(LitElement) {
+type Constructor<T = NonNullable<unknown>> = new (...args: any[]) => T;
+
+const ZincElementBase: typeof LitElement & Constructor<SignalWatcherApi> = SignalWatcher(LitElement);
+
+export default class ZincElement extends ZincElementBase {
   @property() dir: string; // LTR or RTL direction
   @property() lang: string; // Language
   @property({reflect: true}) t: string; // Theme (light or dark)