@kubex/zinc 1.1.120 → 1.1.122

package/src/components/input/input.scss

@@ -11,7 +11,7 @@
   justify-content: start;
   position: relative;
   width: 100%;
-  box-shadow: var(--zn-shadow-x-small);
+  box-shadow: var(--zn-input-box-shadow, var(--zn-shadow-x-small));
   font-family: var(--zn-input-font-family), sans-serif;
   font-weight: var(--zn-input-font-weight);
   letter-spacing: var(--zn-input-letter-spacing);

package/src/components/menu/menu.component.ts

@@ -46,6 +46,8 @@ interface NavItem {
  * @cssproperty --example - An example CSS custom property.
  * @cssproperty --zn-menu-max-height - Caps the menu's height and makes it scroll internally.
  *  Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this.
+ * @cssproperty --zn-menu-min-width - Overrides the menu's resting width. Defaults to
+ *  `--zn-size-spanel`, or 245px for `variant="shell"`.
  */
 export default class ZnMenu extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);

package/src/components/menu/menu.scss

@@ -7,7 +7,7 @@
   border: 1px solid rgb(var(--zn-border-color)) !important;
   border-radius: var(--zn-border-radius);
   width: fit-content;
-  min-width: var(--zn-size-spanel);
+  min-width: var(--zn-menu-min-width, var(--zn-size-spanel));
   // Unconstrained by default — a consumer that needs the menu to scroll inside a bounded
   // popup (rather than growing to fit all its items) sets this custom property.
   max-height: var(--zn-menu-max-height, none);
@@ -22,6 +22,26 @@
   background-color: rgba(var(--zn-color-navigation, 255, 255, 255), 0.95);
 }
 
+// A capped menu has to look scrollable, so the bar is always drawn rather than
+// left to the platform's overlay scrollbar
+.menu {
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 5px;
+    background: rgba(var(--inverse-base), 0.3);
+    background-clip: content-box;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--inverse-base), 0.5);
+    background-clip: content-box;
+  }
+}
+
 // Dropdown vs shell hover/row styling lives on zn-menu-item, keyed by the
 // `variant` the menu sets on its items (see menu.component.ts).
 
@@ -34,8 +54,9 @@
   padding: var(--zn-spacing-2x-small);
   border: 1px solid rgb(var(--zn-border-color));
   border-radius: var(--zn-border-radius);
-  min-width: 245px;
+  min-width: var(--zn-menu-min-width, 245px);
   max-width: min(320px, calc(100vw - 16px));
+  max-height: var(--zn-menu-max-height, none);
   overflow-x: hidden;
   overflow-y: auto;
   box-shadow: none;

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

@@ -82,6 +82,9 @@ export default class ZnMenuItem extends ZincElement {
 
   @property({type: Boolean, reflect: true}) confirm = false;
 
+  /** Leaves a containing dropdown open when this item is selected, whatever the dropdown's own setting. */
+  @property({type: Boolean, reflect: true, attribute: 'keep-open'}) keepOpen = false;
+
   /** Removes all padding from the menu item. */
   @property({type: Boolean, reflect: true}) flush = false;
 
@@ -141,7 +144,10 @@ export default class ZnMenuItem extends ZincElement {
       const closestMenu: Element | null = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu') as Element;
       if (this.confirm) return;
 
-      (closestMenu?.closest('zn-dropdown') as ZnDropdown | null)?.hide();
+      const dropdown = closestMenu?.closest('zn-dropdown') as ZnDropdown | null;
+      if (!dropdown?.stayOpenOnSelect && !this.keepOpen) {
+        dropdown?.hide();
+      }
       this.emit('zn-menu-select', {detail: {value: this.value, element: this}});
     }
   };

package/src/components/menu-item/menu-item.scss

@@ -154,7 +154,7 @@
   color: var(--color);
 }
 
-.menu-item:hover .menu-item__label {
+.menu-item:hover:not(.menu-item--disabled) .menu-item__label {
   color: var(--hover-color);
 }
 
@@ -194,9 +194,9 @@
   bottom: 0;
   left: 0;
   clip-path: polygon(
-    var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
-    var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
-    var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
   );
 }
 

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

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnDropdown from '../dropdown/dropdown.component';
 
 describe('<zn-menu-item>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,41 @@ describe('<zn-menu-item>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('keep-open', () => {
+    async function dropdownWithItems() {
+      const el = await fixture<ZnDropdown>(html`
+        <zn-dropdown>
+          <zn-button slot="trigger">Open</zn-button>
+          <zn-menu>
+            <zn-menu-item value="keeper" keep-open>Keeper</zn-menu-item>
+            <zn-menu-item value="closer">Closer</zn-menu-item>
+          </zn-menu>
+        </zn-dropdown>`);
+      await el.updateComplete;
+      await el.show();
+      return el;
+    }
+
+    const clickOn = (el: Element | null) =>
+      el?.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+
+    it('leaves the dropdown open when the item is selected', async () => {
+      const dropdown = await dropdownWithItems();
+
+      clickOn(dropdown.querySelector('zn-menu-item[value="keeper"]'));
+      await dropdown.updateComplete;
+
+      expect(dropdown.open).to.be.true;
+    });
+
+    it('does not affect the items beside it', async () => {
+      const dropdown = await dropdownWithItems();
+
+      clickOn(dropdown.querySelector('zn-menu-item[value="closer"]'));
+
+      await waitUntil(() => !dropdown.open);
+      expect(dropdown.open).to.be.false;
+    });
+  });
 });

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

@@ -17,8 +17,13 @@ import styles from './panel.scss';
  * @slot footer - Content displayed in the panel footer.
  *
  * @csspart base - The component's base wrapper.
+ * @csspart header - The header region, when a caption or actions are given.
+ * @csspart header-content - The padded row inside the header, forwarded from zn-header.
+ * @csspart footer - The footer region, when the footer slot is filled.
  *
  * @cssproperty --zn-panel-basis - The flex-basis of the panel. Can be set using the basis-px attribute.
+ * @cssproperty --zn-panel-header-padding - Padding around the header row. Defaults to `--zn-base-gap`.
+ * @cssproperty --zn-panel-footer-padding - Padding around the footer row.
  */
 export default class ZnPanel extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -100,10 +105,12 @@ export default class ZnPanel extends ZincElement {
 
         <div class="panel__inner">
           ${hasHeader ? html`
-            <zn-header class="${classMap({
-              "panel__header": true,
-              "panel__header--underline": underlineHeader,
-            })}"
+            <zn-header part="header"
+                       exportparts="content:header-content"
+                       class="${classMap({
+                         "panel__header": true,
+                         "panel__header--underline": underlineHeader,
+                       })}"
                        icon="${this.icon}"
                        caption="${this.caption}"
                        transparent>
@@ -118,7 +125,7 @@ export default class ZnPanel extends ZincElement {
           </div>
 
           ${hasFooterSlot ? html`
-            <slot name="footer" class="panel__footer"></slot>` : null}
+            <slot name="footer" part="footer" class="panel__footer"></slot>` : null}
         </div>
       </div>`;
   }

package/src/components/panel/panel.scss

@@ -43,7 +43,7 @@
 
 
   &__header {
-    padding: var(--zn-base-gap);
+    padding: var(--zn-panel-header-padding, var(--zn-base-gap));
 
     // background-color: rgba(var(--zn-panel-highlight), 0.6);
     // border-bottom: 1px solid rgb(var(--zn-border-color));
@@ -81,8 +81,8 @@
   &__footer {
     font-size: var(--zn-font-size-small);
     display: block;
-    padding: var(--zn-spacing-small) var(--zn-base-gap);
-    background: rgb(var(--zn-panel-secondary));
+    padding: var(--zn-panel-footer-padding, var(--zn-spacing-small) var(--zn-base-gap));
+    background: rgb(var(--zn-body));
     border-bottom-left-radius: var(--zn-border-radius);
     border-bottom-right-radius: var(--zn-border-radius);
   }

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

@@ -80,7 +80,7 @@ export enum QueryBuilderOperators {
   Lte = 'lte'
 }
 
-const operatorText: { [key in QueryBuilderOperators]: string } = {
+export const operatorText: { [key in QueryBuilderOperators]: string } = {
   [QueryBuilderOperators.Eq]: 'Equals',
   [QueryBuilderOperators.Neq]: 'Not Equals',
   [QueryBuilderOperators.Eqi]: 'Equals (Insensitive)',

package/src/components/tooltip/tooltip.component.ts

@@ -83,7 +83,7 @@ export default class ZnTooltip extends ZincElement {
   }
 
   private handleBlur = () => {
-    if (this.hasTrigger('focus') && !topLayerManager.isDropdownOpen()) {
+    if (this.hasTrigger('focus')) {
       this.hide();
     }
   };
@@ -118,7 +118,7 @@ export default class ZnTooltip extends ZincElement {
   }
 
   private handleMouseOut() {
-    if (this.hasTrigger('hover') && !topLayerManager.isDropdownOpen()) {
+    if (this.hasTrigger('hover')) {
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.hide(), 0);
     }

package/src/components/tooltip/tooltip.test.ts

@@ -1,10 +1,78 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnDropdown from '../dropdown/dropdown.component';
+import type ZnTooltip from './tooltip.component';
+
+const mouse = (el: Element, type: string) =>
+  el.dispatchEvent(new MouseEvent(type, {bubbles: true, composed: true, cancelable: true}));
 
 describe('<zn-tooltip>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-tooltip></zn-tooltip> `);
+    const el = await fixture(html`
+      <zn-tooltip></zn-tooltip>`);
 
     expect(el).to.exist;
   });
+
+  it('hides on mouseout', async () => {
+    const el = await fixture<ZnTooltip>(html`
+      <zn-tooltip content="Columns">
+        <button>Trigger</button>
+      </zn-tooltip>`);
+
+    mouse(el, 'mouseover');
+    await waitUntil(() => el.open);
+
+    mouse(el, 'mouseout');
+    await waitUntil(() => !el.open);
+
+    expect(el.open).to.be.false;
+  });
+
+  // A tooltip whose trigger opens a dropdown loses its chance to hide: the pointer
+  // leaves the trigger for the menu while the dropdown is registered as open.
+  it('hides on mouseout while a dropdown is open', async () => {
+    const dropdown = await fixture<ZnDropdown>(html`
+      <zn-dropdown>
+        <zn-button slot="trigger" tooltip="Columns"></zn-button>
+        <zn-menu>
+          <zn-menu-item value="a">Alpha</zn-menu-item>
+        </zn-menu>
+      </zn-dropdown>`);
+
+    const trigger = dropdown.querySelector('zn-button')!;
+    await trigger.updateComplete;
+    const tooltip = trigger.shadowRoot!.querySelector('zn-tooltip')!;
+
+    mouse(tooltip, 'mouseover');
+    await waitUntil(() => tooltip.open);
+
+    await dropdown.show();
+    mouse(tooltip, 'mouseout');
+    await dropdown.hide();
+
+    await waitUntil(() => !tooltip.open, 'tooltip stayed open after the dropdown closed');
+    expect(tooltip.open).to.be.false;
+  });
+
+  it('does not show while a dropdown is open', async () => {
+    const dropdown = await fixture<ZnDropdown>(html`
+      <zn-dropdown>
+        <zn-button slot="trigger" tooltip="Columns"></zn-button>
+        <zn-menu>
+          <zn-menu-item value="a">Alpha</zn-menu-item>
+        </zn-menu>
+      </zn-dropdown>`);
+
+    const trigger = dropdown.querySelector('zn-button')!;
+    await trigger.updateComplete;
+    const tooltip = trigger.shadowRoot!.querySelector('zn-tooltip')!;
+
+    await dropdown.show();
+    mouse(tooltip, 'mouseover');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    expect(tooltip.open).to.be.false;
+    await dropdown.hide();
+  });
 });

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

@@ -32,8 +32,8 @@ import styles from './translation-group.scss';
  * - `Partial` — only some children do
  * - `English` — none do, so all of them fall back to the English text
  *
- * `Empty` replaces the last of those for English itself, which has nothing to fall back to. English is the source
- * rather than a translation, so it is also left out of the `n of m translated` count beside the label.
+ * `Empty` replaces the last of those for English itself, which has nothing to fall back to. English counts towards
+ * the `n of m` beside the label like any other language.
  *
  * The children own their values; this component only chooses which language is shown and reports on what they hold.
  * It reads them back on every child `zn-change`, so the chips and the count follow an edit as it is typed.
@@ -221,14 +221,12 @@ export default class ZnTranslationGroup extends ZnPanel {
     const languageCodes = [...Object.keys(this.languages), ...extra];
     const hasMultipleLanguages = languageCodes.length > 1;
 
-    // English is the source every other language falls back to, so it is not itself one of the translations counted.
-    const targets = languageCodes.filter(code => code !== 'en');
-    const translated = targets.filter(code => this.languageState(code).type === 'success').length;
     // Closed, the select answers "how much is left to do" rather than the state of the one language on show — that
     // is what the options are for.
+    const translated = languageCodes.filter(code => this.languageState(code).type === 'success').length;
     const summary = {
-      label: `${translated}/${targets.length}`,
-      type: translated === targets.length ? 'success' : translated > 0 ? 'warning' : 'error'
+      label: `${translated}/${languageCodes.length}`,
+      type: translated === languageCodes.length ? 'success' : translated > 0 ? 'warning' : 'error'
     };
 
     return html`

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

@@ -188,7 +188,7 @@ describe('<zn-translation-group>', () => {
       expect(label.textContent?.trim(), 'nothing else rides the caption').to.equal('Content');
 
       const summary = selectOf(group).querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/1');
+      expect(summary.textContent?.trim()).to.equal('2/2');
     });
 
     it('wears the same chrome as any other select', async () => {
@@ -327,19 +327,19 @@ describe('<zn-translation-group>', () => {
         ['{"en":"Hello","fr":"Bonjour","de":"Hallo"}', '{"en":"Hi","fr":"Salut"}']);
 
       const summary = selectOf(group).querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/3');
+      expect(summary.textContent?.trim()).to.equal('2/4');
       expect(summary.getAttribute('type')).to.equal('warning');
 
       expect(chipsOf(group)).to.deep.equal(['Translated', 'Translated', 'Partial', 'English']);
     });
 
-    it('marks the summary chip done once every target language is translated', async () => {
+    it('marks the summary chip done once every language is translated', async () => {
       const group = await groupFixture(
         {en: 'English', fr: 'French'},
         ['{"en":"Hello","fr":"Bonjour"}']);
 
       const summary = selectOf(group).querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/1');
+      expect(summary.textContent?.trim()).to.equal('2/2');
       expect(summary.getAttribute('type')).to.equal('success');
     });
 
@@ -351,13 +351,13 @@ describe('<zn-translation-group>', () => {
       expect(chipsOf(group)).to.deep.equal(['Translated', 'English']);
     });
 
-    it('counts the target languages, not English', async () => {
+    it('counts English alongside the target languages', async () => {
       const group = await groupFixture(
         {en: 'English', fr: 'French', de: 'German'},
         ['{"en":"Hello","fr":"Bonjour"}']);
 
       const summary = selectOf(group).querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/2');
+      expect(summary.textContent?.trim()).to.equal('2/3');
     });
 
     it('switches every child when the select changes', async () => {
@@ -416,14 +416,14 @@ describe('<zn-translation-group>', () => {
       await group.updateComplete;
 
       const summary = () => group.shadowRoot!.querySelector('zn-select zn-chip[slot="suffix"]')!.textContent?.trim();
-      expect(summary()).to.equal('0/1');
+      expect(summary()).to.equal('1/2');
 
       form.reset();
       await new Promise(resolve => requestAnimationFrame(() => resolve(null)));
       await group.updateComplete;
 
       expect(child.values).to.deep.equal({en: 'Hello', fr: 'Bonjour'});
-      expect(summary()).to.equal('1/1');
+      expect(summary()).to.equal('2/2');
     });
   });
 });

package/src/components/translations/translations.component.ts

@@ -445,11 +445,10 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     ];
     // Closed, the select answers "how much is left to do" rather than the state of the one language on show — that
     // is what the options are for.
-    const targets = languageCodes.filter(code => code !== 'en');
-    const translated = targets.filter(code => this.hasTranslation(code)).length;
+    const translated = languageCodes.filter(code => this.hasTranslation(code)).length;
     const summary = {
-      label: `${translated}/${targets.length}`,
-      type: translated === targets.length ? 'success' : translated > 0 ? 'warning' : 'error'
+      label: `${translated}/${languageCodes.length}`,
+      type: translated === languageCodes.length ? 'success' : translated > 0 ? 'warning' : 'error'
     };
 
     const currentTranslation = this.values[this._activeLanguage] ?? '';

package/src/components/translations/translations.test.ts

@@ -95,7 +95,7 @@ describe('<zn-translations>', () => {
       await el.updateComplete;
 
       const summary = selectOf(el)!.querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/2');
+      expect(summary.textContent?.trim()).to.equal('2/3');
       expect(summary.getAttribute('type')).to.equal('warning');
 
       const options = [...selectOf(el)!.querySelectorAll('zn-option zn-chip')];