@kubex/zinc 1.1.185 → 2.0.1

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

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

@@ -3,7 +3,6 @@
 :host {
   display: block;
   line-height: var(--zn-line-height-dense);
-  max-width: var(--zn-container-lg);
   --zn-col-gap: calc(var(--zn-spacing-medium, 20px) * 3);
   --zn-form-group-sticky-top: var(--zn-spacing-medium, 20px);
 }
@@ -13,6 +12,7 @@
   border: none;
   padding: 0;
   margin: 0;
+  max-width: var(--zn-container-lg);
 }
 
 .form-control__label {
@@ -20,6 +20,7 @@
 }
 
 .form-control--has-label .form-control__label {
+  font-family: var(--zn-form-group-label-font-family, inherit);
   font-weight: var(--zn-font-weight-bold);
   font-size: var(--zn-font-size-large);
 }
@@ -32,7 +33,7 @@
 // label would scroll over the fields it labels. zn-cols wraps below the two columns' bases plus
 // the gap, so 670px = --zn-col-basis * (1 + 2) + 70px — keep in step with both values below.
 @container (min-width: 670px) {
-  .form-control__text {
+  .form-control:not(.form-control--stacked) .form-control__text {
     position: sticky;
     top: var(--zn-form-group-sticky-top);
     // A stretched flex item is as tall as the row, leaving sticky nothing to travel through.
@@ -59,7 +60,7 @@
 .form-control-input {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  gap: var(--zn-spacing-medium) var(--zn-spacing-small);
+  gap: var(--zn-form-row-gap, var(--zn-spacing-medium)) var(--zn-spacing-small);
 
   // `1fr` floors each track at its min-content width, so one long label steals width from
   // the other tracks and the spans stop lining up.
@@ -110,8 +111,9 @@ zn-cols::part(base) {
   gap: var(--zn-gap);
 }
 
+// layout="1" stacks the label above the fields at every width, so there is no gutter to keep.
 @container (min-width: 670px) {
-  zn-cols::part(base) {
+  .form-control:not(.form-control--stacked) zn-cols::part(base) {
     gap: 70px;
   }
 }
@@ -121,3 +123,34 @@ zn-cols::part(base) {
   padding-top: var(--zn-base-gap);
   padding-left: var(--zn-base-gap);
 }
+
+// Without a label or help text the group is only its card's field grid, so it fills the card.
+// A compact stacked group labels its fields the way an input does, so it fills the same width.
+.form-control--full,
+.form-control--compact.form-control--stacked {
+  max-width: none;
+}
+
+.form-control--compact.form-control--has-label .form-control__label {
+  display: block;
+  margin-bottom: 0;
+  font-family: inherit;
+  font-weight: var(--zn-input-label-font-weight);
+  font-size: var(--zn-input-label-font-size-medium);
+  line-height: var(--zn-input-label-line-height);
+}
+
+.form-control--compact .form-control__help-text {
+  margin-top: var(--zn-input-label-spacing, var(--zn-spacing-2x-small));
+  font-size: var(--zn-input-help-text-font-size-medium);
+  line-height: var(--zn-input-help-text-line-height, 1.5);
+}
+
+.form-control--compact zn-cols::part(base) {
+  gap: var(--zn-form-row-gap, var(--zn-spacing-medium));
+}
+
+// Stacked, the label sits over its fields as an input's does
+.form-control--compact.form-control--stacked zn-cols::part(base) {
+  gap: var(--zn-input-label-spacing, var(--zn-spacing-2x-small));
+}

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

@@ -142,4 +142,14 @@ describe('<zn-form-group>', () => {
     const narrowCols = narrow.querySelector('zn-form-group')!.shadowRoot!.querySelector('zn-cols')!;
     expect(getComputedStyle(narrowCols.shadowRoot!.querySelector('.cols')!).rowGap).to.not.equal('70px');
   });
+
+  it('fills its container without a label, and stays capped with one', async () => {
+    const plain = await fixture<HTMLElement>(html`<zn-form-group><input></zn-form-group>`);
+    const labelled = await fixture<HTMLElement>(html`<zn-form-group label="Identity" style="--zn-container-lg: 1100px"><input></zn-form-group>`);
+
+    const fieldset = (el: HTMLElement) => el.shadowRoot!.querySelector('fieldset')!;
+
+    expect(getComputedStyle(fieldset(plain)).maxWidth).to.equal('none');
+    expect(getComputedStyle(fieldset(labelled)).maxWidth).to.equal("1100px");
+  });
 });

package/src/components/header/header.component.ts

@@ -40,6 +40,11 @@ export default class ZnHeader extends ZincElement {
   @property({type: Boolean}) transparent: boolean = false;
 
   @property() caption: string;
+  /** A line of muted text under the caption. */
+  @property() description: string;
+
+  /** Sets the description beside the caption rather than under it, e.g. a row count. */
+  @property({attribute: 'inline-description', type: Boolean}) inlineDescription = false;
   @property() icon: string;
 
   @property({type: Array}) navigation = [];
@@ -114,6 +119,7 @@ export default class ZnHeader extends ZincElement {
       <div class="${classMap({
         'header': true,
         'header--transparent': this.transparent,
+        'header--inline-description': this.inlineDescription,
         'header--full-width': this.fullWidth,
         'header--has-nav': hasNavigation,
         'header--has-breadcrumb': hasBreadcrumb,
@@ -139,10 +145,9 @@ export default class ZnHeader extends ZincElement {
 
         <div class="content" part="content">
           ${hasPreviousPath ? html`
-            <a href="${this.previousPath}" class="caption__back"
-               data-target="${this.previousTarget ? this.previousTarget : ''}">
-              <zn-button icon="arrow-left@lu" icon-size="20" icon-button="small" plain></zn-button>
-            </a>` : null}
+            <zn-button href="${this.previousPath}" class="caption__back" label="Back"
+               data-target="${this.previousTarget ? this.previousTarget : ''}"
+               icon="arrow-left@lu" icon-size="20" icon-button="small" plain></zn-button>` : null}
 
           ${hasDefaultSlot ? html`
             <div class="actions">
@@ -158,6 +163,8 @@ export default class ZnHeader extends ZincElement {
                   <slot name="breadcrumb" class="breadcrumb"></slot>` : null}
                 <slot name="caption">${this.caption}</slot>
                 </span>
+              ${this.description ? html`
+                <span class="header__description" part="description">${this.description}</span>` : null}
             </div>
 
             <div part="header-right" class="header__right">