@kubex/zinc 1.0.113 → 1.0.115

package/src/components/split-pane/split-pane.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnSplitPane from './split-pane.component';
 
 describe('<zn-split-pane>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,190 @@ describe('<zn-split-pane>', () => {
 
     expect(el).to.exist;
   });
+
+  it('should hide the secondary pane and disable the resizer', async () => {
+    const el = await fixture(html`
+      <zn-split-pane hide="secondary">
+        <div slot="primary">Primary content</div>
+        <div slot="secondary">Secondary content</div>
+      </zn-split-pane>
+    `);
+    const primaryPane = el.shadowRoot?.querySelector('#primary-pane') as HTMLElement;
+    const secondaryPane = el.shadowRoot?.querySelector('#secondary-pane') as HTMLElement;
+    const resizer = el.shadowRoot?.querySelector('#resizer') as HTMLElement;
+
+    expect(getComputedStyle(secondaryPane).maxWidth).to.equal('0px');
+    expect(getComputedStyle(secondaryPane).visibility).to.equal('hidden');
+    expect(getComputedStyle(secondaryPane).pointerEvents).to.equal('none');
+    expect(getComputedStyle(resizer).display).to.equal('none');
+    expect(getComputedStyle(primaryPane).maxWidth).to.equal('100%');
+  });
+
+  it('should hide the primary pane and disable the resizer', async () => {
+    const el = await fixture(html`
+      <zn-split-pane hide="primary">
+        <div slot="primary">Primary content</div>
+        <div slot="secondary">Secondary content</div>
+      </zn-split-pane>
+    `);
+    const primaryPane = el.shadowRoot?.querySelector('#primary-pane') as HTMLElement;
+    const secondaryPane = el.shadowRoot?.querySelector('#secondary-pane') as HTMLElement;
+    const resizer = el.shadowRoot?.querySelector('#resizer') as HTMLElement;
+
+    expect(getComputedStyle(primaryPane).maxWidth).to.equal('0px');
+    expect(getComputedStyle(primaryPane).visibility).to.equal('hidden');
+    expect(getComputedStyle(primaryPane).pointerEvents).to.equal('none');
+    expect(getComputedStyle(resizer).display).to.equal('none');
+    expect(getComputedStyle(secondaryPane).maxWidth).to.equal('100%');
+  });
+
+  it('should render split pane chrome when pane slots are provided', async () => {
+    const el = await fixture(html`
+      <zn-split-pane>
+        <div slot="primary">Primary content</div>
+        <div slot="secondary">Secondary content</div>
+      </zn-split-pane>
+    `);
+
+    expect(el.shadowRoot?.querySelector('slot[name="primary"]')).to.exist;
+    expect(el.shadowRoot?.querySelector('slot[name="secondary"]')).to.exist;
+    expect(el.shadowRoot?.querySelector('#resizer')).to.exist;
+  });
+
+  it('merges immediate nested split pane navigation into the parent navigation', async () => {
+    const el = await fixture<ZnSplitPane>(html`
+      <zn-split-pane primary-caption="List" secondary-caption="Workspace" style="width: 500px; height: 400px;">
+        <div slot="primary">List content</div>
+        <div slot="secondary">
+          <zn-split-pane primary-caption="Preview" secondary-caption="Details">
+            <div slot="primary">Preview content</div>
+            <div slot="secondary">Details content</div>
+          </zn-split-pane>
+        </div>
+      </zn-split-pane>
+    `);
+    await el.updateComplete;
+    const nested = el.querySelector<ZnSplitPane>('zn-split-pane')!;
+    await nested.updateComplete;
+    const navItems = Array.from(el.shadowRoot!.querySelectorAll('#split-nav li'));
+
+    expect(nested.hasAttribute('merged-navigation')).to.equal(true);
+    expect(navItems.map(item => item.textContent?.trim())).to.deep.equal(['List', 'Preview', 'Details']);
+
+    (navItems[2] as HTMLElement).click();
+    await el.updateComplete;
+    await nested.updateComplete;
+
+    expect(el.getAttribute('focus-pane')).to.equal('1');
+    expect(nested.getAttribute('focus-pane')).to.equal('1');
+  });
+
+  it('does not merge nested navigation when the parent is wide enough to hide its own nav', async () => {
+    const el = await fixture<ZnSplitPane>(html`
+      <zn-split-pane primary-caption="List" secondary-caption="Workspace" style="width: 1000px; height: 400px;">
+        <div slot="primary">List content</div>
+        <div slot="secondary">
+          <zn-split-pane primary-caption="Preview" secondary-caption="Details">
+            <div slot="primary">Preview content</div>
+            <div slot="secondary">Details content</div>
+          </zn-split-pane>
+        </div>
+      </zn-split-pane>
+    `);
+    await el.updateComplete;
+    const nested = el.querySelector<ZnSplitPane>('zn-split-pane')!;
+    await nested.updateComplete;
+
+    expect(nested.hasAttribute('merged-navigation')).to.equal(false);
+  });
+
+  it('keeps nested split pane navigation visible when the parent does not merge navigation', async () => {
+    const el = await fixture<ZnSplitPane>(html`
+      <zn-split-pane vertical>
+        <div slot="primary">
+          <zn-split-pane primary-caption="Preview" secondary-caption="Details">
+            <div slot="primary">Preview content</div>
+            <div slot="secondary">Details content</div>
+          </zn-split-pane>
+        </div>
+        <div slot="secondary">Bottom content</div>
+      </zn-split-pane>
+    `);
+    const nested = el.querySelector<ZnSplitPane>('zn-split-pane')!;
+
+    expect(nested.hasAttribute('merged-navigation')).to.equal(false);
+  });
+
+  it('recursively merges nested split pane navigation', async () => {
+    const el = await fixture<ZnSplitPane>(html`
+      <zn-split-pane primary-caption="List" secondary-caption="Workspace" style="width: 500px; height: 400px;">
+        <div slot="primary">List content</div>
+        <div slot="secondary">
+          <zn-split-pane primary-caption="Preview" secondary-caption="Details">
+            <div slot="primary">Preview content</div>
+            <div slot="secondary">
+              <zn-split-pane primary-caption="Data" secondary-caption="Settings">
+                <div slot="primary">Data content</div>
+                <div slot="secondary">Settings content</div>
+              </zn-split-pane>
+            </div>
+          </zn-split-pane>
+        </div>
+      </zn-split-pane>
+    `);
+    await el.updateComplete;
+    const nested = el.querySelector<ZnSplitPane>('zn-split-pane')!;
+    const deepNested = nested.querySelector<ZnSplitPane>('zn-split-pane')!;
+    await nested.updateComplete;
+    await deepNested.updateComplete;
+    const navItems = Array.from(el.shadowRoot!.querySelectorAll('#split-nav li'));
+
+    expect(deepNested.hasAttribute('merged-navigation')).to.equal(true);
+    expect(navItems.map(item => item.textContent?.trim())).to.deep.equal(['List', 'Preview', 'Data', 'Settings']);
+
+    (navItems[3] as HTMLElement).click();
+    await el.updateComplete;
+    await nested.updateComplete;
+    await deepNested.updateComplete;
+
+    expect(el.getAttribute('focus-pane')).to.equal('1');
+    expect(nested.getAttribute('focus-pane')).to.equal('1');
+    expect(deepNested.getAttribute('focus-pane')).to.equal('1');
+  });
+
+  it('should keep the secondary pane above the configured percentage minimum', async () => {
+    const el = await fixture<ZnSplitPane>(html`
+      <zn-split-pane min-secondary-size="25" style="display: flex; width: 400px; height: 200px;">
+        <div slot="primary">Primary content</div>
+        <div slot="secondary">Secondary content</div>
+      </zn-split-pane>
+    `);
+    const resizer = el.shadowRoot!.querySelector('#resizer')!;
+
+    resizer.dispatchEvent(new MouseEvent('mousedown', {clientX: 0, bubbles: true}));
+    window.dispatchEvent(new MouseEvent('mousemove', {clientX: 380, bubbles: true}));
+    await el.updateComplete;
+    window.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
+
+    expect((el.shadowRoot?.querySelector('style')?.textContent ?? '')).to.contain('--min-secondary-panel-size: 25%');
+    expect((el.shadowRoot?.querySelector('style')?.textContent ?? '')).to.contain('--initial-size: 75%');
+  });
+
+  it('should keep the secondary pane above the configured pixel minimum', async () => {
+    const el = await fixture<ZnSplitPane>(html`
+      <zn-split-pane pixels min-secondary-size="125" style="display: flex; width: 400px; height: 200px;">
+        <div slot="primary">Primary content</div>
+        <div slot="secondary">Secondary content</div>
+      </zn-split-pane>
+    `);
+    const resizer = el.shadowRoot!.querySelector('#resizer')!;
+
+    resizer.dispatchEvent(new MouseEvent('mousedown', {clientX: 0, bubbles: true}));
+    window.dispatchEvent(new MouseEvent('mousemove', {clientX: 350, bubbles: true}));
+    await el.updateComplete;
+    window.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
+
+    expect((el.shadowRoot?.querySelector('style')?.textContent ?? '')).to.contain('--min-secondary-panel-size: 125px');
+    expect((el.shadowRoot?.querySelector('style')?.textContent ?? '')).to.contain('--initial-size: 275px');
+  });
 });

package/src/components/style/style.component.ts

@@ -26,6 +26,7 @@ export default class ZnStyle extends ZincElement {
   @property() height = '';
   @property() pad = '';
   @property() margin = '';
+  @property({type: Boolean}) gutter = false;
   @property({attribute: 'a-margin'}) autoMargin = '';
 
   connectedCallback() {
@@ -33,6 +34,13 @@ export default class ZnStyle extends ZincElement {
 
     let display = this.display || 'contents';
 
+    if (this.gutter) {
+      this.classList.add('zn-gutter');
+      if (display === 'contents') {
+        display = 'block'
+      }
+    }
+
     if (this.color === '') {
       if (this.error) {
         this.color = 'error';

package/src/components/tab/index.ts

@@ -0,0 +1,13 @@
+import ZnTab from './tab.component';
+
+export * from './tab.component';
+export default ZnTab;
+
+ZnTab.define('zn-tab');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-tab': ZnTab;
+  }
+}
+

package/src/components/tab/tab.component.ts

@@ -0,0 +1,25 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './tab.scss';
+
+/**
+ * @summary Defines a tab panel for use inside zn-page.
+ * @documentation https://zinc.style/components/tab
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The tab panel content.
+ */
+export default class ZnTab extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() caption: string;
+  @property({type: Number}) priority: number;
+  @property() uri: string;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/components/tab/tab.scss

@@ -0,0 +1,7 @@
+@use "../../wc";
+
+:host {
+  display: contents;
+  height: 100%;
+}
+

package/src/components/table/table.component.ts

@@ -2,6 +2,7 @@ import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import ZincElement from '../../internal/zinc-element';
 
@@ -40,14 +41,18 @@ export default class ZnTable extends ZincElement {
   private wideColumn: any = [];
   private rows: any = [];
 
+  private readonly resizeObserver = new ResizeController(this, {
+    target: null,
+    callback: () => this.resizing(),
+  });
 
   resizing() {
     // TODO Resizing event
   }
 
   connectedCallback() {
-    if (this.fixedFirst) {
-      new ResizeObserver((_) => this.resizing).observe(this.parentElement as Element);
+    if (this.fixedFirst && this.parentElement) {
+      this.resizeObserver.observe(this.parentElement);
     }
 
     if (this.data === null || this.data === undefined) {

package/src/components/table/table.scss

@@ -95,6 +95,7 @@ td.capcol {
   }
 
   .actions button {
+    display: flex;
     padding: 0;
     margin: 0;
     background: transparent;

package/src/components/tabs/tabs.component.ts

@@ -1,10 +1,11 @@
-import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
-import {deepQuerySelectorAll} from "../../utilities/query";
-import {HasSlotController} from "../../internal/slot";
-import {ifDefined} from "lit/directives/if-defined.js";
-import {md5} from "../../utilities/md5";
-import {property} from 'lit/decorators.js';
-import {Store} from "../../internal/storage";
+import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
+import { deepQuerySelectorAll } from "../../utilities/query";
+import { HasSlotController } from "../../internal/slot";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { md5 } from "../../utilities/md5";
+import { MutationController } from '@lit-labs/observers/mutation-controller.js';
+import { property } from 'lit/decorators.js';
+import { Store } from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './tabs.scss';
@@ -28,24 +29,25 @@ import styles from './tabs.scss';
  */
 export default class ZnTabs extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
-  @property({attribute: 'master-id', reflect: true}) masterId: string;
-  @property({attribute: 'default-uri', reflect: true}) defaultUri = '';
-  @property({attribute: 'active', reflect: true}) _current = '';
-  @property({attribute: 'split', type: Number, reflect: true}) _split: number;
-  @property({attribute: 'split-min', type: Number, reflect: true}) _splitMin = 60;
-  @property({attribute: 'split-max', type: Number, reflect: true}) _splitMax: number;
-  @property({attribute: 'primary-caption', reflect: true}) primaryCaption = 'Navigation';
-  @property({attribute: 'secondary-caption', reflect: true}) secondaryCaption = 'Content';
-  @property({attribute: 'no-prefetch', type: Boolean, reflect: true}) noPrefetch = false;
-  @property({attribute: 'no-cache', type: Boolean, reflect: true}) noCache = false;
+  @property({ attribute: 'master-id', reflect: true }) masterId: string;
+  @property({ attribute: 'default-uri', reflect: true }) defaultUri = '';
+  @property({ attribute: 'active', reflect: true }) _current = '';
+  @property({ attribute: 'split', type: Number, reflect: true }) _split: number;
+  @property({ attribute: 'split-min', type: Number, reflect: true }) _splitMin = 60;
+  @property({ attribute: 'split-min-secondary', type: Number, reflect: true }) _splitMinSecondary: number;
+  @property({ attribute: 'split-max', type: Number, reflect: true }) _splitMax: number;
+  @property({ attribute: 'primary-caption', reflect: true }) primaryCaption = 'Navigation';
+  @property({ attribute: 'secondary-caption', reflect: true }) secondaryCaption = 'Content';
+  @property({ attribute: 'no-prefetch', type: Boolean, reflect: true }) noPrefetch = false;
+  @property({ attribute: 'no-cache', type: Boolean, reflect: true }) noCache = false;
   // session storage if not local
-  @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
-  @property({attribute: 'store-key'}) storeKey: string;
-  @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 0;
-  @property({attribute: 'padded', type: Boolean, reflect: true}) padded = false;
-  @property({attribute: 'fetch-style', type: String, reflect: true}) fetchStyle = "";
-  @property({attribute: 'full-width', type: Boolean, reflect: true}) fullWidth = false;
-  @property({attribute: 'padded-right', type: Boolean, reflect: true}) paddedRight = false;
+  @property({ attribute: 'local-storage', type: Boolean, reflect: true }) localStorage: boolean;
+  @property({ attribute: 'store-key' }) storeKey: string;
+  @property({ attribute: 'store-ttl', type: Number, reflect: true }) storeTtl = 0;
+  @property({ attribute: 'padded', type: Boolean, reflect: true }) padded = false;
+  @property({ attribute: 'fetch-style', type: String, reflect: true }) fetchStyle = "";
+  @property({ attribute: 'full-width', type: Boolean, reflect: true }) fullWidth = false;
+  @property({ attribute: 'padded-right', type: Boolean, reflect: true }) paddedRight = false;
   @property() monitor: string;
   // Creating a header
   @property() caption: string;
@@ -61,6 +63,45 @@ export default class ZnTabs extends ZincElement {
   private _knownUri: Map<string, string> = new Map<string, string>();
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'bottom', 'right', 'left', 'top', 'actions');
 
+  private readonly _domObserver = new MutationController(this, {
+    target: null,
+    config: { childList: true, subtree: true },
+    callback: mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type !== 'childList') return;
+        if (mutation.addedNodes.length > 0) {
+          this._registerTabs();
+        }
+        if (mutation.removedNodes.length > 0) {
+          mutation.removedNodes.forEach(node => {
+            const id = node instanceof HTMLElement ? node.id : '';
+            if (id) this.removeTabAndPanel(id);
+          });
+        }
+      });
+    },
+  });
+
+  private readonly _monitorObserver = new MutationController(this, {
+    target: null,
+    config: { childList: true, subtree: true },
+    callback: mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type !== 'childList') return;
+        mutation.addedNodes.forEach(node => {
+          if (node instanceof HTMLElement && node.id === this.monitor) {
+            this.reRegisterTabs();
+            const storedValue = this._store.get(this.storeKey);
+            if (storedValue !== null) {
+              this._prepareTab(storedValue);
+              this.setActiveTab(storedValue, false, false);
+            }
+          }
+        });
+      });
+    },
+  });
+
   constructor() {
     super();
     this._panels = new Map<string, Element[]>();
@@ -100,25 +141,7 @@ export default class ZnTabs extends ZincElement {
 
   monitorDom() {
     if (this.monitor) {
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === 'childList') {
-            mutation.addedNodes.forEach((node) => {
-              if (node instanceof HTMLElement && node.id === this.monitor) {
-                this.reRegisterTabs();
-
-                const storedValue = this._store.get(this.storeKey);
-                if (storedValue !== null) {
-                  this._prepareTab(storedValue);
-                  this.setActiveTab(storedValue, false, false);
-                }
-              }
-            });
-          }
-        });
-      });
-
-      observer.observe(this, {childList: true, subtree: true});
+      this._monitorObserver.observe(this);
     }
   }
 
@@ -170,7 +193,7 @@ export default class ZnTabs extends ZincElement {
 
     this.addEventListener('zn-menu-select', () => {
       setTimeout(this.reRegisterTabs, 200);
-    }, {passive: true});
+    }, { passive: true });
   }
 
   switchTab(inc: number) {
@@ -237,6 +260,8 @@ export default class ZnTabs extends ZincElement {
     tabNode.setAttribute("id", tabId);
     if (this.fetchStyle !== "") {
       tabNode.setAttribute("data-fetch-style", this.fetchStyle);
+    } else if (tabEle.hasAttribute('data-fetch-style')) {
+      tabNode.setAttribute("data-fetch-style", tabEle.getAttribute('data-fetch-style') ?? "");
     }
     tabNode.setAttribute('data-self-uri', tabUri);
     tabNode.textContent = "Loading ...";
@@ -245,8 +270,9 @@ export default class ZnTabs extends ZincElement {
       this._panel.appendChild(tabNode);
       this._panels.set(tabId, [tabNode]);
     }
+
     document.dispatchEvent(new CustomEvent('zn-new-element', {
-      detail: {element: tabNode, source: tabEle}
+      detail: { element: tabNode, source: tabEle }
     }));
     return tabNode;
   }
@@ -371,7 +397,7 @@ export default class ZnTabs extends ZincElement {
               gaid = this._activeTab.getAttribute('gaid')!;
             }
             document.dispatchEvent(new CustomEvent('zn-refresh-element', {
-              detail: {element: element, uri: uri, gaid: gaid}
+              detail: { element: element, uri: uri, gaid: gaid }
             }));
           }
         });
@@ -393,29 +419,7 @@ export default class ZnTabs extends ZincElement {
   }
 
   observerDom() {
-    // observe the DOM for changes
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          if (mutation.addedNodes.length > 0) {
-            this._registerTabs();
-          }
-          if (mutation.removedNodes.length > 0) {
-            for (let i = 0; i < mutation.removedNodes.length; i++) {
-              const node = mutation.removedNodes[i] as HTMLElement;
-              if (node.id) {
-                this.removeTabAndPanel(node.id);
-              }
-            }
-          }
-        }
-      });
-    });
-
-    observer.observe(this, {
-      childList: true,
-      subtree: true
-    });
+    this._domObserver.observe(this);
   }
 
   removeTabAndPanel(tabId: string) {
@@ -504,6 +508,7 @@ export default class ZnTabs extends ZincElement {
             padded-right="${ifDefined(this.paddedRight ? true : undefined)}"
             pixels bordered
             min-size="${this._splitMin}"
+            min-secondary-size="${ifDefined(this._splitMinSecondary ? this._splitMinSecondary : undefined)}"
             max-size="${ifDefined(this._splitMax ? this._splitMax : undefined)}"
             initial-size="${this._split}">
             <slot slot="primary" name="left"></slot>
@@ -526,7 +531,7 @@ export default class ZnTabs extends ZincElement {
         <slot name="top"></slot>
         <div id="mid" part="mid">
           <slot name="left"></slot>
-          <div id="content">
+          <div id="content" part="content">
             <slot></slot>
           </div>
           <slot name="right"></slot>

package/src/components/tabs/tabs.scss

@@ -28,7 +28,7 @@
   width: 100%;
 
   zn-header::part(base) {
-    border-bottom-width: 0 !important;
+    //border-bottom-width: 0 !important;
   }
 }
 

package/src/components/textarea/textarea.component.ts

@@ -6,6 +6,7 @@ import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {live} from "lit/directives/live.js";
 import {property, query, state} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {watch} from '../../internal/watch';
 import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
 
@@ -42,7 +43,10 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
     assumeInteractionOn: ['zn-blur', 'zn-input']
   });
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
-  private resizeObserver: ResizeObserver;
+  private readonly resizeObserver = new ResizeController(this, {
+    target: null,
+    callback: () => this.setTextareaHeight(),
+  });
   /** Ensures we only attempt to derive the initial value from light DOM content once */
   private _didInitFromContent = false;
 
@@ -187,8 +191,6 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
       }
     }
 
-    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
-
     this.updateComplete.then(() => {
       this.resizeObserver.observe(this.input);
 
@@ -202,11 +204,6 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
     this.formControlController.updateValidity();
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.resizeObserver.unobserve(this.input);
-  }
-
   private handleBlur() {
     this.hasFocus = false;
     this.emit('zn-blur');

package/src/components/tile/tile.scss

@@ -12,7 +12,7 @@
   &--has-properties,
   &--has-actions,
   &--has-image {
-    padding: var(--zn-spacing-large);
+    padding: var(--zn-spacing-medium);
   }
 
 
@@ -62,7 +62,7 @@
   justify-content: flex-end;
   width: 50%;
   flex-grow: 1;
-  column-gap: var(--zn-spacing-large);
+  column-gap: var(--zn-spacing-medium);
 }
 
 .tile__properties {

package/src/components/translation-group/translation-group.component.ts

@@ -3,6 +3,7 @@ import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from
 import {HasSlotController} from '../../internal/slot';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {property, state} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import ZnButton from '../button';
 import ZnButtonGroup from '../button-group';
 import ZnDropdown from '../dropdown';
@@ -56,27 +57,28 @@ export default class ZnTranslationGroup extends ZnPanel {
 
   @state() private _overflowIndex = -1;
 
-  private _resizeObserver?: ResizeObserver;
   private _lastObservedWidth = 0;
   private _measureRafId = 0;
 
-  connectedCallback() {
-    super.connectedCallback();
-    this._resizeObserver = new ResizeObserver(entries => {
-      const width = entries[0]?.contentRect.width ?? 0;
-      if (Math.abs(width - this._lastObservedWidth) < 1) return;
-      this._lastObservedWidth = width;
-      if (this._overflowIndex !== -1) {
-        this._overflowIndex = -1;
-      } else {
-        this._scheduleLangOverflow();
-      }
+  constructor() {
+    super();
+    // eslint-disable-next-line no-new
+    new ResizeController(this, {
+      callback: entries => {
+        const width = entries[0]?.contentRect.width ?? 0;
+        if (Math.abs(width - this._lastObservedWidth) < 1) return;
+        this._lastObservedWidth = width;
+        if (this._overflowIndex !== -1) {
+          this._overflowIndex = -1;
+        } else {
+          this._scheduleLangOverflow();
+        }
+      },
     });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._resizeObserver?.disconnect();
     if (this._measureRafId) {
       cancelAnimationFrame(this._measureRafId);
       this._measureRafId = 0;
@@ -86,7 +88,6 @@ export default class ZnTranslationGroup extends ZnPanel {
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     this.syncChildren();
-    this._resizeObserver?.observe(this);
   }
 
   protected updated(changedProperties: PropertyValues) {