@kubex/zinc 1.0.108 → 1.0.110

package/docs/pages/components/icon.md

@@ -333,6 +333,8 @@ Explicit library specification:
 <zn-icon src="test1@example.com" library="gravatar" size="48"></zn-icon>
 ```
 
+Email addresses are trimmed, lowercased, and hashed with SHA-256 before the Gravatar request is made.
+
 Using shorthand notation:
 
 ```html:preview
@@ -348,6 +350,8 @@ Libravatar is an open-source alternative to Gravatar. Use it for federated avata
 <zn-icon src="user@example.com" library="libravatar" size="48" round></zn-icon>
 ```
 
+Email addresses are trimmed, lowercased, and hashed with SHA-256 before the Libravatar request is made.
+
 Similar to Gravatar, you can specify fallback options:
 
 ```html:preview
@@ -727,4 +731,4 @@ your HTML like this:
       grid-template-columns: repeat(4, 1fr);
     }
   }
-</style>
+</style>

package/package.json

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

package/src/components/button/button.scss

@@ -139,14 +139,13 @@
 
   &:hover:not([disabled]), &:active:not([disabled]) {
     background-color: rgb(var(--btn-color));
-    color: white;
   }
 
   &.button--secondary {
-    border-color: #F3EFFF;
+    border-color: var(--zn-color-neutral-100);
 
     &:hover:not([disabled]), &:active:not([disabled]) {
-      background-color: rgb(221, 218, 236);
+      background-color: var(--zn-color-neutral-100);
     }
   }
 }

package/src/components/datepicker/datepicker.component.ts

@@ -321,6 +321,12 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
       return;
     }
 
+    if (event.key === 'Escape') {
+      this.input.blur();
+      event.stopPropagation();
+      return;
+    }
+
     // Allow navigation and control keys
     const allowedKeys = [
       'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',

package/src/components/datepicker/datepicker.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnDatepicker from './datepicker.component';
 
 describe('<zn-datepicker>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,34 @@ describe('<zn-datepicker>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('Escape key', () => {
+    it('blurs the inner input when focused and the calendar is closed', async () => {
+      const el = await fixture<ZnDatepicker>(html`<zn-datepicker></zn-datepicker>`);
+      await el.updateComplete;
+
+      // Focus shows AirDatepicker's calendar (showEvent: 'focus'). Per spec, Escape
+      // while calendar is open is handled by AirDatepicker; our handler engages once
+      // the calendar is closed. Hide it explicitly to simulate the calendar-closed
+      // state, then press Escape.
+      el.focus();
+      await el.updateComplete;
+      const dp = (el as unknown as { _instance?: { hide: () => void; visible: boolean } })._instance;
+      dp?.hide();
+      await el.updateComplete;
+      el.input.focus();
+      await el.updateComplete;
+      expect(el.shadowRoot!.activeElement).to.equal(el.input);
+
+      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);
+    });
+  });
 });

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

@@ -74,14 +74,14 @@ export default class ZnFormGroup extends ZincElement {
                     </zn-tooltip>`
                   : ''}
               </label>
+            </div>` : html``}
 
-              ${hasHelpText ? html`
-                <div
-                  part="form-control-help-text"
-                  id="help-text"
-                  class="form-control__help-text">
-                  <slot name="help-text">${this.helpText}</slot>
-                </div>` : html``}
+          ${hasHelpText ? html`
+            <div
+              part="form-control-help-text"
+              id="help-text"
+              class="form-control__help-text">
+              <slot name="help-text">${this.helpText}</slot>
             </div>` : html``}
 
           <div part="form-control-input" class="form-control-input">

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

@@ -1,8 +1,8 @@
 import {choose} from 'lit/directives/choose.js';
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, render, unsafeCSS} from 'lit';
-import {md5} from '../../utilities/md5';
 import {property} from 'lit/decorators.js';
+import {sha256} from '../../utilities/sha256';
 import {styleMap} from "lit/directives/style-map.js";
 import ZincElement from '../../internal/zinc-element';
 
@@ -30,7 +30,7 @@ export type IconColor =
   | "violet"
   | "pink"
   | "grey"
-  | (string & {});
+  | (string & Record<never, never>);
 
 /**
  * @summary Short summary of the component's intended use.
@@ -127,40 +127,37 @@ export default class ZnIcon extends ZincElement {
   connectedCallback() {
     super.connectedCallback();
 
+    let hashFragment = '';
 
     if (this.src && this.src.includes('#')) {
-      const split = this.src.split('#');
+      const split = this.src.split('#', 2);
       this.src = split[0];
-      const attributes = split[1].split(',');
-      attributes.forEach(attr => {
-        if (attr === "round") {
-          this.round = true;
-        }
-        if (attr === "tile") {
-          this.tile = true;
-        }
-        if (attr === "depth") {
-          this.depth = true;
-        }
-      });
+      hashFragment = split[1] ?? '';
     }
 
     if (this.src && this.src.includes('@')) {
-      const split = this.src.split('@');
-      if (split[1].includes('.')) {
-        this.library = "gravatar";
-      } else if ((this.library === undefined) && split[1] !== "") {
+      const atIndex = this.src.lastIndexOf('@');
+      const libraryOrDomain = this.src.slice(atIndex + 1);
+
+      if (libraryOrDomain.includes('.')) {
+        this.library = this.library ?? "gravatar";
+      } else if ((this.library === undefined) && libraryOrDomain !== "") {
         // if split[1] is a valid library name, set it
-        this.library = this.convertToLibrary(split[1]);
-        this.src = split[0];
+        this.library = this.convertToLibrary(libraryOrDomain);
+        this.src = this.src.slice(0, atIndex);
       }
 
       if (this.library === "gravatar" || this.library === "libravatar") {
-        this.ravatarOptions();
-        this.src = md5(this.src);
+        this.applyHashFragment(hashFragment);
+        this.src = sha256(this.normalizeRavatarEmail(this.src));
+      } else {
+        this.applyHashFragment(hashFragment);
       }
     } else if (!this.library && this.src && !this.src.includes('/')) {
+      this.applyHashFragment(hashFragment);
       this.library = this.defaultLibrary;
+    } else {
+      this.applyHashFragment(hashFragment);
     }
 
     // load the material icons font if the library is set to material
@@ -174,18 +171,42 @@ export default class ZnIcon extends ZincElement {
       <link
         href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined|Material+Icons|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone|Material+Icons+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
         rel="stylesheet">`, document.head);
-
-    this.ravatarOptions();
   }
 
-  ravatarOptions() {
-    if ((this.library === "gravatar" || this.library === "libravatar") && this.src.includes('#')) {
-      const split = this.src.split('#');
-      this.gravatarOptions = "&d=" + split[1];
-      this.src = split[0];
+  private applyHashFragment(hashFragment: string) {
+    if (!hashFragment) {
+      return;
+    }
+
+    const attributes = hashFragment.split(',');
+
+    attributes.forEach(attr => {
+      if (attr === 'round') {
+        this.round = true;
+      }
+
+      if (attr === 'tile') {
+        this.tile = true;
+      }
+
+      if (attr === 'depth') {
+        this.depth = true;
+      }
+    });
+
+    if ((this.library === 'gravatar' || this.library === 'libravatar')) {
+      const defaultOption = attributes.find(attr => !['round', 'tile', 'depth'].includes(attr));
+
+      if (defaultOption) {
+        this.gravatarOptions = `&d=${defaultOption}`;
+      }
     }
   }
 
+  private normalizeRavatarEmail(email: string) {
+    return email.trim().toLowerCase();
+  }
+
   render() {
     return html`
       <div class="icon-wrapper">

package/src/components/icon/icon.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnIcon from './icon.component';
 
 describe('<zn-icon>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,26 @@ describe('<zn-icon>', () => {
 
     expect(el).to.exist;
   });
+
+  it('should build Gravatar URLs with a normalized SHA-256 hash', async () => {
+    const el = await fixture<ZnIcon>(html`
+      <zn-icon src="MyEmailAddress@example.com " library="gravatar" size="48"></zn-icon>
+    `);
+
+    const image = el.shadowRoot?.querySelector('img');
+    expect(image?.getAttribute('src')).to.equal(
+      'https://www.gravatar.com/avatar/84059b07d4be67b806386c0aad8070a23f18836bbaae342275dc0a83414c32ee?s=48'
+    );
+  });
+
+  it('should pass fallback options through to Libravatar', async () => {
+    const el = await fixture<ZnIcon>(html`
+      <zn-icon src="nonexistent@example.com#identicon" library="libravatar" size="48"></zn-icon>
+    `);
+
+    const image = el.shadowRoot?.querySelector('img');
+    expect(image?.getAttribute('src')).to.equal(
+      'https://seccdn.libravatar.org/avatar/04e8703fcfb60849fb5c596abc8f3d7547c7e0099c3806a3ffec77a95dc02e25?s=48&d=identicon'
+    );
+  });
 });

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

@@ -547,6 +547,12 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      this.input.blur();
+      event.stopPropagation();
+      return;
+    }
+
     const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 
     // Pressing enter when focused on the input should submit the form like a native input, be we wait a tick before

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

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnInput from './input.component';
 
 describe('<zn-input>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,36 @@ describe('<zn-input>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('Escape key', () => {
+    it('blurs the inner input and stops propagation when focused', async () => {
+      const wrapper = await fixture<HTMLDivElement>(html`
+        <div>
+          <zn-input></zn-input>
+        </div>
+      `);
+      const el = wrapper.querySelector('zn-input') as ZnInput;
+      await el.updateComplete;
+
+      let wrapperEscapes = 0;
+      wrapper.addEventListener('keydown', (e) => {
+        if ((e as KeyboardEvent).key === 'Escape') wrapperEscapes++;
+      });
+
+      el.focus();
+      await el.updateComplete;
+      expect(el.shadowRoot!.activeElement).to.equal(el.input);
+
+      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);
+      expect(wrapperEscapes, 'wrapper should not see Escape on press 1').to.equal(0);
+    });
+  });
 });

package/src/components/select/select.component.ts

@@ -484,6 +484,13 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.displayInput.focus({preventScroll: true});
     }
 
+    // Blur the display input when Escape is pressed and the dropdown is closed,
+    // so a second Escape press can bubble (e.g. close a containing dialog).
+    if (event.key === 'Escape' && !this.open) {
+      event.stopPropagation();
+      this.displayInput.blur();
+    }
+
     // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the
     // buffer we _don't_ close it. When search is enabled, space should type into the input, not toggle.
     if (event.key === 'Enter' || (event.key === ' ' && !this.search && this.typeToSelectString === '')) {

package/src/components/select/select.test.ts

@@ -152,4 +152,28 @@ describe('<zn-select>', () => {
       expect(visibleOptions[0].value).to.equal('apple');
     });
   });
+
+  describe('Escape key', () => {
+    it('blurs the display input when dropdown is closed and Escape is pressed', async () => {
+      const el = await fixture<ZnSelect>(html`<zn-select></zn-select>`);
+      await el.updateComplete;
+
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      el.focus();
+      await el.updateComplete;
+      expect(el.shadowRoot!.activeElement).to.equal(displayInput);
+      expect(el.open).to.be.false;
+
+      displayInput.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'Escape',
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      }));
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.activeElement, 'display input should be blurred').to.not.equal(displayInput);
+    });
+
+  });
 });

package/src/components/textarea/textarea.component.ts

@@ -233,6 +233,13 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
     this.formControlController.emitInvalidEvent(event);
   }
 
+  private handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      this.input.blur();
+      event.stopPropagation();
+    }
+  }
+
   private setTextareaHeight() {
     if (this.resize === 'auto') {
       this.input.style.height = 'auto';
@@ -436,6 +443,7 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
               @change=${this.handleChange}
               @input=${this.handleInput}
               @invalid=${this.handleInvalid}
+              @keydown=${this.handleKeyDown}
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
             ></textarea>

package/src/components/textarea/textarea.test.ts

@@ -1,10 +1,43 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnTextarea from './textarea.component';
 
-describe('<zn-text-area>', () => {
+describe('<zn-textarea>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-text-area></zn-text-area> `);
+    const el = await fixture(html` <zn-textarea></zn-textarea> `);
 
     expect(el).to.exist;
   });
+
+  describe('Escape key', () => {
+    it('blurs the inner textarea and stops propagation when focused', async () => {
+      const wrapper = await fixture<HTMLDivElement>(html`
+        <div>
+          <zn-textarea></zn-textarea>
+        </div>
+      `);
+      const el = wrapper.querySelector('zn-textarea') as ZnTextarea;
+      await el.updateComplete;
+
+      let wrapperEscapes = 0;
+      wrapper.addEventListener('keydown', (e) => {
+        if ((e as KeyboardEvent).key === 'Escape') wrapperEscapes++;
+      });
+
+      el.focus();
+      await el.updateComplete;
+      expect(el.shadowRoot!.activeElement).to.equal(el.input);
+
+      el.input.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'Escape',
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      }));
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.activeElement, 'inner textarea should be blurred').to.not.equal(el.input);
+      expect(wrapperEscapes, 'wrapper should not see Escape on press 1').to.equal(0);
+    });
+  });
 });

package/src/components/tile-property/tile-property.scss

@@ -1,24 +1,28 @@
 @use "../../wc";
 
+:host {
+  display: flex;
+  min-width: 0;
+  max-width: 240px;
+}
 
 .tile__property {
   display: flex;
   align-items: center;
   flex-direction: row;
-  width: 150px;
-  flex-basis: 150px;
-  max-width: 200px;
+  min-width: 0;
+  width: 100%;
 
   .tile__property_container {
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    min-width: 0;
   }
 
   .tile__icon {
     margin-right: 15px;
+    flex-shrink: 0;
   }
 
   .tile__caption {
@@ -29,6 +33,7 @@
     color: rgb(var(--zn-text-heading));
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 
   .tile__description {
@@ -39,5 +44,6 @@
     color: rgb(var(--zn-text-color));
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 }

package/src/utilities/sha256.ts

@@ -0,0 +1,114 @@
+/* eslint-disable */
+export function sha256(input: string): string {
+  function rightRotate(value: number, amount: number) {
+    return (value >>> amount) | (value << (32 - amount));
+  }
+
+  function utf8Encode(string: string) {
+    string = string.replace(/\r\n/g, '\n');
+    let utfText = '';
+
+    for (let index = 0; index < string.length; index++) {
+      const charCode = string.charCodeAt(index);
+
+      if (charCode < 128) {
+        utfText += String.fromCharCode(charCode);
+      } else if (charCode < 2048) {
+        utfText += String.fromCharCode((charCode >> 6) | 192);
+        utfText += String.fromCharCode((charCode & 63) | 128);
+      } else {
+        utfText += String.fromCharCode((charCode >> 12) | 224);
+        utfText += String.fromCharCode(((charCode >> 6) & 63) | 128);
+        utfText += String.fromCharCode((charCode & 63) | 128);
+      }
+    }
+
+    return utfText;
+  }
+
+  const mathPow = Math.pow;
+  const maxWord = mathPow(2, 32);
+  const words: number[] = [];
+  const hash: number[] = [];
+  const roundConstants: number[] = [];
+  const isComposite: Record<number, boolean> = {};
+  let primeCounter = 0;
+  let message = utf8Encode(input);
+  const messageBitLength = message.length * 8;
+
+  for (let candidate = 2; primeCounter < 64; candidate++) {
+    if (!isComposite[candidate]) {
+      for (let index = 0; index < 313; index += candidate) {
+        isComposite[index] = true;
+      }
+
+      if (primeCounter < 8) {
+        hash[primeCounter] = (mathPow(candidate, 0.5) * maxWord) | 0;
+      }
+
+      roundConstants[primeCounter] = (mathPow(candidate, 1 / 3) * maxWord) | 0;
+      primeCounter++;
+    }
+  }
+
+  message += '\x80';
+
+  while (message.length % 64 !== 56) {
+    message += '\x00';
+  }
+
+  for (let index = 0; index < message.length; index++) {
+    words[index >> 2] |= message.charCodeAt(index) << ((3 - (index % 4)) * 8);
+  }
+
+  words[words.length] = (messageBitLength / maxWord) | 0;
+  words[words.length] = messageBitLength;
+
+  for (let chunkStart = 0; chunkStart < words.length; chunkStart += 16) {
+    const workingHash = hash.slice(0, 8);
+    const schedule = words.slice(chunkStart, chunkStart + 16);
+
+    for (let round = 16; round < 64; round++) {
+      const word15 = schedule[round - 15];
+      const word2 = schedule[round - 2];
+      const sigma0 = rightRotate(word15, 7) ^ rightRotate(word15, 18) ^ (word15 >>> 3);
+      const sigma1 = rightRotate(word2, 17) ^ rightRotate(word2, 19) ^ (word2 >>> 10);
+
+      schedule[round] = (schedule[round - 16] + sigma0 + schedule[round - 7] + sigma1) | 0;
+    }
+
+    for (let round = 0; round < 64; round++) {
+      const a = workingHash[0];
+      const b = workingHash[1];
+      const c = workingHash[2];
+      const d = workingHash[3];
+      const e = workingHash[4];
+      const f = workingHash[5];
+      const g = workingHash[6];
+      const h = workingHash[7];
+      const sigma1 = rightRotate(e, 6) ^ rightRotate(e, 11) ^ rightRotate(e, 25);
+      const choose = (e & f) ^ (~e & g);
+      const temp1 = (h + sigma1 + choose + roundConstants[round] + schedule[round]) | 0;
+      const sigma0 = rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22);
+      const majority = (a & b) ^ (a & c) ^ (b & c);
+      const temp2 = (sigma0 + majority) | 0;
+
+      workingHash[7] = g;
+      workingHash[6] = f;
+      workingHash[5] = e;
+      workingHash[4] = (d + temp1) | 0;
+      workingHash[3] = c;
+      workingHash[2] = b;
+      workingHash[1] = a;
+      workingHash[0] = (temp1 + temp2) | 0;
+    }
+
+    for (let index = 0; index < 8; index++) {
+      hash[index] = (hash[index] + workingHash[index]) | 0;
+    }
+  }
+
+  return hash
+    .map(value => (value >>> 0).toString(16).padStart(8, '0'))
+    .join('');
+}