@kubex/zinc 2.0.2 → 2.0.3

package/package.json

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

package/src/components/button/button.component.ts

@@ -12,8 +12,8 @@ import ZnDropdown from "../dropdown";
 import ZnIcon from "../icon";
 import ZnTooltip from "../tooltip";
 import type {IconColor, IconLibrary} from "../icon";
-import type ZnMenu from "../menu";
 import type {ZincFormControl} from '../../internal/zinc-element';
+import type ZnMenu from "../menu";
 
 import sharedStyles from '../../../scss/shared/index.scss';
 import styles from './button.scss';
@@ -641,7 +641,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--icon-button-small': this.iconButton === 'small',
           'button--icon-button-round': this.iconButton === 'round',
           'button--grow': this.grow,
-          'button--standard': !this.outline && !this.text,
+          'button--standard': !this.outline && (!this.text || this.solid),
           'button--with-icon': this.icon,
           'button--icon-left': this.iconPosition === 'left',
           'button--icon-right': this.iconPosition === 'right',

package/src/components/button/button.test.ts

@@ -66,6 +66,13 @@ describe('<zn-button>', () => {
     expect(base.classList.contains('button--large')).to.be.true;
   });
 
+  it('keeps the filled style when solid overrides text', async () => {
+    const el = await fixture<ZnButton>(html`<zn-button text solid color="primary">Create</zn-button>`);
+    const base = el.shadowRoot!.querySelector('[part~="base"]')!;
+    expect(base.classList.contains('button--standard')).to.be.true;
+    expect(base.classList.contains('button--text')).to.be.false;
+  });
+
   it('applies the ai color', async () => {
     const el = await fixture<ZnButton>(html`<zn-button color="ai">Summarise</zn-button>`);
     const base = el.shadowRoot!.querySelector('[part~="base"]')!;

package/src/components/chart/chart.component.ts

@@ -16,8 +16,8 @@ import {
   type RadarIndicator,
   type SeriesItem,
 } from './builders';
-import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import { type EChartsModule, loadECharts } from './echarts-loader';
 import { LiveTransport, LiveWindow } from './live';
 import { property, state } from 'lit/decorators.js';

package/src/components/editor/modules/dialog/dialog.test.ts

@@ -1,7 +1,7 @@
 import '../../../../../dist/zn.min.js';
 import {expect, fixture, html, oneEvent} from '@open-wc/testing';
-import type DialogComponent from './dialog.component';
 import type {ZnEditorInsertEvent} from '../events/zn-editor-insert';
+import type DialogComponent from './dialog.component';
 
 describe('<zn-editor-dialog> content inserts', () => {
   const dialog = () => fixture<DialogComponent>(html`

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

@@ -3,10 +3,10 @@ import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {md5} from "../../utilities/md5";
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
+import {onHoverIntent} from '../../internal/hover-intent';
 import {property} from 'lit/decorators.js';
 import {styleMap} from "lit/directives/style-map.js";
 import ZincElement from '../../internal/zinc-element';
-import {onHoverIntent} from '../../internal/hover-intent';
 
 import styles from './expanding-action.scss';
 

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

@@ -3,8 +3,8 @@ 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 ZnDataSelect from "../data-select";
 import type ZnDataTable from "../data-table";
 import type ZnInput from "../input";
 import type ZnQueryBuilder from "../query-builder";

package/src/components/inline-edit/inline-edit.component.ts

@@ -86,7 +86,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   @property({ type: Boolean }) inline: boolean
 
-  @property({ type: Boolean }) padded: boolean
+  @property({ type: Boolean, reflect: true }) padded: boolean
 
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
@@ -436,7 +436,6 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         'ai--focused': this.hasFocus,
         'ai--disabled': this.disabled,
         'ai--inline': this.inline,
-        'ai--padded': this.padded,
         'ai--masked': !!this.displayValue,
       })}" dir="ltr">
 

package/src/components/inline-edit/inline-edit.scss

@@ -1,30 +1,34 @@
 @use "../../wc";
 
 :host {
+  --ai-input-height: var(--zn-input-height-medium);
+
   display: block;
+  box-sizing: border-box;
   container-type: inline-size;
   width: 100%;
 }
 
+// On the host rather than the row, so the hover fill and edit actions stay hugging the field
+:host([padded]) {
+  padding: var(--zn-spacing-large);
+}
+
 .ai {
   --bleed: var(--zn-inline-edit-bleed, 10px);
   display: flex;
-  width: 100%;
+  box-sizing: border-box;
+  // The hover fill hangs out past the value's left edge, so the text stays aligned with the column
+  width: calc(100% + var(--bleed));
+  margin-inline-start: calc(-1 * var(--bleed));
+  padding-inline-start: var(--bleed);
   flex-direction: row;
   gap: 10px;
   border-radius: var(--zn-border-radius-medium);
   transition: background-color var(--zn-transition-fast) ease;
 
-  // The hover fill hangs out past the value's left edge, so the text stays aligned with the column
-  &:not(.ai--padded) {
-    box-sizing: border-box;
-    width: calc(100% + var(--bleed));
-    margin-inline-start: calc(-1 * var(--bleed));
-    padding-inline-start: var(--bleed);
-  }
-
   // The input's own padding takes over from the bleed, keeping its text roughly where the value was
-  &--editing:not(.ai--padded) {
+  &--editing {
     padding-inline-start: 0;
   }
 
@@ -116,10 +120,6 @@
     }
   }
 
-  &--padded {
-    padding: var(--zn-spacing-large);
-  }
-
   &--inline {
     display: flex;
     flex-direction: row;
@@ -160,7 +160,7 @@
       position: absolute;
       inset-block-start: 0;
       inset-inline-end: var(--action-inset);
-      height: var(--zn-input-height-medium);
+      height: var(--ai-input-height);
       gap: 2px;
     }
 
@@ -238,7 +238,7 @@
 
   &__reveal {
     // Matches the height of the input it stands in for, so entering edit mode doesn't resize the row
-    line-height: var(--zn-input-height-medium);
+    line-height: var(--ai-input-height);
     color: rgb(var(--zn-text));
 
     // Fill the row so hovering anywhere over the field reveals the value
@@ -312,10 +312,10 @@ zn-textarea::part(textarea) {
   resize: none;
 }
 
-:host([size="small"]) .ai__reveal {
-  line-height: var(--zn-input-height-small);
+:host([size="small"]) {
+  --ai-input-height: var(--zn-input-height-small);
 }
 
-:host([size="large"]) .ai__reveal {
-  line-height: var(--zn-input-height-large);
+:host([size="large"]) {
+  --ai-input-height: var(--zn-input-height-large);
 }

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

@@ -192,7 +192,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   /** Determines whether or no the password is currently visible. Only applies to password types **/
   @property({attribute: 'password-visible', type: Boolean}) passwordVisible: boolean = false;
 
-  /** Hides the browsers built-in increment/decrement spin buttons for number inputs **/
+  /** Hides the increment/decrement buttons on number inputs **/
   @property({attribute: 'no-spin-buttons', type: Boolean}) noSpinButtons: boolean = false;
 
   /**
@@ -505,6 +505,27 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     }
   }
 
+  /** Whether the value has reached `limit`; `direction` 1 checks a maximum, -1 a minimum. */
+  private isAtLimit(limit: number | string | undefined, direction: 1 | -1): boolean {
+    const value = parseFloat(String(this.value));
+    const bound = parseFloat(String(limit));
+    return !isNaN(value) && !isNaN(bound) && (value - bound) * direction >= 0;
+  }
+
+  private handleStep(direction: 'up' | 'down') {
+    const previous: unknown = this.value;
+    if (direction === 'up') {
+      this.stepUp();
+    } else {
+      this.stepDown();
+    }
+    if (this.value === previous) return;
+    // stepUp()/stepDown() don't fire events, unlike the native spinner they replace
+    this.formControlController.updateValidity();
+    this.emit('zn-input');
+    this.emit('zn-change');
+  }
+
   private handlePasswordToggle() {
     this.passwordVisible = !this.passwordVisible;
   }
@@ -861,7 +882,6 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
                  'input--focused': this.hasFocus,
                  'input--empty': !this.value,
                  'input--range': isRange,
-                 'input--no-spin-buttons': this.noSpinButtons && this.type !== 'currency',
                  'input--color': this.type === 'color',
                  'input--color-invalid': this.colorInvalid,
                })}>
@@ -973,6 +993,22 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
                 </button>`
               : ''}
 
+            ${this.type === 'currency' || (this.type === 'number' && !this.noSpinButtons)
+              ? html`
+                <span part="stepper" class="input__stepper">
+                  <button class="input__stepper-button" type="button" tabindex="-1" aria-label="Decrement"
+                          ?disabled=${this.disabled || this.readonly || this.isAtLimit(this.min, -1)}
+                          @click=${() => this.handleStep('down')}>
+                    <zn-icon src="minus@lu" size="16"></zn-icon>
+                  </button>
+                  <button class="input__stepper-button" type="button" tabindex="-1" aria-label="Increment"
+                          ?disabled=${this.disabled || this.readonly || this.isAtLimit(this.max, 1)}
+                          @click=${() => this.handleStep('up')}>
+                    <zn-icon src="plus@lu" size="16"></zn-icon>
+                  </button>
+                </span>`
+              : ''}
+
             <span part="suffix" class="input__suffix">
               <slot name="suffix"></slot>
             </span>

package/src/components/input/input.scss

@@ -386,17 +386,81 @@ input[type='text'].input__control[data-color-input] {
   display: none;
 }
 
-/* Hide the built-in number spinner */
-.input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
-.input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
+/* The built-in spinner is replaced by .input__stepper */
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
   -webkit-appearance: none;
   display: none;
 }
 
-.input--no-spin-buttons input[type='number'] {
+input[type='number'] {
   -moz-appearance: textfield;
 }
 
+.input__stepper {
+  --stepper-button-size: calc(var(--zn-input-height-medium) - 10px);
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+  padding-inline: 4px 5px;
+}
+
+.input--x-small .input__stepper {
+  --stepper-button-size: calc(var(--zn-input-height-x-small) - 6px);
+  gap: 2px;
+  padding-inline: 2px 3px;
+}
+
+.input--small .input__stepper {
+  --stepper-button-size: calc(var(--zn-input-height-small) - 8px);
+}
+
+.input--large .input__stepper {
+  --stepper-button-size: calc(var(--zn-input-height-large) - 10px);
+}
+
+.input__stepper-button {
+  display: grid;
+  place-content: center;
+  flex: 0 0 auto;
+  width: var(--stepper-button-size);
+  height: var(--stepper-button-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--zn-border-radius-small);
+  background: none;
+  cursor: pointer;
+  transition: var(--zn-transition-fast) background-color,
+  transform 160ms var(--zn-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+
+  zn-icon {
+    --icon-color: var(--zn-input-icon-color);
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--zn-color-neutral-100);
+
+    zn-icon {
+      --icon-color: var(--zn-input-icon-color-hover);
+    }
+  }
+
+  // Deeper than zn-button's 0.97, which is imperceptible at this size
+  &:active:not(:disabled) {
+    background-color: var(--zn-color-neutral-200);
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+
+    zn-icon {
+      --icon-color: var(--zn-input-border-color);
+    }
+  }
+}
+
 /* Replace the -webkit-calendar-picker icon */
 input[type='date']::-webkit-calendar-picker-indicator {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="%236d7176" d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM112 256h96c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16z"/></svg>');

package/src/components/input/input.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/zn.min.js';
-import {expect, fixture, html, waitUntil} from '@open-wc/testing';
 import {clearFormStoreValues} from '../../utilities/form';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
 import type ZnInput from './input.component';
 import type ZnSlashMenu from '../slash-menu/slash-menu.component';
 

package/src/components/nav-list/nav-list.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/zn.min.js';
 import {aTimeout, expect, fixture, html} from '@open-wc/testing';
-import {centre, drop, dragTo, startDrag} from '../../internal/test-drag';
+import {centre, dragTo, drop, startDrag} from '../../internal/test-drag';
 import type ZnNavItem from '../nav-item';
 import type ZnNavList from './nav-list.component';
 

package/src/components/navbar/navbar.component.ts

@@ -1,10 +1,10 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {ifDefined} from "lit/directives/if-defined.js";
+import {type IndicatorEdges, slideTabIndicator, squishTabIndicator} from "../../internal/tab-indicator";
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property} from 'lit/decorators.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
-import {type IndicatorEdges, slideTabIndicator, squishTabIndicator} from "../../internal/tab-indicator";
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 import ZnDropdown from "../dropdown";
@@ -111,6 +111,7 @@ export default class ZnNavbar extends ZincElement {
   private _indicator: HTMLElement | null = null;
   private _indicatorFrame: number | null = null;
   private _indicatorTab: HTMLElement | null = null;
+  private _indicatorStripWidth = 0;
   private _indicatorTarget: IndicatorEdges | null = null;
   private _expandable: HTMLElement | null = null;
   private readonly _lightDomClones = new WeakMap<HTMLElement, HTMLElement>();
@@ -242,18 +243,23 @@ export default class ZnNavbar extends ZincElement {
 
     // The indicator scrolls with the tabs, so it is placed in the strip's content coordinates
     const box = container.getBoundingClientRect();
-    const originLeft = box.left - container.scrollLeft;
-    const target = {left: tab.left - originLeft, right: tab.right - originLeft};
+    // An ancestor mid scale-in (e.g. a modal opening) shrinks every rect, and its end fires no resize to re-measure
+    const scaleX = box.width / container.offsetWidth || 1;
+    const scaleY = box.height / container.offsetHeight || 1;
+    const toStrip = (x: number) => (x - box.left) / scaleX + container.scrollLeft;
+    const target = {left: toStrip(tab.left), right: toStrip(tab.right)};
     const previous = this._indicatorTarget;
     const tabChanged = active !== this._indicatorTab;
     const ready = indicator.classList.contains('navbar__indicator--ready');
     this._indicatorTab = active ?? null;
-    if (tabChanged && active) {
-      this._revealTab(active, ready);
+    const stripResized = container.clientWidth !== this._indicatorStripWidth;
+    this._indicatorStripWidth = container.clientWidth;
+    if (active && (tabChanged || stripResized)) {
+      this._revealTab(active, ready && tabChanged);
     }
     // Exposed for ::part(indicator) styles that fill the tab rather than underline it.
-    setStyle(indicator, '--zn-navbar-indicator-top', `${tab.top - box.top}px`);
-    setStyle(indicator, '--zn-navbar-indicator-height', `${tab.height}px`);
+    setStyle(indicator, '--zn-navbar-indicator-top', `${(tab.top - box.top) / scaleY}px`);
+    setStyle(indicator, '--zn-navbar-indicator-height', `${tab.height / scaleY}px`);
     indicator.classList.toggle('navbar__indicator--shown', true);
     if (previous && Math.abs(previous.left - target.left) < 0.5 && Math.abs(previous.right - target.right) < 0.5) {
       return;
@@ -271,7 +277,7 @@ export default class ZnNavbar extends ZincElement {
     indicator.style.width = `${target.right - target.left}px`;
     this._indicatorTarget = target;
     if (slide) {
-      slideTabIndicator(indicator, {left: drawn.left - originLeft, right: drawn.right - originLeft}, target);
+      slideTabIndicator(indicator, {left: toStrip(drawn.left), right: toStrip(drawn.right)}, target);
     }
 
     // The first placement jumps into position; only later moves animate.

package/src/components/panel/panel.component.ts

@@ -1,7 +1,7 @@
-import {ifDefined} from "lit/directives/if-defined.js";
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
+import {ifDefined} from "lit/directives/if-defined.js";
 import {property, state} from 'lit/decorators.js';
 import {registerCosmicBorder} from "../../internal/cosmic-border";
 import ZincElement from '../../internal/zinc-element';

package/src/components/priority-list/priority-list.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/zn.min.js';
 import {aTimeout, expect, fixture, html} from '@open-wc/testing';
-import {centre, drop, dragTo, startDrag} from '../../internal/test-drag';
+import {centre, dragTo, drop, startDrag} from '../../internal/test-drag';
 
 describe('<zn-priority-list>', () => {
   it('should render a component', async () => {

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

@@ -4,8 +4,8 @@ import {on} from "../../utilities/on";
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 
-import styles from './split-pane.scss';
 import { PropertyValues } from "@lit/reactive-element";
+import styles from './split-pane.scss';
 
 type NavigationItem = {
   caption: string;

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

@@ -14,11 +14,11 @@ 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 {onHoverIntent} from '../../internal/hover-intent';
+import {pointerInitiated} from '../../internal/input-modality';
 import {property} from 'lit/decorators.js';
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
-import {onHoverIntent} from '../../internal/hover-intent';
-import {pointerInitiated} from '../../internal/input-modality';
 
 // Tabs load in such a way that the global sheet has to be re-applied inside the shadow root.
 import bootStyles from '../../../scss/boot.scss';