@kubex/zinc 1.1.139 → 1.1.141

package/package.json

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

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

@@ -47,6 +47,25 @@ export default class ZnOptGroup extends ZincElement {
     this.hidden = options.length > 0 && options.every(option => option.hidden);
   }
 
+  /**
+   * @internal - Marks the group as the first visible one so it doesn't draw a separator against the top of the
+   * listbox. Structural `:first-child` can't see that earlier siblings were hidden by a search filter.
+   */
+  updateSeparator() {
+    let previous = this.previousElementSibling;
+    while (previous && !ZnOptGroup.isRendered(previous)) {
+      previous = previous.previousElementSibling;
+    }
+    this.toggleAttribute('data-first-visible', previous === null);
+  }
+
+  private static isRendered(el: Element): boolean {
+    if (el instanceof HTMLSlotElement) {
+      return el.assignedElements().some(assigned => ZnOptGroup.isRendered(assigned));
+    }
+    return !(el instanceof HTMLElement) || !el.hidden;
+  }
+
   render() {
     return html`
       <div part="base" class="opt-group">

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

@@ -8,7 +8,7 @@
   display: none !important;
 }
 
-:host(:not(:first-child)) {
+:host(:not(:first-child):not([data-first-visible])) {
   border-block-start: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
   margin-block-start: var(--zn-spacing-2x-small);
 }

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

@@ -845,6 +845,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.getAllOptGroups().forEach(group => {
         group.hidden = false;
       });
+      this.updateOptGroupSeparators();
       this._noResultsVisible = false;
       return;
     }
@@ -872,6 +873,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     // Update opt-group visibility based on whether any child options are visible
     this.getAllOptGroups().forEach(group => group.updateVisibility());
+    this.updateOptGroupSeparators();
 
     // Show empty state when no non-selected options match (selected-but-hidden items are value anchors, not results)
     this._noResultsVisible = allOptions.filter(o => !o.selected).every(option => option.hidden);
@@ -907,6 +909,12 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this.getAllOptGroups().forEach(group => {
       group.hidden = false;
     });
+    this.updateOptGroupSeparators();
+  }
+
+  // Runs after every visibility change so group separators reflect which groups are actually showing
+  private updateOptGroupSeparators() {
+    this.getAllOptGroups().forEach(group => group.updateSeparator());
   }
 
   /**
@@ -1099,6 +1107,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     // Select only the options that match the new value (re-query in case options were materialised)
     this.setSelectedOptions(this.getAllOptions().filter(el => value.includes(el.value)));
 
+    this.updateOptGroupSeparators();
+
     // of check if an option has selected attribute set initially
     if (!this.valueHasChanged) {
       const initiallySelectedOptions = allOptions.filter(el => el.hasAttribute('selected'));
@@ -1330,6 +1340,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this.formControlController.emitInvalidEvent(event);
   }
 
+  protected updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+    this.updateOptGroupSeparators();
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
 

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

@@ -220,6 +220,16 @@ describe('<zn-select>', () => {
 
       expect(visibleValues()).to.deep.equal(['lemon']);
     });
+
+    it('drops the separator on the first visible group when earlier groups are filtered out', async () => {
+      const groups = el.querySelectorAll('zn-opt-group');
+
+      await type('berr');
+      expect(groups[1].hasAttribute('data-first-visible'), 'Berries group while alone').to.be.true;
+
+      await type('');
+      expect(groups[1].hasAttribute('data-first-visible'), 'Berries group with Citrus restored').to.be.false;
+    });
   });
 
   describe('Escape key', () => {