@aquera/nile-elements 2.0.3 → 2.0.5

package/dist/src/nile-combobox/portal-manager.js

@@ -190,28 +190,8 @@ export class ComboboxPortalManager {
             }
             if (!listbox || !listbox.isConnected)
                 return;
-            listbox.scrollTop = 0;
-            const virtualized = listbox.querySelector('.virtualized');
-            if (virtualized && virtualized.isConnected) {
-                const fewItems = this.component.filteredData?.length < 5;
-                if (fewItems) {
-                    virtualized.style.overflowY = 'hidden';
-                    virtualized.style.maxHeight = 'none';
-                    listbox.style.overflowY = 'hidden';
-                    listbox.style.maxHeight = 'fit-content';
-                }
-                else {
-                    virtualized.style.overflowY = 'auto';
-                    virtualized.style.maxHeight = '';
-                    listbox.style.overflowY = 'auto';
-                    listbox.style.maxHeight = '';
-                }
-                virtualized.scrollTop = 0;
-            }
-            const virtualizer = listbox.querySelector('lit-virtualizer');
-            if (virtualizer && virtualizer.isConnected) {
-                virtualizer.scrollTop = 0;
-            }
+            const scroller = listbox.querySelector('.combobox__options-scroll');
+            (scroller ?? listbox).scrollTop = 0;
         });
     }
 }

package/dist/src/nile-combobox/portal-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal-manager.js","sourceRoot":"","sources":["../../../src/nile-combobox/portal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n  size,\n  platform,\n  type Placement,\n  type MiddlewareData,\n  type ComputePositionConfig,\n} from '@floating-ui/dom';\nimport { PortalUtils } from '../nile-select/portal-utils';\n\nexport class ComboboxPortalManager {\n  private portalContainer: HTMLElement | null = null;\n  private originalListboxParent: HTMLElement | null = null;\n  private measuredPopupHeight: number | null = null;\n  private component: any;\n  private cleanupAutoUpdate: (() => void) | null = null;\n  private currentPlacement: Placement = 'bottom';\n\n  constructor(component: any) {\n    this.component = component;\n  }\n\n  get portalContainerElement(): HTMLElement | null {\n    return this.portalContainer;\n  }\n\n  private createPortalContainer(): HTMLElement {\n    const container = document.createElement('div');\n    container.style.position = 'absolute';\n    container.style.zIndex = '9999';\n    container.style.pointerEvents = 'none';\n    container.className = 'nile-combobox-portal';\n    return container;\n  }\n\n  private async computePosition(): Promise<void> {\n    if (!this.portalContainer) return;\n\n    const referenceElement = this.component.combobox || this.component;\n    const floatingElement = this.portalContainer;\n\n    try {\n      const boundary = PortalUtils.findBoundaryElements(referenceElement);\n      const initialPlacement = PortalUtils.getOptimalPlacement(referenceElement);\n\n      const { x, y, placement } = await computePosition(\n        referenceElement,\n        floatingElement,\n        {\n          placement: initialPlacement,\n          strategy: 'fixed',\n          middleware: [\n            offset(4),\n            size({\n              apply: ({ availableWidth, availableHeight, elements, rects }) => {\n                const maxHeight = PortalUtils.calculateOptimalHeight(\n                  rects.reference,\n                  window.innerHeight,\n                  this.currentPlacement,\n                );\n                elements.floating.style.maxWidth = `${availableWidth}px`;\n                elements.floating.style.maxHeight = `${maxHeight}px`;\n                elements.floating.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n                elements.floating.style.setProperty('--auto-size-available-height', `${maxHeight}px`);\n              },\n              padding: 10,\n              boundary,\n            }),\n            flip({\n              fallbackPlacements: ['bottom', 'top', 'bottom-start', 'top-start'],\n              fallbackStrategy: 'bestFit',\n              padding: 10,\n              boundary,\n            }),\n            shift({ padding: 10, crossAxis: true, boundary }),\n          ],\n          platform,\n        },\n      );\n\n      const referenceRect = referenceElement.getBoundingClientRect();\n      Object.assign(floatingElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n        position: 'fixed',\n        pointerEvents: 'auto',\n        width: `${referenceRect.width}px`,\n      });\n\n      this.currentPlacement = placement;\n      const placementClass = placement.split('-')[0];\n      floatingElement.className = `nile-combobox-portal combobox__listbox--${placementClass}`;\n    } catch {\n      this.fallbackPositioning();\n    }\n  }\n\n  private fallbackPositioning(): void {\n    if (!this.portalContainer) return;\n\n    const ref = this.component.combobox || this.component;\n    const rect = ref.getBoundingClientRect();\n    const vh = window.innerHeight;\n    const spaceBelow = vh - rect.bottom;\n    const spaceAbove = rect.top;\n\n    let top: number;\n    let maxH: number;\n    let cls: string;\n\n    if (spaceAbove > spaceBelow) {\n      maxH = Math.max(spaceAbove - 20, 100);\n      top = Math.max(rect.top - maxH - 4, 10);\n      cls = 'top';\n    } else {\n      maxH = Math.max(spaceBelow - 20, 100);\n      top = rect.bottom + 4;\n      cls = 'bottom';\n    }\n\n    Object.assign(this.portalContainer.style, {\n      left: `${rect.left}px`,\n      top: `${top}px`,\n      width: `${rect.width}px`,\n      maxHeight: `${maxH}px`,\n      pointerEvents: 'auto',\n    });\n    this.portalContainer.className = `nile-combobox-portal combobox__listbox--${cls}`;\n    this.portalContainer.style.setProperty('--auto-size-available-height', `${maxH}px`);\n    this.portalContainer.style.setProperty('--auto-size-available-width', `${rect.width}px`);\n  }\n\n  private extractStylesAsCSS(styles: any): string {\n    if (typeof styles === 'string') return styles;\n    if (Array.isArray(styles)) return styles.map(s => this.extractStylesAsCSS(s)).join('\\n');\n    if (styles && typeof styles === 'object' && styles.cssText) return styles.cssText;\n    return '';\n  }\n\n  private injectStyles(): void {\n    if (!this.portalContainer) return;\n    const styleId = `nile-combobox-styles-${Math.random().toString(36).substring(2, 11)}`;\n    if (document.getElementById(styleId)) return;\n\n    const componentStyles = (this.component.constructor as any).styles;\n    if (!componentStyles) return;\n\n    const el = document.createElement('style');\n    el.id = styleId;\n    el.textContent = this.extractStylesAsCSS(componentStyles);\n    document.head.appendChild(el);\n    (this.portalContainer as any).__injectedStyleId = styleId;\n  }\n\n  setupPortal(): void {\n    if (!this.component.portal) return;\n\n    this.component.updateComplete.then(() => {\n      const listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;\n      if (!listbox) return;\n\n      this.originalListboxParent = listbox.parentElement as HTMLElement;\n      this.portalContainer = this.createPortalContainer();\n      this.portalContainer.appendChild(listbox);\n      document.body.appendChild(this.portalContainer);\n      this.injectStyles();\n      listbox.style.display = '';\n      this.computePosition();\n\n      this.cleanupAutoUpdate = autoUpdate(\n        this.component,\n        this.portalContainer,\n        () => this.computePosition(),\n        { ancestorScroll: true, ancestorResize: true, elementResize: true, layoutShift: true, animationFrame: true },\n      );\n    });\n  }\n\n  cleanupPortal(): void {\n    if (this.cleanupAutoUpdate) {\n      this.cleanupAutoUpdate();\n      this.cleanupAutoUpdate = null;\n    }\n\n    if (this.portalContainer && this.portalContainer.parentNode) {\n      const listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;\n      if (listbox && this.originalListboxParent) {\n        this.originalListboxParent.appendChild(listbox);\n        listbox.style.display = this.component.portal ? 'none' : '';\n      }\n\n      const sid = (this.portalContainer as any).__injectedStyleId;\n      if (sid) document.getElementById(sid)?.remove();\n\n      this.portalContainer.parentNode.removeChild(this.portalContainer);\n    }\n\n    this.portalContainer = null;\n    this.originalListboxParent = null;\n    this.measuredPopupHeight = null;\n    this.currentPlacement = 'bottom';\n  }\n\n  updatePosition(): void {\n    if (this.component.portal && this.portalContainer) {\n      this.computePosition();\n    }\n  }\n\n  resetMeasuredHeight(): void {\n    this.measuredPopupHeight = null;\n  }\n\n  async resetScrollPosition(): Promise<void> {\n    await this.component.updateComplete;\n\n    requestAnimationFrame(() => {\n      let listbox: HTMLElement | null = null;\n\n      if (this.component.portal && this.portalContainer) {\n        listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;\n      } else {\n        listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;\n      }\n\n      if (!listbox || !listbox.isConnected) return;\n      listbox.scrollTop = 0;\n\n      const virtualized = listbox.querySelector('.virtualized') as HTMLElement;\n      if (virtualized && virtualized.isConnected) {\n        const fewItems = this.component.filteredData?.length < 5;\n        if (fewItems) {\n          virtualized.style.overflowY = 'hidden';\n          virtualized.style.maxHeight = 'none';\n          listbox.style.overflowY = 'hidden';\n          listbox.style.maxHeight = 'fit-content';\n        } else {\n          virtualized.style.overflowY = 'auto';\n          virtualized.style.maxHeight = '';\n          listbox.style.overflowY = 'auto';\n          listbox.style.maxHeight = '';\n        }\n        virtualized.scrollTop = 0;\n      }\n\n      const virtualizer = listbox.querySelector('lit-virtualizer') as HTMLElement;\n      if (virtualizer && virtualizer.isConnected) {\n        virtualizer.scrollTop = 0;\n      }\n    });\n  }\n}\n"]}
+{"version":3,"file":"portal-manager.js","sourceRoot":"","sources":["../../../src/nile-combobox/portal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n  size,\n  platform,\n  type Placement,\n  type MiddlewareData,\n  type ComputePositionConfig,\n} from '@floating-ui/dom';\nimport { PortalUtils } from '../nile-select/portal-utils';\n\nexport class ComboboxPortalManager {\n  private portalContainer: HTMLElement | null = null;\n  private originalListboxParent: HTMLElement | null = null;\n  private measuredPopupHeight: number | null = null;\n  private component: any;\n  private cleanupAutoUpdate: (() => void) | null = null;\n  private currentPlacement: Placement = 'bottom';\n\n  constructor(component: any) {\n    this.component = component;\n  }\n\n  get portalContainerElement(): HTMLElement | null {\n    return this.portalContainer;\n  }\n\n  private createPortalContainer(): HTMLElement {\n    const container = document.createElement('div');\n    container.style.position = 'absolute';\n    container.style.zIndex = '9999';\n    container.style.pointerEvents = 'none';\n    container.className = 'nile-combobox-portal';\n    return container;\n  }\n\n  private async computePosition(): Promise<void> {\n    if (!this.portalContainer) return;\n\n    const referenceElement = this.component.combobox || this.component;\n    const floatingElement = this.portalContainer;\n\n    try {\n      const boundary = PortalUtils.findBoundaryElements(referenceElement);\n      const initialPlacement = PortalUtils.getOptimalPlacement(referenceElement);\n\n      const { x, y, placement } = await computePosition(\n        referenceElement,\n        floatingElement,\n        {\n          placement: initialPlacement,\n          strategy: 'fixed',\n          middleware: [\n            offset(4),\n            size({\n              apply: ({ availableWidth, availableHeight, elements, rects }) => {\n                const maxHeight = PortalUtils.calculateOptimalHeight(\n                  rects.reference,\n                  window.innerHeight,\n                  this.currentPlacement,\n                );\n                elements.floating.style.maxWidth = `${availableWidth}px`;\n                elements.floating.style.maxHeight = `${maxHeight}px`;\n                elements.floating.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n                elements.floating.style.setProperty('--auto-size-available-height', `${maxHeight}px`);\n              },\n              padding: 10,\n              boundary,\n            }),\n            flip({\n              fallbackPlacements: ['bottom', 'top', 'bottom-start', 'top-start'],\n              fallbackStrategy: 'bestFit',\n              padding: 10,\n              boundary,\n            }),\n            shift({ padding: 10, crossAxis: true, boundary }),\n          ],\n          platform,\n        },\n      );\n\n      const referenceRect = referenceElement.getBoundingClientRect();\n      Object.assign(floatingElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n        position: 'fixed',\n        pointerEvents: 'auto',\n        width: `${referenceRect.width}px`,\n      });\n\n      this.currentPlacement = placement;\n      const placementClass = placement.split('-')[0];\n      floatingElement.className = `nile-combobox-portal combobox__listbox--${placementClass}`;\n    } catch {\n      this.fallbackPositioning();\n    }\n  }\n\n  private fallbackPositioning(): void {\n    if (!this.portalContainer) return;\n\n    const ref = this.component.combobox || this.component;\n    const rect = ref.getBoundingClientRect();\n    const vh = window.innerHeight;\n    const spaceBelow = vh - rect.bottom;\n    const spaceAbove = rect.top;\n\n    let top: number;\n    let maxH: number;\n    let cls: string;\n\n    if (spaceAbove > spaceBelow) {\n      maxH = Math.max(spaceAbove - 20, 100);\n      top = Math.max(rect.top - maxH - 4, 10);\n      cls = 'top';\n    } else {\n      maxH = Math.max(spaceBelow - 20, 100);\n      top = rect.bottom + 4;\n      cls = 'bottom';\n    }\n\n    Object.assign(this.portalContainer.style, {\n      left: `${rect.left}px`,\n      top: `${top}px`,\n      width: `${rect.width}px`,\n      maxHeight: `${maxH}px`,\n      pointerEvents: 'auto',\n    });\n    this.portalContainer.className = `nile-combobox-portal combobox__listbox--${cls}`;\n    this.portalContainer.style.setProperty('--auto-size-available-height', `${maxH}px`);\n    this.portalContainer.style.setProperty('--auto-size-available-width', `${rect.width}px`);\n  }\n\n  private extractStylesAsCSS(styles: any): string {\n    if (typeof styles === 'string') return styles;\n    if (Array.isArray(styles)) return styles.map(s => this.extractStylesAsCSS(s)).join('\\n');\n    if (styles && typeof styles === 'object' && styles.cssText) return styles.cssText;\n    return '';\n  }\n\n  private injectStyles(): void {\n    if (!this.portalContainer) return;\n    const styleId = `nile-combobox-styles-${Math.random().toString(36).substring(2, 11)}`;\n    if (document.getElementById(styleId)) return;\n\n    const componentStyles = (this.component.constructor as any).styles;\n    if (!componentStyles) return;\n\n    const el = document.createElement('style');\n    el.id = styleId;\n    el.textContent = this.extractStylesAsCSS(componentStyles);\n    document.head.appendChild(el);\n    (this.portalContainer as any).__injectedStyleId = styleId;\n  }\n\n  setupPortal(): void {\n    if (!this.component.portal) return;\n\n    this.component.updateComplete.then(() => {\n      const listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;\n      if (!listbox) return;\n\n      this.originalListboxParent = listbox.parentElement as HTMLElement;\n      this.portalContainer = this.createPortalContainer();\n      this.portalContainer.appendChild(listbox);\n      document.body.appendChild(this.portalContainer);\n      this.injectStyles();\n      listbox.style.display = '';\n      this.computePosition();\n\n      this.cleanupAutoUpdate = autoUpdate(\n        this.component,\n        this.portalContainer,\n        () => this.computePosition(),\n        { ancestorScroll: true, ancestorResize: true, elementResize: true, layoutShift: true, animationFrame: true },\n      );\n    });\n  }\n\n  cleanupPortal(): void {\n    if (this.cleanupAutoUpdate) {\n      this.cleanupAutoUpdate();\n      this.cleanupAutoUpdate = null;\n    }\n\n    if (this.portalContainer && this.portalContainer.parentNode) {\n      const listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;\n      if (listbox && this.originalListboxParent) {\n        this.originalListboxParent.appendChild(listbox);\n        listbox.style.display = this.component.portal ? 'none' : '';\n      }\n\n      const sid = (this.portalContainer as any).__injectedStyleId;\n      if (sid) document.getElementById(sid)?.remove();\n\n      this.portalContainer.parentNode.removeChild(this.portalContainer);\n    }\n\n    this.portalContainer = null;\n    this.originalListboxParent = null;\n    this.measuredPopupHeight = null;\n    this.currentPlacement = 'bottom';\n  }\n\n  updatePosition(): void {\n    if (this.component.portal && this.portalContainer) {\n      this.computePosition();\n    }\n  }\n\n  resetMeasuredHeight(): void {\n    this.measuredPopupHeight = null;\n  }\n\n  async resetScrollPosition(): Promise<void> {\n    await this.component.updateComplete;\n\n    requestAnimationFrame(() => {\n      let listbox: HTMLElement | null = null;\n\n      if (this.component.portal && this.portalContainer) {\n        listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;\n      } else {\n        listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;\n      }\n\n      if (!listbox || !listbox.isConnected) return;\n\n      const scroller = listbox.querySelector(\n        '.combobox__options-scroll',\n      ) as HTMLElement | null;\n      (scroller ?? listbox).scrollTop = 0;\n    });\n  }\n}\n"]}

package/dist/src/nile-combobox/renderer.d.ts

@@ -10,12 +10,11 @@ import type { ComboboxRow, ComboboxHeaderRow } from './types';
 export declare class ComboboxRenderer {
     static renderGroupHeader(row: ComboboxHeaderRow): TemplateResult;
     static renderRowsPlain(rows: ComboboxRow[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, showNoResults: boolean, noResultsMessage: string, isLoading: boolean, onScroll: (e: Event) => void, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean, noResultsSubtitle?: string): TemplateResult;
-    static renderRowsVirtualized(virtualItems: VirtualItem[], totalSize: number, rows: ComboboxRow[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean): TemplateResult;
-    static renderVirtualizedOptions(virtualItems: VirtualItem[], totalSize: number, data: any[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, measureElement: (el: Element | null) => void, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean): TemplateResult;
+    static renderRowsVirtualized(virtualItems: VirtualItem[], totalSize: number, rows: ComboboxRow[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean, stickyOverlay?: TemplateResult, stickyIndex?: number): TemplateResult;
+    static renderVirtualizedOptions(virtualItems: VirtualItem[], totalSize: number, data: any[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean): TemplateResult;
     static renderPlainOptions(data: any[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, showNoResults: boolean, noResultsMessage: string, isLoading: boolean, onScroll: (e: Event) => void, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean, noResultsSubtitle?: string): TemplateResult;
     static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult;
     static renderNoData(noDataMessage: string): TemplateResult;
-    private static renderMeasuredItem;
     static renderItem(item: any, value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean): TemplateResult;
     static renderVirtualizedGrid(virtualItems: VirtualItem[], totalSize: number, data: any[], value: string | string[], multiple: boolean, gridColumns: number, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, gridColumnWidth?: number): TemplateResult;
     static renderHorizontalGrid(virtualItems: VirtualItem[], totalSize: number, data: any[], value: string | string[], multiple: boolean, gridRows: number, gridColumnWidth: number, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string): TemplateResult;

package/dist/src/nile-combobox/renderer.js

@@ -47,13 +47,14 @@ export class ComboboxRenderer {
       </div>
     `;
     }
-    static renderRowsVirtualized(virtualItems, totalSize, rows, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
+    static renderRowsVirtualized(virtualItems, totalSize, rows, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription, stickyOverlay, stickyIndex = -1) {
         return html `
       <div
         part="select-options"
         class="combobox__options ${isLoading ? 'loading' : ''}"
       >
         <div style="position:relative;height:${totalSize}px;width:100%;">
+          ${stickyOverlay ?? ''}
           ${repeat(virtualItems, (vItem) => vItem.key, (vItem) => {
             const row = rows[vItem.index];
             if (!row)
@@ -62,8 +63,9 @@ export class ComboboxRenderer {
                 `transform:translateY(${vItem.start}px);` +
                 `height:${vItem.size}px;`;
             if (row.kind === 'header') {
+                const headerStyle = vItem.index === stickyIndex ? `${posStyle}visibility:hidden;` : posStyle;
                 return html `
-                  <div style=${posStyle} class="combobox__group-header-slot">
+                  <div style=${headerStyle} class="combobox__group-header-slot">
                     ${ComboboxRenderer.renderGroupHeader(row)}
                   </div>
                 `;
@@ -78,20 +80,24 @@ export class ComboboxRenderer {
       </div>
     `;
     }
-    static renderVirtualizedOptions(virtualItems, totalSize, data, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, measureElement, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
-        const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
+    static renderVirtualizedOptions(virtualItems, totalSize, data, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
         return html `
       <div
         part="select-options"
         class="combobox__options ${isLoading ? 'loading' : ''}"
       >
         <div style="position:relative;height:${totalSize}px;width:100%;">
-          <div style="position:absolute;top:0;left:0;width:100%;transform:translateY(${offsetTop}px);">
-            ${repeat(virtualItems, (vItem) => vItem.key, (vItem) => {
+          ${repeat(virtualItems, (vItem) => vItem.key, (vItem) => {
             const item = data[vItem.index];
-            return ComboboxRenderer.renderMeasuredItem(item, vItem.index, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription);
+            const posStyle = `position:absolute;top:0;left:0;right:0;` +
+                `transform:translateY(${vItem.start}px);` +
+                `height:${vItem.size}px;`;
+            return html `
+                <div style=${posStyle}>
+                  ${ComboboxRenderer.renderItem(item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription)}
+                </div>
+              `;
         })}
-          </div>
         </div>
       </div>
     `;
@@ -136,43 +142,6 @@ export class ComboboxRenderer {
       </div>
     `;
     }
-    static renderMeasuredItem(item, index, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
-        if (!item)
-            return html ``;
-        const optionValue = getItemValue(item);
-        const displayText = getDisplayText(item);
-        const isDisabled = item?.disabled || false;
-        const className = item?.className;
-        const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');
-        const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');
-        const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');
-        let isSelected = false;
-        if (multiple) {
-            isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));
-        }
-        else {
-            isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);
-        }
-        return html `
-      <nile-option
-        data-index=${index}
-        value=${optionValue}
-        .selected=${isSelected}
-        .disabled=${isDisabled}
-        .showCheckbox=${multiple}
-        class=${classMap({
-            option: enableDescription ?? false,
-            [className ?? '']: !!className,
-        })}
-        .description=${description}
-        .isDescriptionEnabled=${enableDescription}
-      >
-        ${unsafeHTML(prefix)}
-        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}
-        ${unsafeHTML(suffix)}
-      </nile-option>
-    `;
-    }
     static renderItem(item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
         if (!item)
             return html ``;

package/dist/src/nile-combobox/renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../src/nile-combobox/renderer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, type TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { VirtualItem } from '@tanstack/virtual-core';\nimport type { ComboboxRow, ComboboxHeaderRow } from './types';\n\nexport class ComboboxRenderer {\n\n  static renderGroupHeader(row: ComboboxHeaderRow): TemplateResult {\n    return html`\n      <div\n        part=\"group-header\"\n        class=\"combobox__group-header\"\n        role=\"presentation\"\n        data-group-id=${row.id}\n        style=${`--group-depth:${row.depth}`}\n      >\n        ${row.prefix\n          ? html`<nile-icon\n              class=\"combobox__group-prefix\"\n              name=${row.prefix}\n              size=\"14\"\n              method=\"fill\"\n            ></nile-icon>`\n          : ''}\n        <span class=\"combobox__group-label\">${row.label}</span>\n      </div>\n    `;\n  }\n\n  static renderRowsPlain(\n    rows: ComboboxRow[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    showNoResults: boolean,\n    noResultsMessage: string,\n    isLoading: boolean,\n    onScroll: (e: Event) => void,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n    noResultsSubtitle?: string,\n  ): TemplateResult {\n    if (showNoResults && !isLoading && rows.length === 0) {\n      return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n    }\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n          ${rows.map((row) =>\n            row.kind === 'header'\n              ? ComboboxRenderer.renderGroupHeader(row)\n              : ComboboxRenderer.renderItem(\n                  row.item, value, multiple, getDisplayText, getItemValue,\n                  allowHtmlLabel, getItemDescription, getItemPrefix,\n                  getItemSuffix, enableDescription,\n                ),\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderRowsVirtualized(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    rows: ComboboxRow[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n          ${repeat(\n            virtualItems,\n            (vItem) => vItem.key,\n            (vItem) => {\n              const row = rows[vItem.index];\n              if (!row) return html``;\n              const posStyle =\n                `position:absolute;top:0;left:0;right:0;` +\n                `transform:translateY(${vItem.start}px);` +\n                `height:${vItem.size}px;`;\n              if (row.kind === 'header') {\n                return html`\n                  <div style=${posStyle} class=\"combobox__group-header-slot\">\n                    ${ComboboxRenderer.renderGroupHeader(row)}\n                  </div>\n                `;\n              }\n              return html`\n                <div style=${posStyle}>\n                  ${ComboboxRenderer.renderItem(\n                    row.item, value, multiple, getDisplayText, getItemValue,\n                    allowHtmlLabel, getItemDescription, getItemPrefix,\n                    getItemSuffix, enableDescription,\n                  )}\n                </div>\n              `;\n            },\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderVirtualizedOptions(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    measureElement: (el: Element | null) => void,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n          <div style=\"position:absolute;top:0;left:0;width:100%;transform:translateY(${offsetTop}px);\">\n            ${repeat(\n              virtualItems,\n              (vItem) => vItem.key,\n              (vItem) => {\n                const item = data[vItem.index];\n                return ComboboxRenderer.renderMeasuredItem(\n                  item, vItem.index, value, multiple, getDisplayText, getItemValue,\n                  allowHtmlLabel, getItemDescription, getItemPrefix,\n                  getItemSuffix, enableDescription,\n                );\n              },\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static renderPlainOptions(\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    showNoResults: boolean,\n    noResultsMessage: string,\n    isLoading: boolean,\n    onScroll: (e: Event) => void,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n    noResultsSubtitle?: string,\n  ): TemplateResult {\n    if (showNoResults && !isLoading && data.length === 0) {\n      return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n    }\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n          ${data.map((item: any) =>\n            ComboboxRenderer.renderItem(\n              item, value, multiple, getDisplayText, getItemValue,\n              allowHtmlLabel, getItemDescription, getItemPrefix,\n              getItemSuffix, enableDescription,\n            ),\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult {\n    return html`\n      <div part=\"select-options\" class=\"combobox__options\">\n        <div part=\"no-results\" class=\"combobox__no-results\">\n          <div part=\"no-results-title\" class=\"combobox__no-results-title\">\n            ${noResultsMessage || 'No result found'}\n          </div>\n          ${noResultsSubtitle\n            ? html`<div part=\"no-results-subtitle\" class=\"combobox__no-results-subtitle\">${noResultsSubtitle}</div>`\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderNoData(noDataMessage: string): TemplateResult {\n    return html`\n      <div part=\"select-options\" class=\"combobox__options\">\n        <div part=\"no-data\" class=\"combobox__no-results\">\n          <div part=\"no-data-title\" class=\"combobox__no-results-title\">\n            ${noDataMessage || 'No data available'}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private static renderMeasuredItem(\n    item: any,\n    index: number,\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    if (!item) return html``;\n\n    const optionValue = getItemValue(item);\n    const displayText = getDisplayText(item);\n    const isDisabled = item?.disabled || false;\n    const className = item?.className;\n    const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n    const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n    const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n    let isSelected = false;\n    if (multiple) {\n      isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n    } else {\n      isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n    }\n\n    return html`\n      <nile-option\n        data-index=${index}\n        value=${optionValue}\n        .selected=${isSelected}\n        .disabled=${isDisabled}\n        .showCheckbox=${multiple}\n        class=${classMap({\n          option: enableDescription ?? false,\n          [className ?? '']: !!className,\n        })}\n        .description=${description}\n        .isDescriptionEnabled=${enableDescription}\n      >\n        ${unsafeHTML(prefix)}\n        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n        ${unsafeHTML(suffix)}\n      </nile-option>\n    `;\n  }\n\n  static renderItem(\n    item: any,\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    if (!item) return html``;\n\n    const optionValue = getItemValue(item);\n    const displayText = getDisplayText(item);\n    const isDisabled = item?.disabled || false;\n    const className = item?.className;\n    const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n    const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n    const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n    let isSelected = false;\n    if (multiple) {\n      isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n    } else {\n      isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n    }\n\n    return html`\n      <nile-option\n        value=${optionValue}\n        .selected=${isSelected}\n        .disabled=${isDisabled}\n        .showCheckbox=${multiple}\n        class=${classMap({\n          option: enableDescription ?? false,\n          [className ?? '']: !!className,\n        })}\n        .description=${description}\n        .isDescriptionEnabled=${enableDescription}\n      >\n        ${unsafeHTML(prefix)}\n        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n        ${unsafeHTML(suffix)}\n      </nile-option>\n    `;\n  }\n\n  static renderVirtualizedGrid(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    gridColumns: number,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    gridColumnWidth?: number,\n  ): TemplateResult {\n    const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n    const colTemplate = gridColumnWidth\n      ? `repeat(${gridColumns}, ${gridColumnWidth}px)`\n      : `repeat(${gridColumns}, 1fr)`;\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;height:${totalSize}px;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;\">\n          <div style=\"position:absolute;top:0;left:0;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;transform:translateY(${offsetTop}px);\">\n            ${repeat(\n              virtualItems,\n              (vItem) => vItem.key,\n              (vItem) => {\n                const rowStart = vItem.index * gridColumns;\n                const rowItems = data.slice(rowStart, rowStart + gridColumns);\n                return html`\n                  <div class=\"combobox__grid-row\" style=\"display:grid;grid-template-columns:${colTemplate};gap:4px;\">\n                    ${rowItems.map((item: any) =>\n                      ComboboxRenderer.renderItem(\n                        item, value, multiple, getDisplayText, getItemValue,\n                        allowHtmlLabel, getItemDescription, getItemPrefix,\n                        getItemSuffix,\n                      ),\n                    )}\n                  </div>\n                `;\n              },\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static renderHorizontalGrid(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    gridRows: number,\n    gridColumnWidth: number,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n  ): TemplateResult {\n    const offsetLeft = virtualItems.length > 0 ? virtualItems[0].start : 0;\n    const rowHeight = 38;\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options combobox__options--horizontal ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;width:${totalSize}px;height:${rowHeight * gridRows}px;\">\n          <div style=\"position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${offsetLeft}px);\">\n            ${repeat(\n              virtualItems,\n              (vCol) => vCol.key,\n              (vCol) => {\n                const colStart = vCol.index * gridRows;\n                const colItems = data.slice(colStart, colStart + gridRows);\n                return html`\n                  <div class=\"combobox__grid-col\" style=\"width:${gridColumnWidth}px;flex-shrink:0;display:flex;flex-direction:column;\">\n                    ${colItems.map((item: any) =>\n                      ComboboxRenderer.renderItem(\n                        item, value, multiple, getDisplayText, getItemValue,\n                        allowHtmlLabel, getItemDescription, getItemPrefix,\n                        getItemSuffix,\n                      ),\n                    )}\n                  </div>\n                `;\n              },\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static renderAddCustomOption(\n    searchValue: string,\n    multiple: boolean,\n  ): TemplateResult {\n    return html`\n      <nile-option\n        value=${searchValue}\n        class=\"combobox__add-option\"\n        .showCheckbox=${multiple}\n      >\n        + Add \"${searchValue}\"\n      </nile-option>\n    `;\n  }\n\n  static shouldUseVirtualizer(data: any[], gridColumns = 1): boolean {\n    if (gridColumns > 1) return true;\n    return data.length >= 5;\n  }\n}\n"]}
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../src/nile-combobox/renderer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, type TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { VirtualItem } from '@tanstack/virtual-core';\nimport type { ComboboxRow, ComboboxHeaderRow } from './types';\n\nexport class ComboboxRenderer {\n\n  static renderGroupHeader(row: ComboboxHeaderRow): TemplateResult {\n    return html`\n      <div\n        part=\"group-header\"\n        class=\"combobox__group-header\"\n        role=\"presentation\"\n        data-group-id=${row.id}\n        style=${`--group-depth:${row.depth}`}\n      >\n        ${row.prefix\n          ? html`<nile-icon\n              class=\"combobox__group-prefix\"\n              name=${row.prefix}\n              size=\"14\"\n              method=\"fill\"\n            ></nile-icon>`\n          : ''}\n        <span class=\"combobox__group-label\">${row.label}</span>\n      </div>\n    `;\n  }\n\n  static renderRowsPlain(\n    rows: ComboboxRow[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    showNoResults: boolean,\n    noResultsMessage: string,\n    isLoading: boolean,\n    onScroll: (e: Event) => void,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n    noResultsSubtitle?: string,\n  ): TemplateResult {\n    if (showNoResults && !isLoading && rows.length === 0) {\n      return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n    }\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n          ${rows.map((row) =>\n            row.kind === 'header'\n              ? ComboboxRenderer.renderGroupHeader(row)\n              : ComboboxRenderer.renderItem(\n                  row.item, value, multiple, getDisplayText, getItemValue,\n                  allowHtmlLabel, getItemDescription, getItemPrefix,\n                  getItemSuffix, enableDescription,\n                ),\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderRowsVirtualized(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    rows: ComboboxRow[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n    stickyOverlay?: TemplateResult,\n    stickyIndex = -1,\n  ): TemplateResult {\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n          ${stickyOverlay ?? ''}\n          ${repeat(\n            virtualItems,\n            (vItem) => vItem.key,\n            (vItem) => {\n              const row = rows[vItem.index];\n              if (!row) return html``;\n              const posStyle =\n                `position:absolute;top:0;left:0;right:0;` +\n                `transform:translateY(${vItem.start}px);` +\n                `height:${vItem.size}px;`;\n              if (row.kind === 'header') {\n                const headerStyle =\n                  vItem.index === stickyIndex ? `${posStyle}visibility:hidden;` : posStyle;\n                return html`\n                  <div style=${headerStyle} class=\"combobox__group-header-slot\">\n                    ${ComboboxRenderer.renderGroupHeader(row)}\n                  </div>\n                `;\n              }\n              return html`\n                <div style=${posStyle}>\n                  ${ComboboxRenderer.renderItem(\n                    row.item, value, multiple, getDisplayText, getItemValue,\n                    allowHtmlLabel, getItemDescription, getItemPrefix,\n                    getItemSuffix, enableDescription,\n                  )}\n                </div>\n              `;\n            },\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderVirtualizedOptions(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n          ${repeat(\n            virtualItems,\n            (vItem) => vItem.key,\n            (vItem) => {\n              const item = data[vItem.index];\n              const posStyle =\n                `position:absolute;top:0;left:0;right:0;` +\n                `transform:translateY(${vItem.start}px);` +\n                `height:${vItem.size}px;`;\n              return html`\n                <div style=${posStyle}>\n                  ${ComboboxRenderer.renderItem(\n                    item, value, multiple, getDisplayText, getItemValue,\n                    allowHtmlLabel, getItemDescription, getItemPrefix,\n                    getItemSuffix, enableDescription,\n                  )}\n                </div>\n              `;\n            },\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderPlainOptions(\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    showNoResults: boolean,\n    noResultsMessage: string,\n    isLoading: boolean,\n    onScroll: (e: Event) => void,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n    noResultsSubtitle?: string,\n  ): TemplateResult {\n    if (showNoResults && !isLoading && data.length === 0) {\n      return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n    }\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n          ${data.map((item: any) =>\n            ComboboxRenderer.renderItem(\n              item, value, multiple, getDisplayText, getItemValue,\n              allowHtmlLabel, getItemDescription, getItemPrefix,\n              getItemSuffix, enableDescription,\n            ),\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult {\n    return html`\n      <div part=\"select-options\" class=\"combobox__options\">\n        <div part=\"no-results\" class=\"combobox__no-results\">\n          <div part=\"no-results-title\" class=\"combobox__no-results-title\">\n            ${noResultsMessage || 'No result found'}\n          </div>\n          ${noResultsSubtitle\n            ? html`<div part=\"no-results-subtitle\" class=\"combobox__no-results-subtitle\">${noResultsSubtitle}</div>`\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  static renderNoData(noDataMessage: string): TemplateResult {\n    return html`\n      <div part=\"select-options\" class=\"combobox__options\">\n        <div part=\"no-data\" class=\"combobox__no-results\">\n          <div part=\"no-data-title\" class=\"combobox__no-results-title\">\n            ${noDataMessage || 'No data available'}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static renderItem(\n    item: any,\n    value: string | string[],\n    multiple: boolean,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    enableDescription?: boolean,\n  ): TemplateResult {\n    if (!item) return html``;\n\n    const optionValue = getItemValue(item);\n    const displayText = getDisplayText(item);\n    const isDisabled = item?.disabled || false;\n    const className = item?.className;\n    const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n    const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n    const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n    let isSelected = false;\n    if (multiple) {\n      isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n    } else {\n      isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n    }\n\n    return html`\n      <nile-option\n        value=${optionValue}\n        .selected=${isSelected}\n        .disabled=${isDisabled}\n        .showCheckbox=${multiple}\n        class=${classMap({\n          option: enableDescription ?? false,\n          [className ?? '']: !!className,\n        })}\n        .description=${description}\n        .isDescriptionEnabled=${enableDescription}\n      >\n        ${unsafeHTML(prefix)}\n        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n        ${unsafeHTML(suffix)}\n      </nile-option>\n    `;\n  }\n\n  static renderVirtualizedGrid(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    gridColumns: number,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n    gridColumnWidth?: number,\n  ): TemplateResult {\n    const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n    const colTemplate = gridColumnWidth\n      ? `repeat(${gridColumns}, ${gridColumnWidth}px)`\n      : `repeat(${gridColumns}, 1fr)`;\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;height:${totalSize}px;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;\">\n          <div style=\"position:absolute;top:0;left:0;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;transform:translateY(${offsetTop}px);\">\n            ${repeat(\n              virtualItems,\n              (vItem) => vItem.key,\n              (vItem) => {\n                const rowStart = vItem.index * gridColumns;\n                const rowItems = data.slice(rowStart, rowStart + gridColumns);\n                return html`\n                  <div class=\"combobox__grid-row\" style=\"display:grid;grid-template-columns:${colTemplate};gap:4px;\">\n                    ${rowItems.map((item: any) =>\n                      ComboboxRenderer.renderItem(\n                        item, value, multiple, getDisplayText, getItemValue,\n                        allowHtmlLabel, getItemDescription, getItemPrefix,\n                        getItemSuffix,\n                      ),\n                    )}\n                  </div>\n                `;\n              },\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static renderHorizontalGrid(\n    virtualItems: VirtualItem[],\n    totalSize: number,\n    data: any[],\n    value: string | string[],\n    multiple: boolean,\n    gridRows: number,\n    gridColumnWidth: number,\n    getDisplayText: (item: any) => string,\n    getItemValue: (item: any) => string,\n    isLoading: boolean,\n    allowHtmlLabel: boolean,\n    getItemDescription?: (item: any) => string,\n    getItemPrefix?: (item: any) => string,\n    getItemSuffix?: (item: any) => string,\n  ): TemplateResult {\n    const offsetLeft = virtualItems.length > 0 ? virtualItems[0].start : 0;\n    const rowHeight = 38;\n\n    return html`\n      <div\n        part=\"select-options\"\n        class=\"combobox__options combobox__options--horizontal ${isLoading ? 'loading' : ''}\"\n      >\n        <div style=\"position:relative;width:${totalSize}px;height:${rowHeight * gridRows}px;\">\n          <div style=\"position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${offsetLeft}px);\">\n            ${repeat(\n              virtualItems,\n              (vCol) => vCol.key,\n              (vCol) => {\n                const colStart = vCol.index * gridRows;\n                const colItems = data.slice(colStart, colStart + gridRows);\n                return html`\n                  <div class=\"combobox__grid-col\" style=\"width:${gridColumnWidth}px;flex-shrink:0;display:flex;flex-direction:column;\">\n                    ${colItems.map((item: any) =>\n                      ComboboxRenderer.renderItem(\n                        item, value, multiple, getDisplayText, getItemValue,\n                        allowHtmlLabel, getItemDescription, getItemPrefix,\n                        getItemSuffix,\n                      ),\n                    )}\n                  </div>\n                `;\n              },\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static renderAddCustomOption(\n    searchValue: string,\n    multiple: boolean,\n  ): TemplateResult {\n    return html`\n      <nile-option\n        value=${searchValue}\n        class=\"combobox__add-option\"\n        .showCheckbox=${multiple}\n      >\n        + Add \"${searchValue}\"\n      </nile-option>\n    `;\n  }\n\n  static shouldUseVirtualizer(data: any[], gridColumns = 1): boolean {\n    if (gridColumns > 1) return true;\n    return data.length >= 5;\n  }\n}\n"]}

package/dist/src/nile-empty-state/nile-empty-state.css.js

@@ -69,11 +69,120 @@ export const styles = css `
     min-width:300px;
     max-width:512px;
     width:100%;
+    margin-inline: auto;
     height:max-content;
     display:flex;
     flex-direction:column;
     row-gap:var(--nile-es-gap);
   }
+  .empty-state--tone-info .empty-state__body--tonal {
+    background: linear-gradient(
+      180deg,
+      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary)) 0%,
+      var(--nile-colors-primary-400, var(--ng-colors-bg-brand-secondary)) 100%
+    );
+  }
+
+  .empty-state--tone-warning .empty-state__body--tonal {
+    background: linear-gradient(
+      180deg,
+      var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary)) 0%,
+      var(--nile-colors-yellow-400, var(--ng-colors-bg-warning-secondary)) 100%
+    );
+  }
+
+  .empty-state--tone-error .empty-state__body--tonal {
+    background: linear-gradient(
+      180deg,
+      var(--nile-colors-red-100, var(--ng-colors-bg-error-primary)) 0%,
+      var(--nile-colors-red-400, var(--ng-colors-bg-error-secondary)) 100%
+    );
+  }
+
+  .empty-state--tone-info .nile-flat-type-icon {
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+  }
+
+  .empty-state--tone-warning .nile-flat-type-icon {
+    background-color: var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary));
+    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));
+  }
+
+  .empty-state--tone-error .nile-flat-type-icon {
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));
+    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
+  }
+
+  .empty-state--inline {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    min-width: 0;
+    max-width: none;
+    column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    row-gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));
+    padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))
+             var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  .empty-state--inline .empty-state__body {
+    flex-direction: row;
+    align-items: center;
+    column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+  }
+
+  .empty-state--inline .empty__state__text-section {
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));
+    max-width: none;
+  }
+
+  .empty-state--inline .empty-state__text,
+  .empty-state--inline .empty-state__subtext {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+    text-align: left;
+  }
+  .empty-state__body--inline {
+    display: grid;
+    place-items: center;
+  }
+
+
+  .empty-state--page .empty-state__text {
+    font-size: var(--nile-type-scale-9, var(--ng-font-size-display-sm));
+    line-height: var(--nile-line-height-display, var(--ng-line-height-display-sm));
+    letter-spacing: -0.02em;
+  }
+
+  .empty-state--page .empty-state__subtext {
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
+  }
+
+  .empty-state--page .empty-state__code {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    letter-spacing: 0.2em;
+  }
+  /* stack and page carry no padding of their own, so the dashed edge would sit
+     flush against the content — hence the roomy padding here. */
+  .empty-state--bordered {
+    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-radius: var(--nile-border-size-10, var(--ng-radius-xl));
+    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
+    padding: var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl))
+             var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));
+  }
+
+  /* A strip stays tight when it is bordered too. Spelled out as its own
+     two-class rule so specificity decides, not declaration order. */
+  .empty-state--inline.empty-state--bordered {
+    padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))
+             var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+  }
 
   .empty-state__body {
     display:flex;
@@ -88,13 +197,13 @@ export const styles = css `
   }
 
   .empty-state__img__icon {
-    display: var(--ng-display-flex);
+    display: var(--nile-display-flex, var(--ng-display-flex));
     justify-content: center;
     align-items: center;
   }
 
   .empty-state__body--tonal {
-    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));
+    background: var(--nile-gradient-1, var(--ng-white-gradient-6));
     width: 104px;
     height: 104px;
     border-radius: var(--nile-radius-full, var(--ng-radius-full));
@@ -107,8 +216,7 @@ export const styles = css `
     height:var(--nile-es-icon-size);
     aspect-ratio:1 / 1;
     border-radius: var(--nile-es-flat-option-border-radius);
-
-    background-color: white;
+    background-color: var(--nile-colors-neutral-0, var(--ng-colors-bg-primary));
     display: grid;
     place-items: center;
     border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
@@ -119,6 +227,8 @@ export const styles = css `
     flex-direction:column;
     gap:var(--nile-es-text-gap);
     max-width:80%;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   .empty-state__text {
@@ -143,7 +253,20 @@ export const styles = css `
   .empty-state-actions {
     display:flex;
     justify-content:center;
+    gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    flex-wrap: wrap;
   }
+
+  .empty-state__code {
+    font-family: var(--nile-font-family-body, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    text-align: center;
+    color: var(--nile-colors-dark-400, var(--ng-colors-text-quaternary-500));
+  }
+
 `;
 export default [styles];
 //# sourceMappingURL=nile-empty-state.css.js.map

package/dist/src/nile-empty-state/nile-empty-state.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport { css } from 'lit';\n\n/**\n * EmptyState CSS\n */\nexport const styles = css`\n  :host {\n    display:inline-flex;\n    width:100%;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .empty-state--sm {\n    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height:20px;\n    \n    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:118px;\n    --nile-es-img-width:152px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n  }\n\n  .empty-state--md {\n    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:128px;\n    --nile-es-img-width:172px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state--lg {\n    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n    --nile-es-img-height:160px;\n    --nile-es-img-width:220px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state {\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n    height:max-content;\n    display:flex;\n    flex-direction:column;\n    row-gap:var(--nile-es-gap);\n  }\n\n  .empty-state__body {\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n    align-items:center;\n    row-gap:var(--nile-es-body-gap)\n  }\n\n  .empty-state__body--content {\n    position:relative;\n  }\n\n  .empty-state__img__icon {\n    display: var(--ng-display-flex);\n    justify-content: center;\n    align-items: center;\n  }\n\n  .empty-state__body--tonal {\n    background:  var(--nile-gradient-1, var(--ng-white-gradient-6));\n    width: 104px;\n    height: 104px;\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n\n  .nile-flat-type-icon {\n    height:var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: var(--nile-es-flat-option-border-radius);\n\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .empty__state__text-section {\n    display:flex;\n    flex-direction:column;\n    gap:var(--nile-es-text-gap);\n    max-width:80%;\n  }\n\n  .empty-state__text {\n    font-size: var(--nile-es-text-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    line-height: var(--nile-es-text-line-height);\n    text-align: center;\n    font-style: normal;\n  }\n\n  .empty-state__subtext {\n    font-size: var(--nile-es-subtext-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-es-subtext-line-height);\n    text-align: center;\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-style: normal;\n  }\n\n  .empty-state-actions {\n    display:flex;\n    justify-content:center;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmQxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport { css } from 'lit';\n\n/**\n * EmptyState CSS\n */\nexport const styles = css`\n  :host {\n    display:inline-flex;\n    width:100%;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .empty-state--sm {\n    --nile-es-text-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-text-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height:20px;\n    \n    --nile-es-icon-size:var(--nile-height-48px, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:118px;\n    --nile-es-img-width:152px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n    --nile-es-text-gap:var(--nile-spacing-none, var(--ng-spacing-xs));\n  }\n\n  .empty-state--md {\n    --nile-es-text-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-lg));\n    --nile-es-subtext-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    --nile-es-subtext-line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\n    --nile-es-icon-size: var(--nile-spacing-5-x, var(--ng-height-48px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-5, var(--ng-radius-lg));\n    --nile-es-img-height:128px;\n    --nile-es-img-width:172px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state--lg {\n    --nile-es-text-size: var(--nile-spacing-2xl, var(--ng-font-size-text-xl));\n    --nile-es-text-line-height: var(--nile-line-height-large, var(--ng-line-height-text-xl));\n    --nile-es-subtext-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    --nile-es-subtext-line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n\n    --nile-es-icon-size:var(--nile-height-60px, var(--ng-height-60px));\n    --nile-es-flat-option-border-radius: var(--nile-border-size-10, var(--ng-radius-lg));\n    --nile-es-img-height:160px;\n    --nile-es-img-width:220px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl));\n    --nile-es-body-gap:var(--nile-spacing-spacing-3xl, var(--ng-spacing-2xl));\n    --nile-es-text-gap:var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state {\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n    margin-inline: auto;\n    height:max-content;\n    display:flex;\n    flex-direction:column;\n    row-gap:var(--nile-es-gap);\n  }\n  .empty-state--tone-info .empty-state__body--tonal {\n    background: linear-gradient(\n      180deg,\n      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary)) 0%,\n      var(--nile-colors-primary-400, var(--ng-colors-bg-brand-secondary)) 100%\n    );\n  }\n\n  .empty-state--tone-warning .empty-state__body--tonal {\n    background: linear-gradient(\n      180deg,\n      var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary)) 0%,\n      var(--nile-colors-yellow-400, var(--ng-colors-bg-warning-secondary)) 100%\n    );\n  }\n\n  .empty-state--tone-error .empty-state__body--tonal {\n    background: linear-gradient(\n      180deg,\n      var(--nile-colors-red-100, var(--ng-colors-bg-error-primary)) 0%,\n      var(--nile-colors-red-400, var(--ng-colors-bg-error-secondary)) 100%\n    );\n  }\n\n  .empty-state--tone-info .nile-flat-type-icon {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .empty-state--tone-warning .nile-flat-type-icon {\n    background-color: var(--nile-colors-yellow-100, var(--ng-colors-bg-warning-primary));\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .empty-state--tone-error .nile-flat-type-icon {\n    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n  }\n\n  .empty-state--inline {\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    min-width: 0;\n    max-width: none;\n    column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    row-gap: var(--nile-spacing-spacing-xs, var(--ng-spacing-xs));\n    padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n             var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .empty-state--inline .empty-state__body {\n    flex-direction: row;\n    align-items: center;\n    column-gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n  }\n\n  .empty-state--inline .empty__state__text-section {\n    flex-direction: row;\n    align-items: baseline;\n    gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n    max-width: none;\n  }\n\n  .empty-state--inline .empty-state__text,\n  .empty-state--inline .empty-state__subtext {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    text-align: left;\n  }\n  .empty-state__body--inline {\n    display: grid;\n    place-items: center;\n  }\n\n\n  .empty-state--page .empty-state__text {\n    font-size: var(--nile-type-scale-9, var(--ng-font-size-display-sm));\n    line-height: var(--nile-line-height-display, var(--ng-line-height-display-sm));\n    letter-spacing: -0.02em;\n  }\n\n  .empty-state--page .empty-state__subtext {\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n  }\n\n  .empty-state--page .empty-state__code {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    letter-spacing: 0.2em;\n  }\n  /* stack and page carry no padding of their own, so the dashed edge would sit\n     flush against the content — hence the roomy padding here. */\n  .empty-state--bordered {\n    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    border-radius: var(--nile-border-size-10, var(--ng-radius-xl));\n    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n    padding: var(--nile-spacing-spacing-4xl, var(--ng-spacing-4xl))\n             var(--nile-spacing-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n  /* A strip stays tight when it is bordered too. Spelled out as its own\n     two-class rule so specificity decides, not declaration order. */\n  .empty-state--inline.empty-state--bordered {\n    padding: var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n             var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .empty-state__body {\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n    align-items:center;\n    row-gap:var(--nile-es-body-gap)\n  }\n\n  .empty-state__body--content {\n    position:relative;\n  }\n\n  .empty-state__img__icon {\n    display: var(--nile-display-flex, var(--ng-display-flex));\n    justify-content: center;\n    align-items: center;\n  }\n\n  .empty-state__body--tonal {\n    background: var(--nile-gradient-1, var(--ng-white-gradient-6));\n    width: 104px;\n    height: 104px;\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n\n  .nile-flat-type-icon {\n    height:var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: var(--nile-es-flat-option-border-radius);\n    background-color: var(--nile-colors-neutral-0, var(--ng-colors-bg-primary));\n    display: grid;\n    place-items: center;\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .empty__state__text-section {\n    display:flex;\n    flex-direction:column;\n    gap:var(--nile-es-text-gap);\n    max-width:80%;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .empty-state__text {\n    font-size: var(--nile-es-text-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n    line-height: var(--nile-es-text-line-height);\n    text-align: center;\n    font-style: normal;\n  }\n\n  .empty-state__subtext {\n    font-size: var(--nile-es-subtext-size);\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-es-subtext-line-height);\n    text-align: center;\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-style: normal;\n  }\n\n  .empty-state-actions {\n    display:flex;\n    justify-content:center;\n    gap: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    flex-wrap: wrap;\n  }\n\n  .empty-state__code {\n    font-family: var(--nile-font-family-body, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    text-align: center;\n    color: var(--nile-colors-dark-400, var(--ng-colors-text-quaternary-500));\n  }\n\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-empty-state/nile-empty-state.d.ts

@@ -6,6 +6,12 @@
  */
 import { CSSResultArray, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element';
+/** What happened. Selects an icon, tone, default copy and ARIA role. */
+export type NileEmptyStateStatus = 'empty' | 'no-results' | 'not-found' | 'no-access' | 'error' | 'offline';
+/** How loud the state looks. Defaults from `status`, always overridable. */
+export type NileEmptyStateTone = 'neutral' | 'info' | 'warning' | 'error';
+/** What shape the state occupies. */
+export type NileEmptyStateLayout = 'stack' | 'inline' | 'page';
 /**
  * Nile empty-state component.
  *
@@ -20,13 +26,37 @@ export declare class NileEmptyState extends NileElement {
     static get styles(): CSSResultArray;
     size: 'sm' | 'md' | 'lg';
     variant: 'flat' | 'content' | 'tonal';
-    icon: string;
-    grayscale: boolean;
-    text: String;
-    subText: String;
+    status?: NileEmptyStateStatus;
+    layout: NileEmptyStateLayout;
+    code?: string;
+    bordered: boolean;
     svgIconUrl: string;
-    svgIconSize: number;
+    /**
+     * Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,
+     * the SVG matches whatever size the current variant/layout draws at.
+     */
+    svgIconSize?: number;
     svgIconColor: string;
+    private _icon?;
+    private _text?;
+    private _subText?;
+    private _tone?;
+    get icon(): string;
+    set icon(value: string | null);
+    /** Headline. Resolves through the `status` preset to `DEFAULT_TEXT`. */
+    get text(): string;
+    set text(value: string | null);
+    /** Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`. */
+    get subText(): string;
+    set subText(value: string | null);
+    get tone(): NileEmptyStateTone;
+    set tone(value: NileEmptyStateTone | null);
+    /** The preset backing the current `status`, or undefined when none is set. */
+    private get preset();
+    private get glyphColor();
+    /** ARIA wiring  */
+    private get liveRegion();
+    private renderGlyph;
     /**
      * Render method
      * @slot This is a slot test