@aquera/nile-elements 1.7.2 → 1.7.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-breadcrumb-item/nile-breadcrumb-item.ts

@@ -53,13 +53,15 @@ export class NileBreadcrumbItem extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <slot
+    <div part="item"
         class=${classMap({
           'nile-breadcrumb-item__slot-text': !this.isLast,
           'nile-breadcrumb-item__last-slot-text': this.isLast,
         })}
         @click=${this.handleClick}
-      ></slot>
+        >
+        <slot></slot>
+      </div>
       <nile-icon
         name=${this.separator}
         aria-label=${this.separator}

package/src/nile-combobox/group-utils.ts

@@ -0,0 +1,157 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {
+  ComboboxDataItem,
+  ComboboxGroupItem,
+  ComboboxOptionItem,
+  ComboboxRow,
+  ComboboxHeaderRow,
+  ComboboxOptionRow,
+} from './types';
+
+export function isGroup(item: any): item is ComboboxGroupItem {
+  return !!item && typeof item === 'object' && item.type === 'group' && Array.isArray(item.options);
+}
+
+export function hasGroups(data: any[]): boolean {
+  if (!Array.isArray(data)) return false;
+  for (const item of data) {
+    if (isGroup(item)) return true;
+  }
+  return false;
+}
+
+export function countOptionsDeep(group: ComboboxGroupItem): number {
+  let n = 0;
+  for (const child of group.options) {
+    if (isGroup(child)) n += countOptionsDeep(child);
+    else n += 1;
+  }
+  return n;
+}
+
+export function flattenRows(data: ComboboxDataItem[]): ComboboxRow[] {
+  const rows: ComboboxRow[] = [];
+  const walk = (items: ComboboxDataItem[], depth: number, parentIds: string[]) => {
+    for (const item of items) {
+      if (isGroup(item)) {
+        rows.push({
+          kind: 'header',
+          id: item.id,
+          label: item.label,
+          prefix: item.prefix,
+          depth,
+          optionCount: countOptionsDeep(item),
+        } as ComboboxHeaderRow);
+        walk(item.options, depth + 1, [...parentIds, item.id]);
+      } else {
+        rows.push({
+          kind: 'option',
+          item: item as ComboboxOptionItem,
+          depth,
+          parentIds,
+        } as ComboboxOptionRow);
+      }
+    }
+  };
+  walk(Array.isArray(data) ? data : [], 0, []);
+  return rows;
+}
+
+export function getOptionRows(rows: ComboboxRow[]): ComboboxOptionRow[] {
+  const out: ComboboxOptionRow[] = [];
+  for (const r of rows) if (r.kind === 'option') out.push(r);
+  return out;
+}
+
+/**
+ * Filter rows by a query.
+ *
+ * Rules:
+ *  - An option row is kept if its searchText matches.
+ *  - If a group's label matches, the entire subtree (header + all descendant
+ *    options + nested headers) is kept.
+ *  - Otherwise a header is kept only if at least one descendant option matches.
+ *  - Empty groups (no surviving descendants) are dropped.
+ */
+export function filterRows(
+  data: ComboboxDataItem[],
+  query: string,
+  getSearchText: (item: any) => string,
+): { rows: ComboboxRow[]; visibleOptionCount: number } {
+  const q = (query || '').trim().toLowerCase();
+  if (!q) {
+    const rows = flattenRows(data);
+    return { rows, visibleOptionCount: getOptionRows(rows).length };
+  }
+
+  const matchedOption = (item: ComboboxOptionItem): boolean => {
+    const text = (getSearchText(item) || '').toString().toLowerCase();
+    return text.includes(q);
+  };
+
+  // Walk the tree, returning a filtered subtree (or null when nothing survives).
+  type FilterResult =
+    | { kind: 'option'; item: ComboboxOptionItem }
+    | { kind: 'group'; group: ComboboxGroupItem; children: FilterResult[] }
+    | null;
+
+  const walk = (item: ComboboxDataItem, ancestorLabelMatched: boolean): FilterResult => {
+    if (isGroup(item)) {
+      const labelMatched = item.label.toLowerCase().includes(q);
+      const keepAll = labelMatched || ancestorLabelMatched;
+      const children: FilterResult[] = [];
+      for (const child of item.options) {
+        const sub = walk(child, keepAll);
+        if (sub) children.push(sub);
+      }
+      if (children.length === 0 && !keepAll) return null;
+      // If keepAll but nothing came back (empty group), still emit so user sees label.
+      return { kind: 'group', group: item, children };
+    }
+    if (ancestorLabelMatched || matchedOption(item as ComboboxOptionItem)) {
+      return { kind: 'option', item: item as ComboboxOptionItem };
+    }
+    return null;
+  };
+
+  const tops: FilterResult[] = [];
+  for (const top of data) {
+    const r = walk(top, false);
+    if (r) tops.push(r);
+  }
+
+  // Materialize back to flat rows.
+  const rows: ComboboxRow[] = [];
+  const emit = (results: FilterResult[], depth: number, parentIds: string[]) => {
+    for (const r of results) {
+      if (!r) continue;
+      if (r.kind === 'group') {
+        rows.push({
+          kind: 'header',
+          id: r.group.id,
+          label: r.group.label,
+          prefix: r.group.prefix,
+          depth,
+          optionCount: countOptionsDeep(r.group),
+        });
+        emit(r.children, depth + 1, [...parentIds, r.group.id]);
+      } else {
+        rows.push({
+          kind: 'option',
+          item: r.item,
+          depth,
+          parentIds,
+        });
+      }
+    }
+  };
+  emit(tops, 0, []);
+
+  return { rows, visibleOptionCount: getOptionRows(rows).length };
+}

package/src/nile-combobox/nile-combobox.css.ts

@@ -141,9 +141,10 @@ export const styles = css`
   /* Size: medium */
   .combobox--medium .combobox__trigger {
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    padding: var(--nile-spacing-5px, var(--ng-spacing-md)) var(--nile-spacing-10px, var(--ng-spacing-lg));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
     min-height: var(--nile-height-40px, var(--ng-height-40px));
+    box-sizing: border-box;
   }
 
   /* Size: large */
@@ -256,10 +257,10 @@ export const styles = css`
     margin: 0;
     -webkit-appearance: none;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    font-size: inherit;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-overflow: ellipsis;
-    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
   }
 
   .combobox__input::placeholder {
@@ -636,6 +637,78 @@ export const styles = css`
     border-radius: 0;
   }
 
+  /* ── Group headers (data-driven grouping) ── */
+
+  /* Plain (non-virtualized) listbox: sticky relative to the scroll container.
+   * Activated only when the host has [sticky-group-header]. */
+  :host([sticky-group-header]) .combobox__options-plain .combobox__group-header {
+    position: sticky;
+    top: calc(var(--group-depth, 0) * 28px);
+    z-index: 1;
+  }
+
+  /* Virtualized listbox: each row is absolutely positioned by the virtualizer.
+   * Sticky doesn't pin against the scroll container because the row wrapper's
+   * transform creates a containing block. Instead we render a separate
+   * overlay inside the listbox that mirrors the currently-active group
+   * header (computed on scroll). */
+  .combobox__group-header-slot {
+    pointer-events: none;
+  }
+  .combobox__group-header-slot .combobox__group-header {
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .combobox__group-sticky-overlay {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+  .combobox__group-sticky-overlay .combobox__group-header {
+    box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+  }
+
+  .combobox__group-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    /* Match the listbox's natural inline padding so the header sits like a
+     * section divider, edge-to-edge with options. Nested groups indent by
+     * depth. Override with --combobox-group-header-indent if needed. */
+    padding-block: 8px;
+    padding-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding-inline-start: calc(var(--combobox-group-header-indent, var(--nile-spacing-lg, var(--ng-spacing-lg))) + var(--group-depth, 0) * 16px);
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .combobox__group-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .combobox__group-prefix {
+    flex-shrink: 0;
+    color: inherit;
+  }
+
   /* ── Help / Error ── */
 
   .form-control__help-text {