@kubex/zinc 1.1.107 → 1.1.109

package/docs/pages/components/opt-group.md

@@ -47,8 +47,10 @@ Use the `disabled` attribute to disable all options within a group. Disabled gro
 
 When used inside a `<zn-select>` with the `search` attribute, group headers automatically hide when all of their child options are filtered out by the search query.
 
+The `label` is matched by the search too: a query matching a group label keeps every option in that group visible, so searching `europe` returns the whole European group even though no option label contains the word. Group-label and option-label matches combine, so `japan` still narrows to the single option within Asia.
+
 ```html:preview
-<zn-select label="Select a country" search placeholder="Type to search...">
+<zn-select label="Select a country" search placeholder="Try 'europe' or 'japan'...">
   <zn-opt-group label="North America">
     <zn-option value="us">United States</zn-option>
     <zn-option value="ca">Canada</zn-option>

package/docs/pages/components/select.md

@@ -148,7 +148,7 @@ Use the `clearable` attribute to make the control clearable. The clear button on
 
 ### Search
 
-Use the `search` attribute to allow users to type into the select to filter the list of options. When the dropdown opens, the input becomes editable and options are filtered as you type using case-insensitive substring matching against labels and values.
+Use the `search` attribute to allow users to type into the select to filter the list of options. When the dropdown opens, the input becomes editable and options are filtered as you type using case-insensitive substring matching against labels and values. Group labels are matched too — see [Grouping with Search](#grouping-with-search).
 
 ```html:preview
 <zn-select label="Search for a country" search placeholder="Type to search...">
@@ -642,8 +642,10 @@ Use `<zn-opt-group>` to group options under labeled headers, similar to `<optgro
 
 When `search` is enabled, group headers automatically hide when all of their child options are filtered out.
 
+Group labels are searchable as well: typing text that matches a `<zn-opt-group>` label keeps every option in that group visible, so searching `europe` returns the whole European group even though no option label contains the word.
+
 ```html:preview
-<zn-select label="Select a country" search placeholder="Type to search...">
+<zn-select label="Select a country" search placeholder="Try 'europe' or 'japan'...">
   <zn-opt-group label="North America">
     <zn-option value="us">United States</zn-option>
     <zn-option value="ca">Canada</zn-option>

package/package.json

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

package/src/components/dialog/dialog.scss

@@ -13,10 +13,14 @@
 }
 
 .dialog-container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
   border-radius: var(--zn-border-radius);
   background-color: var(--zn-panel-background-color);
   margin: 2px;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .dialog__header + .dialog__body {
@@ -29,13 +33,17 @@
   width: calc(var(--width) + 1px);
   overflow: hidden;
   max-width: calc(100% - var(--zn-spacing-2x-large));
-  max-height: calc(100% - var(--zn-spacing-2x-large));
+  max-height: calc(100% - 20vh);
   background-color: var(--zn-panel-background-color);
   border-radius: var(--zn-border-radius);
   box-shadow: var(--zn-shadow-x-large);
   padding: 0;
   margin: 10vh auto;
 
+  &[open] {
+    display: flex;
+  }
+
   &__header {
     flex: 0 0 auto;
     display: flex;
@@ -69,6 +77,7 @@
 
   &__body {
     flex: 1 1 auto;
+    min-height: 0;
     display: block;
     padding: var(--body-spacing);
     overflow: auto;

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

@@ -1,4 +1,4 @@
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
@@ -50,9 +50,9 @@ export default class ZnOptGroup extends ZincElement {
   render() {
     return html`
       <div part="base" class="opt-group">
-        <div part="label" class="opt-group__label" aria-hidden="true">
-          ${this.label}
-        </div>
+        ${this.label
+          ? html`<div part="label" class="opt-group__label" aria-hidden="true">${this.label}</div>`
+          : nothing}
         <div class="opt-group__options" role="none">
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>

package/src/components/opt-group/opt-group.scss

@@ -8,30 +8,29 @@
   display: none !important;
 }
 
+:host(:not(:first-child)) {
+  border-block-start: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
+  margin-block-start: var(--zn-spacing-2x-small);
+}
+
 .opt-group__label {
   font-family: var(--zn-font-sans);
   font-size: var(--zn-font-size-x-small);
   font-weight: var(--zn-font-weight-semibold);
   line-height: var(--zn-line-height-normal);
-  letter-spacing: var(--zn-letter-spacing-normal);
-  color: var(--zn-color-neutral-500);
+  letter-spacing: var(--zn-letter-spacing-loose);
   text-transform: uppercase;
-  padding-block: var(--zn-spacing-2x-small);
-  padding-inline: var(--zn-spacing-large);
+  color: var(--zn-color-neutral-600);
+  padding-block: var(--zn-spacing-x-small) var(--zn-spacing-2x-small);
+  padding-inline: var(--zn-spacing-small);
   user-select: none;
   -webkit-user-select: none;
 }
 
-:host(:not(:first-of-type)) .opt-group__label {
-  border-block-start: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
-  margin-block-start: var(--zn-spacing-x-small);
-  padding-block-start: var(--zn-spacing-small);
-}
-
 .opt-group__options {
   display: block;
 }
 
-:host([disabled]) {
+:host([disabled]) .opt-group__label {
   opacity: 0.5;
 }

package/src/components/page/page.test.ts

@@ -499,6 +499,33 @@ describe('<zn-page>', () => {
     expect(navItems[0].getAttribute('tab')).to.equal('');
   });
 
+  it('opens the next tab at the top of the content', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Page Title" style="height: 200px;">
+        <zn-tab caption="Overview">
+          <div style="height: 2000px;">Overview Content</div>
+        </zn-tab>
+        <zn-tab caption="Details">
+          <div style="height: 2000px;">Details Content</div>
+        </zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(60);
+
+    const content = el.shadowRoot!.querySelector<HTMLElement>('#content')!;
+    content.scrollTop = 600;
+    expect(content.scrollTop, 'the content never scrolled').to.be.greaterThan(0);
+
+    // The page's first tab is registered under an empty id, so leaving it is the
+    // case a "did the tab change?" test on the id alone gets wrong.
+    const navbar = el.shadowRoot!.querySelector('zn-navbar')!;
+    navbar.shadowRoot!.querySelectorAll<HTMLElement>('li:not(.more)')[1].click();
+    await aTimeout(80);
+
+    expect(el.getAttribute('active')).to.equal('details');
+    expect(content.scrollTop).to.equal(0);
+  });
+
   it('shows a header border when scrolled without visible navigation', async () => {
     const el = await fixture<ZnPage>(html`
       <zn-page caption="Page Title" style="height: 120px;">

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

@@ -19,6 +19,14 @@ export interface PriorityItem {
   priority: number;
 }
 
+function safeParse(value: string): unknown {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return undefined;
+  }
+}
+
 /**
  * @summary A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop
  *   and keyboard reordering. Priority values are submitted as form data via hidden inputs.
@@ -68,16 +76,14 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
       return JSON.stringify(control.getPriorityMap());
     },
     defaultValue: (control: ZnPriorityList) => control.defaultValue,
-    setValue: (control: ZnPriorityList, value: string) => {
-      if (value) {
-        try {
-          const parsed: unknown = JSON.parse(value);
-          if (Array.isArray(parsed) && parsed.every((item: unknown): item is string => typeof item === 'string')) {
-            control.value = parsed as string[];
-          }
-        } catch {
-          // ignore parse errors
-        }
+    // A form reset passes defaultValue straight back in, so this has to accept the
+    // key array as well as the serialised value other callers set.
+    setValue: (control: ZnPriorityList, value: string | string[]) => {
+      if (!value || (Array.isArray(value) && value.length === 0)) return;
+
+      const keys: unknown = Array.isArray(value) ? value : safeParse(value);
+      if (Array.isArray(keys) && keys.every((item: unknown): item is string => typeof item === 'string')) {
+        control.value = keys as string[];
       }
     },
   });
@@ -199,9 +205,8 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
       } else {
         this._value = domKeys;
       }
-
-      this.defaultValue = [...this._value];
     }
+    this.defaultValue = [...this._value];
     this._assignSlotNames();
     this._syncHiddenInputs();
     this.requestUpdate();

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

@@ -84,6 +84,49 @@ describe('<zn-priority-list>', () => {
     expect(hiddenInputs[1].value).to.equal('2');
   });
 
+  it('should restore the original order when its form is reset', async () => {
+    const form = await fixture(html`
+      <form>
+        <zn-priority-list name="order">
+          <div value="alpha">Alpha</div>
+          <div value="beta">Beta</div>
+          <div value="gamma">Gamma</div>
+        </zn-priority-list>
+      </form>
+    `) as HTMLFormElement;
+
+    const el = form.querySelector('zn-priority-list') as any;
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['alpha', 'beta', 'gamma']);
+
+    el.value = ['gamma', 'alpha', 'beta'];
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['gamma', 'alpha', 'beta']);
+
+    form.reset();
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['alpha', 'beta', 'gamma']);
+  });
+
+  it('should not empty a populated list on reset', async () => {
+    const form = await fixture(html`
+      <form>
+        <zn-priority-list name="order">
+          <div value="alpha">Alpha</div>
+          <div value="beta">Beta</div>
+        </zn-priority-list>
+      </form>
+    `) as HTMLFormElement;
+
+    const el = form.querySelector('zn-priority-list') as any;
+    await el.updateComplete;
+
+    el.defaultValue = [];
+    form.reset();
+    await el.updateComplete;
+    expect(el.value).to.deep.equal(['alpha', 'beta']);
+  });
+
   it('should have listbox role on the list container', async () => {
     const el = await fixture(html`
       <zn-priority-list label="My List">

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

@@ -832,10 +832,21 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       return;
     }
 
+    // A group whose label matches keeps its whole set of options, so searching "citrus" surfaces the group.
+    const matchedGroups = new Set(
+      this.getAllOptGroups().filter(group => group.label.toLowerCase().includes(searchQuery))
+    );
+
     allOptions.forEach(option => {
       // Don't un-hide selected options that are only in the DOM for value preservation
       if (option.selected && option.hidden) return;
 
+      const group = option.closest<ZnOptGroup>('zn-opt-group');
+      if (group && matchedGroups.has(group)) {
+        option.hidden = false;
+        return;
+      }
+
       const label = option.getTextLabel().toLowerCase();
       const value = option.value.toLowerCase();
       const matches = label.includes(searchQuery) || value.includes(searchQuery);

package/src/components/select/select.scss

@@ -407,9 +407,11 @@
   font-size: var(--zn-font-size-x-small);
   font-weight: var(--zn-font-weight-semibold);
   line-height: var(--zn-line-height-normal);
-  letter-spacing: var(--zn-letter-spacing-normal);
-  padding-block: var(--zn-spacing-2x-small);
-  padding-inline: var(--zn-spacing-2x-large);
+  letter-spacing: var(--zn-letter-spacing-loose);
+  text-transform: uppercase;
+  color: var(--zn-color-neutral-600);
+  padding-block: var(--zn-spacing-x-small) var(--zn-spacing-2x-small);
+  padding-inline: var(--zn-spacing-small);
   user-select: none;
   -webkit-user-select: none;
 }

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

@@ -163,6 +163,65 @@ describe('<zn-select>', () => {
     });
   });
 
+  describe('search across opt-group labels', () => {
+    let el: ZnSelect;
+
+    const type = async (text: string) => {
+      const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+      displayInput.value = text;
+      displayInput.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+    };
+
+    const visibleValues = () =>
+      [...el.querySelectorAll<ZnOption>('zn-option')].filter(o => !o.hidden).map(o => o.value);
+
+    beforeEach(async () => {
+      el = await fixture<ZnSelect>(html`
+        <zn-select search>
+          <zn-opt-group label="Citrus">
+            <zn-option value="orange">Orange</zn-option>
+            <zn-option value="lemon">Lemon</zn-option>
+          </zn-opt-group>
+          <zn-opt-group label="Berries">
+            <zn-option value="strawberry">Strawberry</zn-option>
+            <zn-option value="blueberry">Blueberry</zn-option>
+          </zn-opt-group>
+          <zn-option value="citrus-punch">Citrus Punch</zn-option>
+        </zn-select>
+      `);
+      await el.updateComplete;
+      await el.show();
+      await el.updateComplete;
+    });
+
+    it('keeps every option in a group whose label matches, alongside option-label matches', async () => {
+      await type('citrus');
+
+      expect(visibleValues()).to.deep.equal(['orange', 'lemon', 'citrus-punch']);
+    });
+
+    it('matches group labels case-insensitively', async () => {
+      await type('BERR');
+
+      expect(visibleValues()).to.deep.equal(['strawberry', 'blueberry']);
+    });
+
+    it('keeps the matching group visible and hides the others', async () => {
+      await type('citrus');
+
+      const groups = el.querySelectorAll('zn-opt-group');
+      expect(groups[0].hidden, 'Citrus group').to.be.false;
+      expect(groups[1].hidden, 'Berries group').to.be.true;
+    });
+
+    it('still matches option labels inside a non-matching group', async () => {
+      await type('lemon');
+
+      expect(visibleValues()).to.deep.equal(['lemon']);
+    });
+  });
+
   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>`);

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

@@ -9,6 +9,7 @@ import {
   replaceHistoryTab,
   TAB_STORE_PREFIX
 } from './tabs-navigation';
+import {getScrolledAncestors, scrollToTop} from "../../internal/scroll";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {md5} from "../../utilities/md5";
@@ -548,8 +549,12 @@ export default class ZnTabs extends ZincElement {
       this._current = tabName;
     };
 
+    const scrolled = sameTab ? [] : getScrolledAncestors(this._panel);
+
     updateTabs();
 
+    scrollToTop(scrolled);
+
     return true;
   }
 

package/src/components/tabs/tabs.test.ts

@@ -50,6 +50,70 @@ describe('<zn-tabs>', () => {
     expect(selectedPagePanel.id).to.equal('');
   });
 
+  describe('scroll position', () => {
+    const panels = html`
+      <zn-navbar slot="top">
+        <li tab="first">First</li>
+        <li tab="second">Second</li>
+      </zn-navbar>
+      <div id="first">
+        <div style="height: 2000px;">First panel</div>
+      </div>
+      <div id="second">
+        <div style="height: 2000px;">Second panel</div>
+      </div>
+    `;
+
+    const openSecondTab = async (el: ZnTabs) => {
+      el.querySelector('zn-navbar')!.querySelectorAll<HTMLElement>('li')[1].click();
+      await aTimeout(40);
+      expect(el.getAttribute('active')).to.equal('second');
+    };
+
+    it('opens a newly selected tab at the top of its own scroller', async () => {
+      // zn-tabs is display:contents, so #content only has a height to overflow
+      // when an ancestor gives it one.
+      const wrapper = await fixture<HTMLElement>(html`
+        <div style="height: 200px; display: flex; flex-direction: column;">
+          <zn-tabs active="first">${panels}</zn-tabs>
+        </div>
+      `);
+      const el = wrapper.querySelector<ZnTabs>('zn-tabs')!;
+      await aTimeout(40);
+
+      const content = el.shadowRoot!.querySelector('#content')!;
+      content.scrollTop = 500;
+      expect(content.scrollTop, 'the content never scrolled').to.be.greaterThan(0);
+
+      await openSecondTab(el);
+
+      expect(content.scrollTop).to.equal(0);
+    });
+
+    it('opens a newly selected tab at the top of an enclosing scroller', async () => {
+      // Unconstrained, the panels grow instead of scrolling and something further
+      // out - an app shell, an outer page - is what the reader has scrolled.
+      const wrapper = await fixture<HTMLElement>(html`
+        <div style="height: 200px; overflow: auto;">
+          <div>
+            <zn-tabs active="first">${panels}</zn-tabs>
+          </div>
+        </div>
+      `);
+      const el = wrapper.querySelector<ZnTabs>('zn-tabs')!;
+      await aTimeout(40);
+
+      const content = el.shadowRoot!.querySelector('#content')!;
+      wrapper.scrollTop = 500;
+      expect(wrapper.scrollTop, 'the enclosing scroller never scrolled').to.be.greaterThan(0);
+      expect(content.scrollTop, 'the panels scrolled themselves').to.equal(0);
+
+      await openSecondTab(el);
+
+      expect(wrapper.scrollTop).to.equal(0);
+    });
+  });
+
   describe('selection persistence', () => {
     const storeKey = 'tabs-navigation-test';
     const originalHref = window.location.href;

package/src/internal/scroll.ts

@@ -67,3 +67,28 @@ export function scrollIntoView(
     }
   }
 }
+
+/**
+ * Every ancestor of `element`, itself included, that is scrolled away from the top. Shadow
+ * boundaries are crossed, so a host's own scroller and the app's outer one are both found.
+ */
+export function getScrolledAncestors(element: Element | null | undefined): Element[] {
+  const scrolled: Element[] = [];
+  let node: Node | null | undefined = element;
+
+  while (node) {
+    if (node instanceof Element && node.scrollTop > 0) {
+      scrolled.push(node);
+    }
+    node = node.parentNode instanceof ShadowRoot ? node.parentNode.host : node.parentNode;
+  }
+
+  return scrolled;
+}
+
+/** Returns containers to the top. */
+export function scrollToTop(containers: Iterable<Element>, behavior: ScrollBehavior = 'auto') {
+  for (const container of containers) {
+    container.scrollTo({ top: 0, behavior });
+  }
+}