@kubex/zinc 1.1.138 → 1.1.140

package/package.json

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

package/src/components/collapsible/collapsible.scss

@@ -79,6 +79,11 @@
 // Height animates via grid-template-rows 0fr -> 1fr; the inline padding is
 // constant so the content never reflows (and re-wraps) mid-transition.
 .content {
+  // Padding counts toward a grid item's minimum contribution, so a 0fr track
+  // cannot collapse below it and a closed panel would keep the padding's
+  // height. Held at zero here and transitioned in with the row.
+  --content-block-padding: 0px;
+
   display: grid;
   // minmax(0, 1fr), not the implicit auto track: auto floors the column at the
   // content's min-content width, so nowrap children overflow the host.
@@ -90,9 +95,10 @@
 
   &__inner {
     min-height: 0;
-    padding: 0 var(--zn-spacing-medium) var(--zn-spacing-medium);
+    padding: 0 var(--zn-spacing-medium) var(--content-block-padding);
     transform: translateY(-4px);
-    transition: transform var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1);
+    transition: transform var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1),
+    padding-bottom var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1);
   }
 
   &--flush &__inner {
@@ -108,6 +114,8 @@
 }
 
 :host([expanded]) .content {
+  --content-block-padding: var(--zn-spacing-medium);
+
   grid-template-rows: 1fr;
   opacity: 1;
 

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

@@ -84,7 +84,7 @@ export default class ZnFilterContainer extends ZincElement {
       return (el as HTMLElement).style.display !== 'none';
     });
 
-    let noResultsMessage = this.querySelector('.no-results-message') as HTMLElement;
+    let noResultsMessage = this.querySelector<HTMLElement>('.no-results-message');
     if (!anyVisibleElements) {
       if (!noResultsMessage) {
         noResultsMessage = document.createElement('div');
@@ -93,12 +93,9 @@ export default class ZnFilterContainer extends ZincElement {
         this.appendChild(noResultsMessage);
       }
       noResultsMessage.style.display = '';
-    } else {
-      if (noResultsMessage) {
-        noResultsMessage.style.display = 'none';
-      }
+    } else if (noResultsMessage) {
+      noResultsMessage.style.display = 'none';
     }
-
   }
 
   render() {

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

@@ -156,7 +156,7 @@ export function untangledPositions(
   nodes.forEach(n => {
     const raw = xs.get(n.id);
     out.set(n.id, {
-      x: snapToGrid(Number.isFinite(raw) ? (raw as number) - minX + MARGIN : MARGIN),
+      x: snapToGrid(Number.isFinite(raw) ? raw! - minX + MARGIN : MARGIN),
       y: MARGIN + layerOf.get(n.id)! * LAYOUT_V_GAP,
     });
   });

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

@@ -1089,7 +1089,7 @@ export default class ZnFlowCanvas extends ZincElement {
       const src = this.nodes.find(n => n.id === this._linking!.nodeId);
       if (src) {
         const branch = this._outputLayout(src).branches.find(b => b.port.id === this._linking!.port);
-        const from = branch && branch.pillTop !== null
+        const from = branch !== undefined && branch.pillTop !== null
           ? {x: branch.x, y: branch.exitY}
           : {x: src.x + NODE_WIDTH / 2, y: src.y + NODE_HEIGHT};
         const target = this._linkTarget ? this.nodes.find(n => n.id === this._linkTarget) : undefined;

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

@@ -4,7 +4,7 @@ import {HasSlotController} from "../../internal/slot";
 import {property} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
-import ZnNavbar from "../navbar";
+import type ZnNavbar from "../navbar";
 
 import styles from './header.scss';
 

package/src/components/icon-picker/icon-picker.component.ts

@@ -1,7 +1,7 @@
 import {classMap} from 'lit/directives/class-map.js';
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {defaultValue} from '../../internal/default-value';
-import {FormControlController} from '../../internal/form';
+import {FormControlController, validValidityState, valueMissingValidityState} from '../../internal/form';
 import {property, query, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnButton from '../button';
@@ -95,20 +95,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
   }
 
   get validity(): ValidityState {
-    if (this.required && !this.icon && !this._file) {
-      return {
-        valid: false,
-        valueMissing: true,
-        badInput: false, customError: false, patternMismatch: false,
-        rangeOverflow: false, rangeUnderflow: false, stepMismatch: false,
-        tooLong: false, tooShort: false, typeMismatch: false,
-      } as ValidityState;
-    }
-    return {
-      valid: true, valueMissing: false, badInput: false, customError: false,
-      patternMismatch: false, rangeOverflow: false, rangeUnderflow: false,
-      stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false,
-    } as ValidityState;
+    return this.required && !this.icon && !this._file ? valueMissingValidityState : validValidityState;
   }
 
   get validationMessage(): string {
@@ -118,6 +105,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
   checkValidity(): boolean { return this.validity.valid; }
   getForm(): HTMLFormElement | null { return this.formControlController.getForm(); }
   reportValidity(): boolean { return this.checkValidity(); }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   setCustomValidity(_message: string) { this.formControlController.updateValidity(); }
 
   private static readonly freeInputLibraries = new Set(['gravatar', 'libravatar', 'avatar']);
@@ -313,7 +301,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
 
   private handleColorInput(e: Event) {
     const input = e.target as ZnInput;
-    this._pendingColor = input.value;
+    this._pendingColor = String(input.value);
   }
 
   private handleFreeInput(e: Event) {
@@ -428,14 +416,14 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
                       size="small"
                       color=${this._mode === 'icon' ? 'secondary' : 'transparent'}
                       icon="apps"
-                      @click=${() => this._mode = 'icon'}>
+                      @click=${() => { this._mode = 'icon'; }}>
                       Icon Library
                     </zn-button>
                     <zn-button
                       size="small"
                       color=${this._mode === 'upload' ? 'secondary' : 'transparent'}
                       icon="upload"
-                      @click=${() => this._mode = 'upload'}>
+                      @click=${() => { this._mode = 'upload'; }}>
                       Upload Image
                     </zn-button>
                   </div>

package/src/components/input/input.component.ts

@@ -508,7 +508,9 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     let g: number;
     let b: number;
     if (s === 0) {
-      r = g = b = l;
+      r = l;
+      g = l;
+      b = l;
     } else {
       const hue2rgb = (p: number, q: number, t: number) => {
         if (t < 0) t += 1;
@@ -831,7 +833,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   }
 
   @watch('colorFormat', {waitUntilFirstUpdate: true})
-  async handleColorFormatChange() {
+  handleColorFormatChange() {
     // When color format changes, convert the current value to the new format
     if (this.type === 'color' && this.value) {
       const hexValue = this.convertToHex(this.value);

package/src/components/menu-item/submenu-controller.ts

@@ -1,8 +1,8 @@
-import { createRef, ref, type Ref } from 'lit/directives/ref.js';
-import { type HasSlotController } from '../../internal/slot.js';
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import { html } from 'lit';
-import { type LocalizeController } from '../../utilities/localize.js';
+import {createRef, ref, type Ref} from 'lit/directives/ref.js';
+import {type HasSlotController} from '../../internal/slot.js';
+import {html} from 'lit';
+import {type LocalizeController} from '../../utilities/localize.js';
+import type {ReactiveController, ReactiveControllerHost} from 'lit';
 import type ZnMenuItem from '../menu-item';
 import type ZnPopup from '../popup';
 
@@ -201,14 +201,14 @@ export class SubmenuController implements ReactiveController {
   // Set the safe triangle values for the submenu when the position changes
   private handlePopupReposition = () => {
     const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
-    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'zn-menu')[0];
+    const menu = submenuSlot?.assignedElements({flatten: true}).filter(el => el.localName === 'zn-menu')[0];
     const isRtl = this.localize.dir() === 'rtl';
 
     if (!menu) {
       return;
     }
 
-    const { left, top, width, height } = menu.getBoundingClientRect();
+    const {left, top, width, height} = menu.getBoundingClientRect();
 
     this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);
     this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);

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

@@ -1,5 +1,6 @@
 import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import {
+  emptyDragImage,
   emptyPageState,
   generateSectionId,
   MAX_SLOTS,
@@ -149,6 +150,8 @@ export default class ZnPageBuilder extends ZincElement {
   /** Index of the drop zone whose "+" type picker is open, if any. */
   @state() private _pickerIndex: number | null = null;
   @state() private _dragOverIndex: number | null = null;
+  @state() private _draggingId: string | null = null;
+  @state() private _dragGhost: { section: PageSection } | { type: PageSectionType } | null = null;
   /** The container slot a drag is currently over, if any. */
   @state() private _slotDragOver: { containerId: string; index: number } | null = null;
   /** The container slot whose "+" type picker is open, if any. */
@@ -277,11 +280,13 @@ export default class ZnPageBuilder extends ZincElement {
 
   connectedCallback() {
     super.connectedCallback();
+    emptyDragImage(); // decoded up front, before a drag can ask for it
     this._registerSlottedTemplates();
     this._resizeObserver.observe(this);
   }
 
   disconnectedCallback() {
+    this._endGhost();
     this._resizeObserver.disconnect();
     this._stopAutoSave();
     if (this._justSavedTimer !== null) {
@@ -820,6 +825,111 @@ export default class ZnPageBuilder extends ZincElement {
     e.stopPropagation(); // a child card's drag must not also start its container's
     e.dataTransfer.setData(PAGE_SECTION_MIME, id);
     e.dataTransfer.effectAllowed = 'move';
+    const section = this._findSection(id);
+    if (section) this._startGhost(e, { section });
+    // Deferred: pulling the source out of the flow during the dragstart handler
+    // aborts the drag.
+    setTimeout(() => (this._draggingId = id));
+  }
+
+  // --- Drag ghost ---------------------------------------------------------------
+  // The browser's own drag image is a snapshot composited onto an opaque
+  // surface, so everything the card leaves transparent outside its 8px radius
+  // comes back as square white corners — not something the page can style away.
+  // The builder suppresses it and moves a real card of its own instead.
+
+  private _ghostEl: HTMLElement | null = null;
+  /** Where in the card the pointer grabbed it, so the ghost keeps that grip. */
+  private _ghostGrip = { x: 0, y: 0 };
+  /** The host's viewport origin; the ghost is positioned against the host. */
+  private _ghostOrigin = { x: 0, y: 0 };
+
+  private _startGhost(e: DragEvent, ghost: NonNullable<typeof this._dragGhost>) {
+    if (!e.dataTransfer) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const host = this.getBoundingClientRect();
+    this._ghostGrip = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    this._ghostOrigin = { x: host.left, y: host.top };
+    this._dragGhost = ghost;
+    e.dataTransfer.setDragImage(emptyDragImage(), 0, 0);
+    // dragover is stopped short by the zone handlers, so listen at the document
+    // in capture: the ghost has to track the pointer wherever it goes.
+    document.addEventListener('dragover', this._onGhostDragOver, true);
+    document.addEventListener('drop', this._onGhostDrop, true);
+    document.addEventListener('dragleave', this._onGhostDragLeave, true);
+    void this.updateComplete.then(() => {
+      this._ghostEl = this.shadowRoot?.querySelector<HTMLElement>('.drag-ghost') ?? null;
+      if (!this._ghostEl) return;
+      this._ghostEl.style.width = `${rect.width}px`;
+      this._moveGhost(e.clientX, e.clientY);
+    });
+  }
+
+  private _onGhostDragOver = (e: DragEvent) => {
+    // Holds the whole document open as a drop target for the length of our own
+    // drag. Only the canvas calls preventDefault, so anywhere else the drag has
+    // no target and the OS drag session stalls for seconds hunting for one.
+    e.preventDefault();
+    // The last dragover of a cancelled drag reports 0,0 — it would fling the
+    // ghost into the corner for the frame before dragend clears it.
+    if (e.clientX === 0 && e.clientY === 0) return;
+    this._moveGhost(e.clientX, e.clientY);
+  };
+
+  // Follows from holding the document open above: a release outside the canvas
+  // would otherwise be left to the browser's default handling of the payload.
+  private _onGhostDrop = (e: DragEvent) => e.preventDefault();
+
+  // A null relatedTarget means the pointer left the window, where no dragover
+  // reaches us — the ghost would sit frozen wherever it was. The OS carries the
+  // drag from here; the ghost comes back on the first dragover on re-entry.
+  private _onGhostDragLeave = (e: DragEvent) => {
+    if (e.relatedTarget === null && this._ghostEl) this._ghostEl.style.visibility = 'hidden';
+  };
+
+  private _moveGhost(clientX: number, clientY: number) {
+    if (!this._ghostEl) return;
+    this._ghostEl.style.visibility = '';
+    const x = clientX - this._ghostOrigin.x - this._ghostGrip.x;
+    const y = clientY - this._ghostOrigin.y - this._ghostGrip.y;
+    this._ghostEl.style.transform = `translate(${x}px, ${y}px)`;
+  }
+
+  private _endGhost() {
+    document.removeEventListener('dragover', this._onGhostDragOver, true);
+    document.removeEventListener('drop', this._onGhostDrop, true);
+    document.removeEventListener('dragleave', this._onGhostDragLeave, true);
+    this._ghostEl = null;
+    this._dragGhost = null;
+  }
+
+  private _renderDragGhost() {
+    const ghost = this._dragGhost;
+    if (!ghost) return '';
+    if ('type' in ghost) {
+      const t = ghost.type;
+      return html`
+        <zn-page-palette-item
+          class="drag-ghost"
+          type="${t.type}"
+          label="${t.label}"
+          description="${ifDefined(t.description)}"
+          icon="${ifDefined(t.icon)}"
+          icon-library="${ifDefined(t.iconLibrary)}"
+          color="${ifDefined(t.color)}"></zn-page-palette-item>`;
+    }
+    const section = ghost.section;
+    const type = this.registry.get(section.type);
+    return html`
+      <zn-page-section-card
+        class="drag-ghost"
+        label="${section.label ?? type?.label ?? section.type}"
+        summary="${type ? sectionSummary(section, type) : `Unknown type "${section.type}"`}"
+        icon="${ifDefined(type?.icon)}"
+        icon-library="${ifDefined(type?.iconLibrary)}"
+        color="${ifDefined(type?.color)}"
+        ?unknown="${!type}"
+        ?locked="${this._isPinned(section.id)}"></zn-page-section-card>`;
   }
 
   /** Whether a drag carries one of the builder's own payloads. */
@@ -840,6 +950,8 @@ export default class ZnPageBuilder extends ZincElement {
     e.preventDefault();
     e.stopPropagation();
     this._slotDragOver = null;
+    this._draggingId = null;
+    this._endGhost();
     const typeKey = e.dataTransfer?.getData(PAGE_TYPE_MIME);
     const sectionId = e.dataTransfer?.getData(PAGE_SECTION_MIME);
     if (typeKey) this.addSectionToSlot(typeKey, containerId, index);
@@ -857,6 +969,8 @@ export default class ZnPageBuilder extends ZincElement {
     e.preventDefault();
     e.stopPropagation();
     this._dragOverIndex = null;
+    this._draggingId = null;
+    this._endGhost();
     const typeKey = e.dataTransfer?.getData(PAGE_TYPE_MIME);
     const sectionId = e.dataTransfer?.getData(PAGE_SECTION_MIME);
     if (typeKey) this.addSection(typeKey, index);
@@ -924,6 +1038,7 @@ export default class ZnPageBuilder extends ZincElement {
   private _renderPaletteItem(type: PageSectionType) {
     return html`
       <zn-page-palette-item
+        @dragstart="${(e: DragEvent) => this._startGhost(e, { type })}"
         type="${type.type}"
         label="${type.label}"
         description="${ifDefined(type.description)}"
@@ -1018,7 +1133,7 @@ export default class ZnPageBuilder extends ZincElement {
     const pinned = this._isPinned(section.id);
     return html`
       <zn-page-section-card
-        class="${extraClass}"
+        class="${extraClass} ${this._draggingId === section.id ? 'dragging' : ''}"
         data-id="${section.id}"
         draggable="${pinned ? 'false' : 'true'}"
         tabindex="0"
@@ -1050,7 +1165,7 @@ export default class ZnPageBuilder extends ZincElement {
     });
     if (!type?.slots) return card;
     return html`
-      <div class="container">
+      <div class="container ${this._draggingId === section.id ? 'container--dragging' : ''}">
         ${card}
         <div class="slots" style="--pb-slot-columns:${slotColumns(section, type)}">
           ${sectionChildren(section, type).map((child, i) => this._renderSlot(section, child, i))}
@@ -1290,6 +1405,8 @@ export default class ZnPageBuilder extends ZincElement {
         @dragend="${() => {
           this._dragOverIndex = null;
           this._slotDragOver = null;
+          this._draggingId = null;
+          this._endGhost();
         }}">
         <header part="header" class="header" ?hidden="${!hasHeader}">
           <div class="header__group">
@@ -1304,6 +1421,7 @@ export default class ZnPageBuilder extends ZincElement {
         ${this._renderInspector()}
         <slot name="config" class="declarations" @slotchange="${this._registerSlottedTemplates}"></slot>
       </div>
+      ${this._renderDragGhost()}
     `;
   }
 }

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

@@ -8,6 +8,7 @@
   --pb-card-width: 1024px;
 
   display: block;
+  position: relative; // anchors the drag ghost
   width: 100%;
   height: 100%;
   min-height: 480px;
@@ -496,6 +497,14 @@ zn-page-palette-item {
   }
 }
 
+// Out of the flow while its drag ghost stands in: the canvas would otherwise
+// hold the card's height *and* the expanded drop placeholder, growing the page
+// by a placeholder's worth for the length of every drag.
+zn-page-section-card.dragging,
+.container--dragging {
+  display: none;
+}
+
 // A container section: its card spans the row with a grid of child slots below.
 .container {
   width: 100%;
@@ -649,3 +658,16 @@ zn-page-palette-item {
     }
   }
 }
+
+// The builder's own drag image, moved by hand against the host. It sits outside
+// .builder so that panel's overflow clip can't cut it, and draws its shadow with
+// a filter so the falloff follows the card's rounded corners rather than its box.
+.drag-ghost {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  opacity: 0.9;
+  pointer-events: none;
+  filter: drop-shadow(0 6px 16px rgba(var(--zn-shadow), 0.35));
+}

package/src/components/page-builder/page.types.ts

@@ -129,3 +129,23 @@ export function sectionSummary(section: PageSection, type?: PageSectionType): st
   }
   return strings[0]?.[1] ?? type?.description ?? '';
 }
+
+let _emptyDragImage: HTMLImageElement | undefined;
+
+/**
+ * A cached 1×1 transparent image for `dataTransfer.setDragImage()`. The browser
+ * composites its own snapshot of the dragged node onto an opaque surface, which
+ * squares off a card's rounded corners; the builder draws its own ghost instead.
+ */
+export function emptyDragImage(): HTMLImageElement {
+  if (!_emptyDragImage) {
+    _emptyDragImage = new Image();
+    _emptyDragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    // `complete` goes true synchronously for a data URL but the bitmap is not
+    // decoded yet, and a drag image the compositor has never rasterized is
+    // dropped in favor of the browser's own — a globe icon dragged alongside
+    // the builder's ghost, on the first drag only
+    void _emptyDragImage.decode().catch(() => undefined);
+  }
+  return _emptyDragImage;
+}

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

@@ -201,7 +201,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
                    size="medium"
                    placeholder="Select Filter"
                    @zn-change="${this._addRule}">
-          ${this.filters && this.filters.filter(item => !this._usedFilterIds.has(item.id)).map(item => html`
+          ${this.filters?.filter(item => !this._usedFilterIds.has(item.id)).map(item => html`
             <zn-option value="${item.id}">
               ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
             </zn-option>`)}
@@ -460,7 +460,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
   }
 
   private _updateDateValue(id: string, event: Event | {
-    target: ZnDatepicker | HTMLDivElement
+    target: ZnDatepicker | HTMLDivElement;
   }, submitFormat: QueryBuilderDateSubmitFormat = 'legacy') {
     const filter = this._selectedRules.get(id);
     if (!filter) return;

package/src/components/sidebar/sidebar.component.ts

@@ -1,10 +1,10 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property} from 'lit/decorators.js';
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './sidebar.scss';
-import {classMap} from "lit/directives/class-map.js";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -91,7 +91,7 @@ export default class ZnSidebar extends ZincElement {
       </div>`;
   }
 
-  handleClick(e: any) {
+  handleClick(e: Event) {
     this.open = !this.open;
     e.stopPropagation();
   }

package/src/components/slideout/slideout.component.ts

@@ -1,10 +1,10 @@
 import {animateTo} from "../../internal/animate";
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
-import {LocalizeController} from "../../utilities/localize";
-import {property, query} from 'lit/decorators.js';
 import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
 import {idSelector} from "../../utilities/query";
+import {LocalizeController} from "../../utilities/localize";
+import {property, query} from 'lit/decorators.js';
 import {unlockBodyScrolling} from "../../internal/scroll";
 import ZincElement from '../../internal/zinc-element';
 import ZnButton from "../button";

package/src/components/stat/stat.component.ts

@@ -1,7 +1,7 @@
-import {property} from 'lit/decorators.js';
+import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
-import {classMap} from "lit/directives/class-map.js";
 
 import styles from './stat.scss';
 
@@ -45,7 +45,7 @@ export default class ZnStatsTile extends ZincElement {
   }
 
   getCurrentAmount() {
-    if (this.currency == "") {
+    if (this.currency === "") {
       return this.amount;
     }
     // convert string to money

package/src/components/stepper/stepper.component.ts

@@ -1,5 +1,5 @@
-import {property} from 'lit/decorators.js';
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './stepper.scss';

package/src/internal/form.ts

@@ -36,11 +36,11 @@ const interactions = new WeakMap<ZincFormControl, string[]>();
 
 const formStorePrefix = 'znform:';
 
-type StoredFormControlValue = {
+interface StoredFormControlValue {
   checked?: boolean;
   indeterminate?: boolean;
   value?: unknown;
-};
+}
 
 type PersistableNativeControl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 

package/src/internal/zinc-element.ts

@@ -1,6 +1,6 @@
 import {LitElement, type PropertyValues} from "lit";
-import {property} from "lit/decorators.js";
 import {modeSignal, SignalWatcher, themeSignal} from "./theme";
+import {property} from "lit/decorators.js";
 import type {
   EventTypeDoesNotRequireDetail,
   EventTypeRequiresDetail,