@kubex/zinc 1.1.185 → 2.0.0

package/src/components/input/input.scss

@@ -26,6 +26,7 @@
 .input--standard {
   background-color: var(--zn-input-background-color);
   border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+  box-shadow: var(--zn-input-shadow, none);
 }
 
 .input--standard:hover:not(.input--disabled, .input--filled) {
@@ -55,6 +56,15 @@
   color: var(--zn-input-color-focus);
 }
 
+/* Invalid, once the user has interacted */
+:host([data-user-invalid]) .input--standard:not(.input--disabled) {
+  border-color: var(--zn-input-border-color-invalid);
+}
+
+:host([data-user-invalid]) .input--standard.input--focused:not(.input--disabled) {
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color-invalid);
+}
+
 .input--standard.input--disabled {
   background-color: var(--zn-input-background-color-disabled);
   border-color: var(--zn-input-border-color-disabled);
@@ -90,12 +100,13 @@
   cursor: inherit;
   -webkit-appearance: none;
   line-height: var(--zn-input-line-height);
+  text-overflow: ellipsis;
 }
 
-/* Color input text should use monospace font */
 input[type='text'].input__control[data-color-input] {
-  font-family: var(--zn-font-mono, 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace);
-  font-size: 0.9em;
+  font-family: var(--zn-font-family-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
 }
 
 .input__control::-webkit-search-decoration,
@@ -128,6 +139,11 @@ input[type='text'].input__control[data-color-input] {
   outline: none;
 }
 
+.input__prefix {
+  // Holds the text at the same start for prefixes of differing widths, such as language codes
+  min-width: var(--zn-input-prefix-min-width, 0);
+}
+
 .input__prefix,
 .input__suffix {
   display: inline-flex;
@@ -165,7 +181,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--x-small .input__control {
   height: calc(var(--zn-input-height-x-small) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-spacing-small);
+  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-input-padding-inline, var(--zn-spacing-small));
 }
 
 .input--x-small .input__clear,
@@ -199,7 +215,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--small .input__control {
   height: calc(var(--zn-input-height-small) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-spacing-small);
+  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-input-padding-inline, var(--zn-spacing-small));
 }
 
 .input--small .input__clear,
@@ -233,7 +249,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--medium .input__control {
   height: calc(var(--zn-input-height-medium) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-spacing-small);
+  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-input-padding-inline, var(--zn-spacing-small));
 }
 
 .input--medium .input__clear,
@@ -281,7 +297,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--large .input__control {
   height: calc(var(--zn-input-height-large) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-medium) 0 var(--zn-spacing-small);
+  padding: 0 var(--zn-input-spacing-medium) 0 var(--zn-input-padding-inline, var(--zn-spacing-small));
 }
 
 .input--large .input__clear,
@@ -326,7 +342,7 @@ input[type='text'].input__control[data-color-input] {
  */
 
 .input__clear:not(.input__clear--visible) {
-  visibility: hidden;
+  display: none;
 }
 
 .input__clear,
@@ -357,8 +373,12 @@ input[type='text'].input__control[data-color-input] {
   outline: none;
 }
 
+.input__password-toggle:focus-visible {
+  outline: var(--zn-focus-ring);
+}
+
 .input--empty .input__clear {
-  visibility: hidden;
+  display: none;
 }
 
 /* Don't show the browser's password toggle in Edge */
@@ -382,47 +402,63 @@ 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>');
 }
 
-/* Color input styling — the preview fills the trailing edge of the field */
+/* Colour inputs lead with a swatch that opens the colour panel, divided from the value */
 .input__color-swatch {
-  display: inline-flex;
+  display: grid;
+  place-content: center;
+  flex: 0 0 auto;
   align-self: stretch;
+  padding: 0;
+  margin: 0;
+  background: transparent;
   border: none;
-  border-inline-start: solid var(--zn-input-border-width) var(--zn-input-border-color);
-  border-radius: 0;
-  background-color: var(--zn-color-neutral-0);
+  border-inline-end: solid var(--zn-input-border-width) var(--zn-input-border-color);
   cursor: pointer;
-  overflow: hidden;
-  position: relative;
-  flex-shrink: 0;
-  margin: 0;
 
-  &:hover .input__color-swatch-inner {
-    filter: brightness(0.95);
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--zn-focus-ring-color);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
   }
 }
 
 .input__color-swatch-inner {
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-value, #000000);
-  transition: var(--zn-transition-fast) filter;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px var(--zn-input-border-color);
 }
 
-/* Size adjustments for color inputs — .input clips the trailing corners */
 .input--x-small .input__color-swatch {
-  width: calc(var(--zn-input-height-x-small) * 1.2);
+  width: var(--zn-input-height-x-small);
 }
 
 .input--small .input__color-swatch {
-  width: calc(var(--zn-input-height-small) * 1.2);
+  width: var(--zn-input-height-small);
 }
 
 .input--medium .input__color-swatch {
-  width: calc(var(--zn-input-height-medium) * 1.2);
+  width: var(--zn-input-height-medium);
 }
 
 .input--large .input__color-swatch {
-  width: calc(var(--zn-input-height-large) * 1.2);
+  width: var(--zn-input-height-large);
+}
+
+.input--standard.input--color-invalid:not(.input--disabled) {
+  border-color: var(--zn-input-border-color-invalid);
+}
+
+.input--color-invalid .input__control,
+.input--color-invalid:hover .input__control {
+  color: var(--zn-color-danger-fg);
+}
+
+.input__color-popup::part(popup) {
+  z-index: var(--zn-z-index-dropdown);
 }
 
 /* Range inputs render as a bare track, with the value shown in the context note above */
@@ -540,17 +576,3 @@ input[type='date']::-webkit-calendar-picker-indicator {
 .input--range .input__control:focus-visible::-moz-range-thumb {
   box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
 }
-
-/* Hide the native color input but keep it functional */
-.input__color-picker {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  padding: 0;
-  margin: 0;
-  pointer-events: none;
-  border: none;
-  visibility: hidden;
-}
-

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

@@ -34,7 +34,7 @@ describe('<zn-input>', () => {
   });
 
   describe('Escape key', () => {
-    it('blurs the inner input and stops propagation when focused', async () => {
+    it('keeps focus and swallows only the first Escape', async () => {
       const wrapper = await fixture<HTMLDivElement>(html`
         <div>
           <zn-input></zn-input>
@@ -52,16 +52,20 @@ describe('<zn-input>', () => {
       await el.updateComplete;
       expect(el.shadowRoot!.activeElement).to.equal(el.input);
 
-      el.input.dispatchEvent(new KeyboardEvent('keydown', {
+      const pressEscape = () => el.input.dispatchEvent(new KeyboardEvent('keydown', {
         key: 'Escape',
         bubbles: true,
         composed: true,
         cancelable: true
       }));
-      await el.updateComplete;
 
-      expect(el.shadowRoot!.activeElement, 'inner input should be blurred').to.not.equal(el.input);
+      pressEscape();
+      await el.updateComplete;
+      expect(el.shadowRoot!.activeElement, 'inner input should keep focus').to.equal(el.input);
       expect(wrapperEscapes, 'wrapper should not see Escape on press 1').to.equal(0);
+
+      pressEscape();
+      expect(wrapperEscapes, 'wrapper should see Escape on press 2').to.equal(1);
     });
   });
 
@@ -241,6 +245,68 @@ describe('<zn-input>', () => {
     });
   });
 
+  describe('type="color"', () => {
+    const typeInto = async (el: ZnInput, text: string) => {
+      const control = el.shadowRoot!.querySelector<HTMLInputElement>('.input__control')!;
+      control.focus();
+      control.value = text;
+      control.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
+      control.dispatchEvent(new Event('change'));
+      control.blur();
+      await el.updateComplete;
+      await el.updateComplete;
+    };
+
+    it('writes the starting value in color-format', async () => {
+      const el = await fixture<ZnInput>(html`<zn-input type="color" color-format="rgb" value="#7557F5"></zn-input>`);
+      await el.updateComplete;
+
+      expect(el.value).to.equal('rgb(117, 87, 245)');
+    });
+
+    it('switches to the format that was typed and keeps a tidy value as written', async () => {
+      const el = await fixture<ZnInput>(html`<zn-input type="color" value="#085EFD"></zn-input>`);
+
+      await typeInto(el, 'oklch(70% 0.15 250)');
+
+      expect(el.colorFormat).to.equal('oklch');
+      expect(el.value).to.equal('oklch(70% 0.15 250)');
+    });
+
+    it('writes a name out in the current format', async () => {
+      const el = await fixture<ZnInput>(html`<zn-input type="color" value="#085EFD"></zn-input>`);
+
+      await typeInto(el, 'rebeccapurple');
+
+      expect(el.value).to.equal('#663399');
+    });
+
+    it('marks text that is not a colour as invalid', async () => {
+      const el = await fixture<ZnInput>(html`<zn-input type="color" value="#085EFD"></zn-input>`);
+
+      await typeInto(el, 'not a colour');
+
+      const control = el.shadowRoot!.querySelector('.input__control')!;
+      expect(control.getAttribute('aria-invalid')).to.equal('true');
+      expect(el.shadowRoot!.querySelector('[part="base"]')!.classList.contains('input--color-invalid')).to.be.true;
+    });
+
+    it('opens the colour panel from the swatch and closes it on Escape', async () => {
+      const el = await fixture<ZnInput>(html`<zn-input type="color" value="#085EFD"></zn-input>`);
+      const swatch = el.shadowRoot!.querySelector<HTMLButtonElement>('.input__color-swatch')!;
+
+      swatch.click();
+      await el.updateComplete;
+      expect(swatch.getAttribute('aria-expanded')).to.equal('true');
+      expect(el.shadowRoot!.querySelector('zn-color-picker')).to.exist;
+
+      document.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape'}));
+      await el.updateComplete;
+      expect(swatch.getAttribute('aria-expanded')).to.equal('false');
+      expect(el.shadowRoot!.querySelector('zn-color-picker')).to.not.exist;
+    });
+  });
+
   describe('slash menu', () => {
     function slashMenuOf(el: ZnInput) {
       return el.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu');
@@ -351,4 +417,20 @@ describe('<zn-input>', () => {
       expect(el.shadowRoot!.activeElement, 'the field should keep focus').to.equal(el.input);
     });
   });
+
+  it('paints the invalid border once the user has submitted', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form @submit=${(e: Event) => e.preventDefault()}>
+        <zn-input required style="--zn-input-border-color-invalid: rgb(1, 2, 3)"></zn-input>
+      </form>`);
+    const el = form.querySelector<ZnInput>('zn-input')!;
+    const base = el.shadowRoot!.querySelector('.input')!;
+    expect(getComputedStyle(base).borderColor).to.not.equal('rgb(1, 2, 3)');
+
+    form.requestSubmit();
+    await el.updateComplete;
+
+    expect(el.hasAttribute('data-user-invalid')).to.be.true;
+    expect(getComputedStyle(base).borderColor).to.equal('rgb(1, 2, 3)');
+  });
 });

package/src/components/item/item.component.ts

@@ -37,6 +37,15 @@ export default class ZnItem extends ZincElement {
 
   @property({type: Boolean}) stacked: boolean;
 
+  /** A fact in a grid of headline attributes: a small muted caption above the value, without padding. */
+  @property({type: Boolean, reflect: true}) fact: boolean;
+
+  /** A row in a key–value list: a small muted caption beside a right-aligned value, on a compact row. */
+  @property({attribute: 'key-value', type: Boolean, reflect: true}) keyValue: boolean;
+
+  /** Shows the value in the monospace font, for identifiers and codes. */
+  @property({type: Boolean, reflect: true}) mono: boolean;
+
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
 
   @property({attribute: 'edit-on-hover', type: Boolean}) editOnHover: boolean;
@@ -117,6 +126,9 @@ export default class ZnItem extends ZincElement {
           'item': true,
           'item--with-content': this._hasContent(),
           'item--stacked': this.stacked,
+          'item--fact': this.fact,
+          'item--key-value': this.keyValue,
+          'item--mono': this.mono,
           'item--edit-on-hover': this.editOnHover,
           'item--inline': this.inline,
           'item--grid': this.grid,

package/src/components/item/item.scss

@@ -7,6 +7,11 @@
   --zn-item-label-max-width: 450px;
 }
 
+// Inset by the panel padding on the host, so a divided list's dividers stop at the card's content edge
+:host([key-value]) {
+  margin-inline: var(--zn-panel-padding, var(--zn-spacing-medium));
+}
+
 .item {
   display: flex;
   flex-direction: row;
@@ -81,7 +86,7 @@
     width: 100%;
 
     ::slotted(a) {
-      color: rgb(var(--zn-primary)) !important;
+      color: var(--zn-color-primary-fg, rgb(var(--zn-primary))) !important;
     }
 
     ::slotted(zn-icon) {
@@ -156,13 +161,48 @@
     gap: var(--zn-spacing-2x-small);
   }
 
+  &--fact {
+    flex-direction: column;
+    align-items: baseline;
+    gap: var(--zn-spacing-3x-small);
+    padding: 0;
+    min-height: 0;
+
+    .item__headings {
+      width: auto;
+      max-width: none;
+    }
+
+    .item__caption {
+      font-size: var(--zn-font-size-small);
+      font-weight: 400;
+      line-height: var(--zn-line-height-dense);
+      color: var(--zn-text-color-muted);
+    }
+
+    .item__content {
+      max-width: 100%;
+      font-size: var(--zn-font-size-small);
+      font-weight: var(--zn-font-weight-medium);
+      line-height: var(--zn-line-height-dense);
+      overflow-wrap: anywhere;
+    }
+  }
+
+
   &--edit-on-hover {
     ::slotted(zn-inline-edit::part('actions')) {
       display: none;
     }
 
+    // Visually hidden rather than display: none, so keyboard users can still tab to them
     .item__actions {
-      display: none;
+      display: flex;
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
     }
 
     &:hover {
@@ -171,7 +211,11 @@
       }
 
       .item__actions {
-        display: flex;
+        position: static;
+        width: auto;
+        height: auto;
+        overflow: visible;
+        clip-path: none;
       }
     }
   }
@@ -209,6 +253,52 @@
     }
   }
 
+  // Declared after --with-content so its caption width wins at equal specificity
+  &--key-value {
+    padding-inline: 0;
+    align-items: center;
+    gap: var(--zn-spacing-x-small);
+    min-height: 2.4rem;
+    padding-block: var(--zn-spacing-3x-small);
+
+    // Stays a row on a narrow container: the caption is short and the value wraps instead
+    @include wc.container-query(null, sm) {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .item__headings {
+      width: 38%;
+      min-width: 6rem;
+      max-width: 38%;
+    }
+
+    .item__caption {
+      font-size: var(--zn-font-size-small);
+      font-weight: 400;
+      line-height: var(--zn-line-height-dense);
+      color: var(--zn-text-color-muted);
+    }
+
+    .item__content {
+      align-items: center;
+      gap: var(--zn-spacing-2x-small);
+      min-width: 0;
+      font-size: var(--zn-font-size-small);
+    }
+
+    .item__content-inner {
+      min-width: 0;
+      text-align: right;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  &--mono .item__content-inner {
+    font-family: var(--zn-font-mono);
+    font-size: 0.92em;
+  }
+
   &--no-padding {
     padding: 0 !important;
   }
@@ -218,3 +308,12 @@
     grid-template-columns: 1fr 1fr;
   }
 }
+
+// Slotted actions take focus in the light DOM, which only the host's :focus-within sees
+:host(:focus-within) .item--edit-on-hover .item__actions {
+  position: static;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  clip-path: none;
+}

package/src/components/item/item.test.ts

@@ -15,4 +15,27 @@ describe('<zn-item>', () => {
     expect(content).to.exist;
     expect(getComputedStyle(content!).textAlign).to.equal('right');
   });
+
+  it('renders a fact with a muted caption above its value', async () => {
+    const el = await fixture<HTMLElement>(html`<zn-item fact caption="Sender">noreply@example.com</zn-item>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const base = el.shadowRoot!.querySelector('.item')!;
+
+    expect(base.classList.contains('item--fact')).to.be.true;
+    expect(getComputedStyle(base).flexDirection).to.equal('column');
+    expect(getComputedStyle(el.shadowRoot!.querySelector('.item__caption')!).fontWeight).to.equal('400');
+  });
+
+  it('renders a key-value row with a muted caption beside a right-aligned value', async () => {
+    const el = await fixture<HTMLElement>(html`<zn-item key-value mono caption="Charge ID">fVeWtIUlss82t3RvFxD</zn-item>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const base = el.shadowRoot!.querySelector('.item')!;
+    const content = el.shadowRoot!.querySelector('.item__content-inner')!;
+
+    expect(base.classList.contains('item--key-value')).to.be.true;
+    expect(getComputedStyle(base).flexDirection).to.equal('row');
+    expect(getComputedStyle(el.shadowRoot!.querySelector('.item__caption')!).fontWeight).to.equal('400');
+    expect(getComputedStyle(content).textAlign).to.equal('right');
+    expect(base.classList.contains('item--mono')).to.be.true;
+  });
 });

package/src/components/key/key.component.ts

@@ -31,7 +31,7 @@ export default class ZnKey extends ZincElement {
     const chipType = this.active ? this.color : 'transparent';
 
     return html`
-      <div class="key" @click="${this._handleClick}">
+      <button type="button" class="key" aria-pressed="${this.active}" @click="${this._handleClick}">
         <zn-chip
           .icon="${this.icon}"
           .iconSize="${this.iconSize}"
@@ -41,7 +41,7 @@ export default class ZnKey extends ZincElement {
         <div class="key__description">
           <slot></slot>
         </div>
-      </div>
+      </button>
     `;
   }
 }

package/src/components/key/key.scss

@@ -5,6 +5,12 @@
 }
 
 .key {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -19,6 +25,11 @@
     line-height: var(--zn-line-height-normal);
     user-select: none;
   }
+
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    border-radius: var(--zn-border-radius-small);
+  }
 }
 
 :host([active]) .key__label {

package/src/components/key-value/index.ts

@@ -0,0 +1,12 @@
+import ZnKeyValue from './key-value.component';
+
+export * from './key-value.component';
+export default ZnKeyValue;
+
+ZnKeyValue.define('zn-key-value');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-key-value': ZnKeyValue;
+  }
+}