@kubex/zinc 1.1.184 → 2.0.0

package/src/components/file/file.component.ts

@@ -278,6 +278,9 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
    */
   @property({attribute: 'upload-url'}) uploadUrl = '';
 
+  /** The largest each file can be, in megabytes. A bigger file makes the control invalid. 0 for no limit. */
+  @property({attribute: 'max-size', type: Number}) maxSize = 0;
+
   @state() private uploading = false;
 
   /** Gets the validity state object */
@@ -407,13 +410,32 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     this.input.click();
   }
 
+  private handleDropareaKeyDown(e: KeyboardEvent) {
+    if ((e.key === 'Enter' || e.key === ' ') && e.target === e.currentTarget) {
+      this.handleClick(e);
+    }
+  }
+
   /** Handles the change event of the native input */
+  private checkSize(): boolean {
+    const tooBig = this.maxSize > 0
+      ? Array.from(this.files || []).find(file => file.size > this.maxSize * 1024 * 1024)
+      : undefined;
+    this.setCustomValidity(tooBig ? `${tooBig.name} is larger than the ${this.maxSize} MB limit.` : '');
+    return !tooBig;
+  }
+
   private handleChange(e: Event) {
     e.preventDefault();
     e.stopPropagation();
 
     this.updatePreview();
 
+    if (!this.checkSize()) {
+      this.reportValidity();
+      return;
+    }
+
     const file = this.files?.[0];
     if (this.uploadUrl && file) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -661,7 +683,11 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
                   class="input__delete"
                   src="close"
                   size="16"
+                  role="button"
+                  tabindex="0"
+                  aria-label="${this.localize.term('clearEntry')}"
                   @click="${this.removeFile}"
+                  @keydown="${(e: KeyboardEvent) => (e.key === 'Enter' || e.key === ' ') && this.removeFile(e)}"
                   part="delete"></zn-icon>` : ''}
             </zn-chip>
           `)}
@@ -691,7 +717,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
           'droparea--has-preview': showImagePreview,
         })}
         @click="${this.handleClick}"
-        @keypress="${this.handleClick}"
+        @keydown="${this.handleDropareaKeyDown}"
         @focus="${this.handleFocus}"
         @blur="${this.handleBlur}"
         tabindex="${this.disabled ? '-1' : '0'}"
@@ -721,8 +747,10 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
             : (hasValue
               ? html`<span class="droparea__filename" part="filename">${displayName}</span>`
               : html`
+                <!-- The focusable droparea is the control; the button is its label -->
                 <zn-button
                   class="droparea__upload"
+                  inert
                   icon="cloud_upload"
                   icon-size="20"
                   panel-bg
@@ -792,7 +820,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
         part="form-control">
         ${hasTrigger ?
           html`
-            <slot name="trigger" part="trigger" @click="${this.handleClick}" @keypress="${this.handleClick}"></slot>` :
+            <slot name="trigger" part="trigger" @click="${this.handleClick}"></slot>` :
           html`
             <label
               aria-hidden="${hasLabel ? 'false' : 'true'}"

package/src/components/file/file.scss

@@ -64,6 +64,12 @@
 
 .input__delete {
   cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    border-radius: 50%;
+  }
+
   color: var(--zn-input-color);
   font-size: var(--zn-input-label-font-size-medium);
 

package/src/components/filter-wrapper/filter-wrapper.component.ts

@@ -1,9 +1,10 @@
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
-import {property} from "lit/decorators.js";
+import {property, state} from "lit/decorators.js";
 import {trimControlValue} from '../../internal/form';
 import ZincElement from '../../internal/zinc-element';
 
 import type ZnDataSelect from "../data-select";
+import type ZnButton from "../button";
 import type ZnDataTable from "../data-table";
 import type ZnInput from "../input";
 import type ZnQueryBuilder from "../query-builder";
@@ -42,12 +43,20 @@ export default class ZnFilterWrapper extends ZincElement {
 
   @property() button: string = 'Filter';
 
-  private hasSubmitButton: boolean = false;
+  /** Submits the filters when Enter is pressed in a text field. */
+  @property({attribute: 'submit-on-enter', type: Boolean}) submitOnEnter = false;
+
+  /** Shown on the submit button while results load. */
+  @property({attribute: 'loading-text'}) loadingText = 'Searching...';
+
+  @state() private loading = false;
+
+  private submitButton: ZnButton | null = null;
 
   handleSubmit = (event: Event) => {
     event.preventDefault();
     const dataTable: ZnDataTable | null = this.closest('zn-data-table');
-    if (dataTable) {
+    if (dataTable && !this.loading) {
       const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-data-select', 'zn-datepicker', 'input', 'select', 'textarea'];
       const inputs = Array.from(this.querySelectorAll(allowedInputs.join(','))) as AllowedInputElement[];
       const params: Record<string, any> = {};
@@ -60,17 +69,41 @@ export default class ZnFilterWrapper extends ZincElement {
       });
 
       dataTable.requestParams = params;
-      dataTable.refresh();
+      this.setLoading(true);
+      Promise.resolve(dataTable.refresh()).finally(() => this.setLoading(false));
+    }
+  }
+
+  private setLoading(loading: boolean) {
+    this.loading = loading;
+    if (this.submitButton) {
+      this.submitButton.processingText = this.loadingText;
+      this.submitButton.processing = loading;
+    }
+  }
+
+  handleKeyDown = (event: KeyboardEvent) => {
+    if (!this.submitOnEnter || event.key !== 'Enter' || event.defaultPrevented || event.isComposing
+      || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+
+    // Only plain text fields: selects, buttons and textareas use Enter themselves
+    if (event.composedPath()[0] instanceof HTMLInputElement) {
+      this.handleSubmit(event);
     }
   }
 
   connectedCallback() {
     super.connectedCallback();
-    const button: HTMLElement | null = this.querySelector('zn-button[submit]');
-    if (button) {
-      this.hasSubmitButton = true;
-      button.addEventListener('click', this.handleSubmit);
-    }
+    this.addEventListener('keydown', this.handleKeyDown);
+    this.submitButton = this.querySelector('zn-button[submit]');
+    this.submitButton?.addEventListener('click', this.handleSubmit);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('keydown', this.handleKeyDown);
   }
 
   private renderDefaultButton() {
@@ -78,6 +111,8 @@ export default class ZnFilterWrapper extends ZincElement {
       <zn-button part="search-button"
                  class="filter-wrapper__submit"
                  type="submit"
+                 ?processing="${this.loading}"
+                 processing-text="${this.loadingText}"
                  @click="${this.handleSubmit}">
         ${this.button}
       </zn-button>
@@ -87,7 +122,7 @@ export default class ZnFilterWrapper extends ZincElement {
   render() {
     return html`
       <slot></slot>
-      ${this.hasSubmitButton ? '' : this.renderDefaultButton()}
+      ${this.submitButton ? '' : this.renderDefaultButton()}
     `;
   }
 }

package/src/components/filter-wrapper/filter-wrapper.test.ts

@@ -1,6 +1,7 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
+import type ZnButton from '../button';
 import type ZnDataTable from '../data-table';
 import type ZnFilterWrapper from './filter-wrapper.component';
 import type ZnInput from '../input';
@@ -20,7 +21,7 @@ describe('<zn-filter-wrapper>', () => {
         </zn-filter-wrapper>
       </zn-data-table>
     `);
-    table.refresh = () => undefined;
+    table.refresh = async () => undefined;
     const wrapper = table.querySelector<ZnFilterWrapper>('zn-filter-wrapper')!;
     const input = table.querySelector<ZnInput>('zn-input')!;
     await input.updateComplete;
@@ -40,7 +41,7 @@ describe('<zn-filter-wrapper>', () => {
         </zn-filter-wrapper>
       </zn-data-table>
     `);
-    table.refresh = () => undefined;
+    table.refresh = async () => undefined;
     const [input, clean] = table.querySelectorAll<ZnInput>('zn-input');
     await input.updateComplete;
 
@@ -53,4 +54,59 @@ describe('<zn-filter-wrapper>', () => {
     expect(table.requestParams.email).to.equal('a@b.com');
     expect(input.input.scrollWidth).to.equal(clean.input.scrollWidth);
   });
+
+  it('submits on Enter only when submit-on-enter is set', async () => {
+    const table = await fixture<ZnDataTable>(html`
+      <zn-data-table>
+        <zn-filter-wrapper slot="filter-top">
+          <zn-input name="email"></zn-input>
+        </zn-filter-wrapper>
+      </zn-data-table>
+    `);
+    let refreshes = 0;
+    table.refresh = async () => { refreshes++; };
+    const wrapper = table.querySelector<ZnFilterWrapper>('zn-filter-wrapper')!;
+    const input = table.querySelector<ZnInput>('zn-input')!;
+    await input.updateComplete;
+
+    input.focus();
+    await sendKeys({type: 'a@b.com'});
+    await sendKeys({press: 'Enter'});
+    expect(refreshes).to.equal(0);
+
+    wrapper.submitOnEnter = true;
+    await sendKeys({press: 'Enter'});
+    expect(refreshes).to.equal(1);
+    expect(table.requestParams).to.deep.equal({email: 'a@b.com'});
+  });
+
+  it('shows the submit button as processing until results load', async () => {
+    const table = await fixture<ZnDataTable>(html`
+      <zn-data-table>
+        <zn-filter-wrapper slot="filter-top">
+          <zn-input name="email"></zn-input>
+          <zn-button submit>Submit</zn-button>
+        </zn-filter-wrapper>
+      </zn-data-table>
+    `);
+    let finish!: () => void;
+    let refreshes = 0;
+    table.refresh = () => {
+      refreshes++;
+      return new Promise<void>(resolve => { finish = resolve; });
+    };
+    const button = table.querySelector<ZnButton>('zn-button')!;
+    await button.updateComplete;
+    const base = button.shadowRoot!.querySelector<HTMLButtonElement>('[part="base"]')!;
+
+    base.click();
+    base.click();
+    expect(refreshes).to.equal(1);
+    expect(button.processing).to.be.true;
+    expect(button.processingText).to.equal('Searching...');
+
+    finish();
+    await new Promise(resolve => setTimeout(resolve));
+    expect(button.processing).to.be.false;
+  });
 });

package/src/components/flow-builder/flow-builder.component.ts

@@ -171,6 +171,8 @@ export default class ZnFlowBuilder extends ZincElement {
   @state() private _movingNodeId: string | null = null;
   /** The "+" picker popover target (an open output, or a wire to insert into), if open. */
   @state() private _picker: { x: number; y: number; target: PickerTarget } | null = null;
+  /** Where focus goes back to when the picker or branch editor closes. */
+  private _focusReturn: HTMLElement | null = null;
   /** The node type currently being dragged from the steps panel, for the canvas drop preview. */
   @state() private _draggingType: string | null = null;
 
@@ -338,12 +340,41 @@ export default class ZnFlowBuilder extends ZincElement {
 
   private _onKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Escape' && (this._movingNodeId || this._picker || this._selectedBranch)) {
+      const hadFocus = !!this.shadowRoot?.querySelector('.picker:focus-within, .inspector:focus-within');
       this._movingNodeId = null;
       this._picker = null;
       this._selectedBranch = null;
+      if (hadFocus) void this._returnFocus(this._focusReturn);
     }
   };
 
+  private static _deepActiveElement() {
+    let el = document.activeElement;
+    while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
+    return el as HTMLElement | null;
+  }
+
+  private _nodeCard(nodeId: string) {
+    const canvas = this.shadowRoot?.querySelector('zn-flow-canvas');
+    const node = [...(canvas?.shadowRoot?.querySelectorAll('zn-flow-node') ?? [])].find(n => n.node?.id === nodeId);
+    return node?.shadowRoot?.querySelector<HTMLElement>('.card');
+  }
+
+  private async _returnFocus(target: HTMLElement | null | undefined) {
+    await this.updateComplete;
+    if (target?.isConnected) target.focus();
+  }
+
+  private _closeInspector(nodeId: string) {
+    this._select(null);
+    void this._returnFocus(this._nodeCard(nodeId));
+  }
+
+  private _closeBranchEditor(nodeId: string) {
+    this._selectedBranch = null;
+    void this._returnFocus(this._focusReturn?.isConnected ? this._focusReturn : this._nodeCard(nodeId));
+  }
+
   protected willUpdate(changed: PropertyValues) {
     if (changed.has('nodeTypes') && this.nodeTypes?.length) {
       this.registry.registerAll(this.nodeTypes);
@@ -974,6 +1005,7 @@ export default class ZnFlowBuilder extends ZincElement {
   }
 
   private _onBranchPick = (e: CustomEvent<{ nodeId: string; port: string }>) => {
+    this._focusReturn = ZnFlowBuilder._deepActiveElement();
     this._select(null);
     this._sideCollapsed = false;
     this._selectedBranch = {nodeId: e.detail.nodeId, port: e.detail.port};
@@ -1031,6 +1063,7 @@ export default class ZnFlowBuilder extends ZincElement {
   };
 
   private _onWirePick = (e: CustomEvent<{ connectionId: string; clientX: number; clientY: number }>) => {
+    this._focusReturn = ZnFlowBuilder._deepActiveElement();
     this._picker = {
       x: e.detail.clientX,
       y: e.detail.clientY,
@@ -1260,7 +1293,7 @@ export default class ZnFlowBuilder extends ZincElement {
             <div class="inspector-head__title">${node.label ?? type?.label ?? node.type}</div>
             <div class="inspector-head__type">${type?.label ?? node.type}</div>
           </div>
-          <button class="inspector-close" title="Close" @click="${() => this._select(null)}">
+          <button class="inspector-close" title="Close" @click="${() => this._closeInspector(node.id)}">
             <zn-icon src="x@lu" size="18"></zn-icon>
           </button>
         </div>
@@ -1337,7 +1370,7 @@ export default class ZnFlowBuilder extends ZincElement {
                 : `Branch of ${node.label ?? type?.label ?? node.type}`}
             </div>
           </div>
-          <button class="inspector-close" title="Close" @click="${() => (this._selectedBranch = null)}">
+          <button class="inspector-close" title="Close" @click="${() => this._closeBranchEditor(node.id)}">
             <zn-icon src="x@lu" size="18"></zn-icon>
           </button>
         </div>
@@ -1358,7 +1391,7 @@ export default class ZnFlowBuilder extends ZincElement {
                   .value="${branchConditions(port)}"
                   @flow-conditions-save="${(e: CustomEvent<{ conditions: FlowBranchConditions }>) =>
                     this._saveBranchConditions(node, port, e.detail.conditions)}"
-                  @flow-conditions-cancel="${() => (this._selectedBranch = null)}"
+                  @flow-conditions-cancel="${() => this._closeBranchEditor(node.id)}"
                 ></zn-flow-branch-conditions>`
               : html`<p class="inspector-hint">This step type has no branch conditions.</p>`}
         </div>

package/src/components/flow-builder/flow-builder.scss

@@ -141,12 +141,6 @@
   // rather than the navbar's default body colour.
   --zn-active-nav-background: var(--zn-panel);
 
-  // Themes with a glass page tab bar (e.g. Aura) frost inactive tabs on every
-  // navbar under a zn-page — over the panel the translucent white just reads
-  // as white. Pin the standard tab tint instead.
-  --navbar-page-inactive-tab-background: rgb(var(--zn-color-tab));
-  --navbar-page-inactive-tab-filter: none;
-
   border-right: 1px solid rgb(var(--zn-border-color));
 
   // The registry-driven steps panel fills the column below the title block.

package/src/components/flow-builder/modules/flow-canvas/flow-canvas.component.ts

@@ -1181,11 +1181,19 @@ export default class ZnFlowCanvas extends ZincElement {
             <span
               class="branch-pill-port"
               title="Start a branch"
+              role="button"
+              tabindex="0"
+              aria-label="Start a branch"
               @pointerdown="${(e: PointerEvent) => e.button === 0 && e.stopPropagation()}"
               @click="${(e: Event) => {
                 e.stopPropagation();
                 this._onBranchPortClick(i.nodeId, i.portId);
               }}"
+              @keydown="${(e: KeyboardEvent) => {
+                if (e.key !== 'Enter' && e.key !== ' ') return;
+                e.preventDefault();
+                (e.currentTarget as HTMLElement).click();
+              }}"
             ></span>` : ''}
         </div>
       `

package/src/components/flow-builder/modules/flow-canvas/flow-canvas.scss

@@ -248,6 +248,11 @@
       transform: translate(-50%, 50%) scale(1.35);
       box-shadow: 0 0 0 4px color-mix(in srgb, rgb(var(--zn-color-primary)) 20%, transparent);
     }
+
+    &:focus-visible {
+      outline: var(--zn-focus-ring);
+      outline-offset: 2px;
+    }
   }
 
   // Slides out from behind the pill on hover; deletes the branch and its wire.
@@ -372,8 +377,8 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  background: #fef9c3;
-  border: 1px solid #fde68a;
+  background: var(--zn-flow-note-background, #fef9c3);
+  border: 1px solid var(--zn-flow-note-border, #fde68a);
   border-radius: 4px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
 
@@ -385,7 +390,7 @@
     height: 16px;
     cursor: nwse-resize;
     // Visual corner grip.
-    background: linear-gradient(135deg, transparent 0 50%, #d9c64a 50% 60%, transparent 60% 70%, #d9c64a 70% 80%, transparent 80%);
+    background: linear-gradient(135deg, transparent 0 50%, var(--zn-flow-note-fold, #d9c64a) 50% 60%, transparent 60% 70%, var(--zn-flow-note-fold, #d9c64a) 70% 80%, transparent 80%);
   }
 
   &__bar {
@@ -401,7 +406,7 @@
     padding: 0;
     font-size: 14px;
     line-height: 1;
-    color: #92400e;
+    color: var(--zn-flow-note-meta-color, #92400e);
     background: transparent;
     cursor: pointer;
   }
@@ -416,6 +421,6 @@
     background: transparent;
     font: inherit;
     font-size: 0.8125rem;
-    color: #713f12;
+    color: var(--zn-flow-note-color, #713f12);
   }
 }

package/src/components/flow-builder/modules/flow-node/flow-node.component.ts

@@ -91,6 +91,13 @@ export default class ZnFlowNode extends ZincElement {
     this._emit('flow-node-grab', {nodeId: this.node.id, clientX: e.clientX, clientY: e.clientY});
   };
 
+  private _onBodyKeyDown = (e: KeyboardEvent) => {
+    // The node's menu trigger keeps its own keys
+    if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' ')) return;
+    e.preventDefault();
+    this._emit('flow-node-select', {nodeId: this.node.id});
+  };
+
   private _action(action: 'delete' | 'duplicate' | 'move') {
     this._emit('flow-node-action', {nodeId: this.node.id, action});
   }
@@ -126,7 +133,9 @@ export default class ZnFlowNode extends ZincElement {
       <div
         part="base"
         class="${classMap({card: true, selected: this.selected, error: this.error, 'link-target': this.linkTarget})}"
+        tabindex="0"
         @pointerdown="${this._onBodyPointerDown}"
+        @keydown="${this._onBodyKeyDown}"
       >
         ${inputs.length ? this._renderPorts(inputs, 'in') : ''}
 
@@ -159,6 +168,14 @@ export default class ZnFlowNode extends ZincElement {
                 <span
                   class="port port--out"
                   title="Start a branch"
+                  role="button"
+                  tabindex="0"
+                  aria-label="Start a branch"
+                  @keydown="${(e: KeyboardEvent) => {
+        if (e.key !== 'Enter' && e.key !== ' ') return;
+        e.preventDefault();
+        (e.currentTarget as HTMLElement).click();
+      }}"
                   @pointerdown="${(e: PointerEvent) => e.button === 0 && e.stopPropagation()}"
                   @click="${(e: Event) => {
         e.stopPropagation();

package/src/components/flow-builder/modules/flow-node/flow-node.scss

@@ -35,6 +35,11 @@
     border-color: rgb(var(--zn-color-border-active));
   }
 
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    outline-offset: 2px;
+  }
+
   &.selected {
     border-color: var(--node-accent);
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-accent) 35%, transparent);
@@ -157,6 +162,11 @@ zn-menu-item.danger {
       background: var(--node-accent);
       box-shadow: 0 0 0 4px color-mix(in srgb, var(--node-accent) 25%, transparent);
     }
+
+    &:focus-visible {
+      outline: var(--zn-focus-ring);
+      outline-offset: 2px;
+    }
   }
 
   // Anchored at the card edge, at its horizontal position (set inline as left:%).

package/src/components/form-actions/form-actions.component.ts

@@ -1,6 +1,6 @@
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {idSelector} from "../../utilities/query";
-import {property} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnButton from "../button";
 
@@ -58,6 +58,51 @@ export default class ZnFormActions extends ZincElement {
   /** The id of the form to act on. If omitted, the closest containing form is used. */
   @property() form: string;
 
+  /**
+   * Shows the submit button loading and ignores further submits until the console reports the request finished,
+   * so a slow save such as an upload can't be sent twice. Only for forms the console submits.
+   */
+  @property({attribute: 'loading-on-submit', type: Boolean}) loadingOnSubmit = false;
+
+  @state() private submitting = false;
+
+  private watchedForm: HTMLFormElement | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.loadingOnSubmit) {
+      this.watchedForm = this.getForm();
+      this.watchedForm?.addEventListener('submit', this.handleFormSubmit, {capture: true});
+      this.watchedForm?.addEventListener('requested', this.handleRequested);
+      ['complete', 'error', 'cancelled'].forEach(e => this.watchedForm?.addEventListener(e, this.handleDone));
+    }
+  }
+
+  disconnectedCallback() {
+    this.watchedForm?.removeEventListener('submit', this.handleFormSubmit, {capture: true});
+    this.watchedForm?.removeEventListener('requested', this.handleRequested);
+    ['complete', 'error', 'cancelled'].forEach(e => this.watchedForm?.removeEventListener(e, this.handleDone));
+    this.watchedForm = null;
+    super.disconnectedCallback();
+  }
+
+  // Only the original submit is blocked; the console re-dispatches it as a composed event
+  private handleFormSubmit = (e: Event) => {
+    if (this.submitting && !e.composed) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+  };
+
+  // Set once the console sends the request, so a submit that validation stops doesn't stick
+  private handleRequested = () => {
+    this.submitting = true;
+  };
+
+  private handleDone = () => {
+    this.submitting = false;
+  };
+
   // The buttons live in this component's shadow root, so zn-button's own
   // submit/reset handling can't find the form — resolve it from the host.
   private getForm(): HTMLFormElement | null {
@@ -92,7 +137,8 @@ export default class ZnFormActions extends ZincElement {
         <zn-button part="reset-button" panel-bg icon="${this.resetIcon}" @click="${this.handleReset}">
           ${this.resetText}
         </zn-button>` : ''}
-      <zn-button part="submit-button" color="primary" icon="${this.submitIcon}" @click="${this.handleSubmit}">
+      <zn-button part="submit-button" color="primary" icon="${this.submitIcon}" @click="${this.handleSubmit}"
+                 ?loading=${this.submitting} ?disabled=${this.submitting} loading-text="${this.submitText}">
         ${this.submitText}
       </zn-button>`;
   }

package/src/components/form-actions/form-actions.scss

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: var(--zn-spacing-small);
+  gap: var(--zn-form-actions-gap, var(--zn-spacing-small));
 }
 
 // The spacer, not an auto margin, is what splits the two sides: an auto margin on every left-hand action would open

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

@@ -43,6 +43,9 @@ export default class ZnFormGroup extends ZincElement {
   @property({ attribute: 'cols', type: Boolean }) forceCols = false;
   @property({ attribute: 'layout', type: String }) layout = "1,2";
 
+  /** Labels the group like one of its fields and keeps it tight to them, for a section inside a form or dialog. */
+  @property({ type: Boolean }) compact = false;
+
   @property({ attribute: 'pad', type: Boolean }) pad: boolean = false;
 
   /** The scroller the label is moved against by hand; null while native sticky is enough. */
@@ -326,7 +329,10 @@ export default class ZnFormGroup extends ZincElement {
           'form-control--has-label': hasLabel,
           'form-control--has-label-tooltip': hasLabelTooltip,
           'form-control--has-help-text': hasHelpText,
-          'form-control--pad': this.pad
+          'form-control--pad': this.pad,
+          'form-control--compact': this.compact,
+          'form-control--stacked': this.layout === '1',
+          'form-control--full': !hasLabel && !hasHelpText
         })}"
         aria-labelledby="label"
         aria-describedby="help-text">
@@ -345,10 +351,11 @@ export default class ZnFormGroup extends ZincElement {
                   ${hasLabelTooltip
                     ? html`
                       <zn-tooltip class="form-control--label-tooltip">
-                        <div slot="content">
+                        <div slot="content" id="label-tooltip">
                           <slot name="label-tooltip">${this.labelTooltip}</slot>
                         </div>
-                        <zn-icon src="info"></zn-icon>
+                        <zn-icon src="info" tabindex="0" role="img" aria-label="More information"
+                                 aria-describedby="label-tooltip"></zn-icon>
                       </zn-tooltip>`
                     : ''}
                 </label>` : html``}