@aquera/nile-elements 0.0.79 → 0.0.81

package/dist/src/nile-menu/nile-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n  static styles: CSSResultGroup = styles;\n  @state() searchValue: string = '';\n  @state() searchWidth: number = 0;\n\n  @property({ type: Boolean, reflect: true }) searchEnabled = false;\n  @property({ type: Boolean }) showNoResults: boolean = false;\n\n  @property({ type: String }) noResultsMessage: string = 'No results found';\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nile-menu-item');\n\n    if (item?.hasSubMenu) {\n      return;\n    }\n\n    // if (!item || item.disabled || item.inert) {\n    if (!item || item.disabled) {\n      return;\n    }\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('nile-select', { value: item.value });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as NileMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'nile-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n      (el: HTMLElement) => {\n        if (!this.isMenuItem(el)) {\n          // if (el.inert || !this.isMenuItem(el)) {\n          return false;\n        }\n        return true;\n      }\n    ) as NileMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: NileMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  private handleSearchChange(e: any) {\n    let items = this.getAllItems();\n    let counter = 0;\n    items.map(curr_item => {\n      this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n      if (\n        curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n      ) {\n        curr_item.style.display = 'block';\n        counter++;\n      } else {\n        curr_item.style.display = 'none';\n      }\n    });\n    this.showNoResults = counter === 0;\n  }\n\n  render() {\n    return html`\n      <div>\n        ${this.searchEnabled\n          ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n              <nile-input\n                size=\"medium\"\n                style=${this.searchWidth\n                  ? `width: ${this.searchWidth}px;`\n                  : 'width: 100%;'}\n                .value=${this.searchValue}\n                placeholder=\"Search...\"\n                @nile-input=${this.handleSearchChange}\n                part=\"menu__input\"\n              >\n                <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n              </nile-input>\n            </div>`\n          : html``}\n        ${this.showNoResults\n          ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n          : ''}\n\n        <slot\n          name=\"menu__header\"\n          @click=${(e: Event) => {\n            e.stopPropagation();\n          }}\n        ></slot>\n        <slot\n          @slotchange=${this.handleSlotChange}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeyDown}\n          @mousedown=${this.handleMouseDown}\n        ></slot>\n      </div>\n    `;\n  }\n}\nexport default NileMenu;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu': NileMenu;\n  }\n}\n"]}
+{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,IAAI,EAAO,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;;;;;;;GAUG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QAEI,gBAAW,GAAW,EAAE,CAAC;QACzB,gBAAW,GAAW,CAAC,CAAC;QAEW,kBAAa,GAAG,KAAK,CAAC;QACrC,kBAAa,GAAY,KAAK,CAAC;QAEhC,qBAAgB,GAAW,kBAAkB,CAAC;IA+L5E,CAAC;IA3LC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAE9C,IAAI,IAAI,EAAE,UAAU,EAAE;YACpB,OAAO;SACR;QAED,8CAA8C;QAC9C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YAC5B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAClD,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,uCAAuC;QACvC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,6FAA6F;YAC7F,IAAI,EAAE,KAAK,EAAE,CAAC;SACf;QAED,0CAA0C;QAC1C,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QAED,8CAA8C;QAC9C,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACjC,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACzC,IAAI,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEvD,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;oBAC7B,KAAK,EAAE,CAAC;iBACT;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;oBAClC,KAAK,EAAE,CAAC;iBACT;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;oBAC/B,KAAK,GAAG,CAAC,CAAC;iBACX;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;oBAC9B,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC1B;gBAED,IAAI,KAAK,GAAG,CAAC,EAAE;oBACb,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC1B;gBACD,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC5B,KAAK,GAAG,CAAC,CAAC;iBACX;gBAED,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;gBAClC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;aACtB;SACF;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;YAC3B,IAAI,CAAC,cAAc,CAAC,MAAsB,CAAC,CAAC;SAC7C;IACH,CAAC;IAEO,gBAAgB;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEjC,2DAA2D;QAC3D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAC/B;IACH,CAAC;IAEO,UAAU,CAAC,IAAiB;QAClC,OAAO,CACL,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB;YAC/C,CAAC,UAAU,EAAE,kBAAkB,EAAE,eAAe,CAAC,CAAC,QAAQ,CACxD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAChC,CACF,CAAC;IACJ,CAAC;IAED,6FAA6F;IAC7F,WAAW;QACT,OAAO,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACrE,CAAC,EAAe,EAAE,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE;gBACxB,0CAA0C;gBAC1C,OAAO,KAAK,CAAC;aACd;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CACgB,CAAC;IACtB,CAAC;IAED;;;OAGG;IACH,cAAc;QACZ,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;IAC1E,CAAC;IAED;;;OAGG;IACH,cAAc,CAAC,IAAkB;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEjC,qBAAqB;QACrB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAChB,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,kBAAkB,CAAC,CAAM;QAC/B,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC/B,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;YACrE,IACE,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,EACxE;gBACA,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;gBAClC,OAAO,EAAE,CAAC;aACX;iBAAM;gBACL,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;aAClC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,GAAG,OAAO,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;;wBAGQ,IAAI,CAAC,WAAW;gBACtB,CAAC,CAAC,UAAU,IAAI,CAAC,WAAW,KAAK;gBACjC,CAAC,CAAC,cAAc;yBACT,IAAI,CAAC,WAAW;;8BAEX,IAAI,CAAC,kBAAkB;;;;;mBAKlC;YACT,CAAC,CAAC,IAAI,CAAA,EAAE;UACR,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,gBAAgB,oBAAoB;YACnE,CAAC,CAAC,EAAE;;;;mBAIK,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC;;;wBAGa,IAAI,CAAC,gBAAgB;mBAC1B,IAAI,CAAC,WAAW;qBACd,IAAI,CAAC,aAAa;uBAChB,IAAI,CAAC,eAAe;;;KAGtC,CAAC;IACJ,CAAC;;AArMM,eAAM,GAAmB,MAAM,CAAC;AAC9B;IAAR,KAAK,EAAE;6CAA0B;AACzB;IAAR,KAAK,EAAE;6CAAyB;AAEW;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAuB;AACrC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAgC;AAEhC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA+C;AAE/C;IAA1B,KAAK,CAAC,kBAAkB,CAAC;6CAA+B;AAV9C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuMpB;SAvMY,QAAQ;AAwMrB,eAAe,QAAQ,CAAC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n  static styles: CSSResultGroup = styles;\n  @state() searchValue: string = '';\n  @state() searchWidth: number = 0;\n\n  @property({ type: Boolean, reflect: true }) searchEnabled = false;\n  @property({ type: Boolean }) showNoResults: boolean = false;\n\n  @property({ type: String }) noResultsMessage: string = 'No results found';\n\n  @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nile-menu-item');\n\n    if (item?.hasSubMenu) {\n      return;\n    }\n\n    // if (!item || item.disabled || item.inert) {\n    if (!item || item.disabled) {\n      return;\n    }\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('nile-select', { value: item.value });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as NileMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'nile-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n      (el: HTMLElement) => {\n        if (!this.isMenuItem(el)) {\n          // if (el.inert || !this.isMenuItem(el)) {\n          return false;\n        }\n        return true;\n      }\n    ) as NileMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: NileMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  private handleSearchChange(e: any) {\n    let items = this.getAllItems();\n    let counter = 0;\n    items.map(curr_item => {\n      this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n      if (\n        curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n      ) {\n        curr_item.style.display = 'block';\n        counter++;\n      } else {\n        curr_item.style.display = 'none';\n      }\n    });\n    this.showNoResults = counter === 0;\n  }\n\n  render() {\n    return html`\n      <div>\n        ${this.searchEnabled\n          ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n              <nile-input\n                size=\"medium\"\n                style=${this.searchWidth\n                  ? `width: ${this.searchWidth}px;`\n                  : 'width: 100%;'}\n                .value=${this.searchValue}\n                placeholder=\"Search...\"\n                @nile-input=${this.handleSearchChange}\n                part=\"menu__input\"\n              >\n                <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n              </nile-input>\n            </div>`\n          : html``}\n        ${this.showNoResults\n          ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n          : ''}\n\n        <slot\n          name=\"menu__header\"\n          @click=${(e: Event) => {\n            e.stopPropagation();\n          }}\n        ></slot>\n        <slot\n          @slotchange=${this.handleSlotChange}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeyDown}\n          @mousedown=${this.handleMouseDown}\n        ></slot>\n      </div>\n    `;\n  }\n}\nexport default NileMenu;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu': NileMenu;\n  }\n}\n"]}

package/dist/src/nile-split-panel/index.d.ts

@@ -0,0 +1 @@
+export { NileSplitPanel } from './nile-split-panel';

package/dist/src/nile-split-panel/index.js

@@ -0,0 +1,2 @@
+export { NileSplitPanel } from './nile-split-panel';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-split-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-split-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileSplitPanel } from './nile-split-panel';"]}

package/dist/src/nile-split-panel/nile-split-panel.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * SplitPanel CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

package/dist/src/nile-split-panel/nile-split-panel.css.js

@@ -0,0 +1,99 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* 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 { css } from 'lit-element';
+/**
+ * SplitPanel CSS
+ */
+export const styles = css `
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    box-sizing: border-box;
+    --divider-width: 4px;
+    --divider-hit-area: 12px;
+    --min: 0%;
+    --max: 100%;
+
+    display: grid;
+  }
+
+  .start,
+  .end {
+    overflow: hidden;
+  }
+
+  .divider {
+    flex: 0 0 var(--divider-width);
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-dark-900);
+    z-index: 1;
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider:focus-visible {
+    background-color: var(--nile-colors-blue-500);
+    color: var(--nile-colors-white-base);
+  }
+
+  :host([disabled]) .divider {
+    cursor: not-allowed;
+  }
+
+  /* Horizontal */
+  :host(:not([vertical], [disabled])) .divider {
+    cursor: col-resize;
+  }
+
+  :host(:not([vertical])) .divider::after {
+    display: flex;
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    width: var(--divider-hit-area);
+  }
+
+  /* Vertical */
+  :host([vertical]) {
+    flex-direction: column;
+  }
+
+  :host([vertical]:not([disabled])) .divider {
+    cursor: row-resize;
+  }
+
+  :host([vertical]) .divider::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    height: var(--divider-hit-area);
+  }
+
+  @media (forced-colors: active) {
+    .divider {
+      outline: solid 1px transparent;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-split-panel.css.js.map

package/dist/src/nile-split-panel/nile-split-panel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-split-panel.css.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,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-element';\n\n/**\n * SplitPanel CSS\n */\nexport const styles = css`\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    box-sizing: border-box;\n    --divider-width: 4px;\n    --divider-hit-area: 12px;\n    --min: 0%;\n    --max: 100%;\n\n    display: grid;\n  }\n\n  .start,\n  .end {\n    overflow: hidden;\n  }\n\n  .divider {\n    flex: 0 0 var(--divider-width);\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-dark-900);\n    z-index: 1;\n  }\n\n  .divider:focus {\n    outline: none;\n  }\n\n  :host(:not([disabled])) .divider:focus-visible {\n    background-color: var(--nile-colors-blue-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  :host([disabled]) .divider {\n    cursor: not-allowed;\n  }\n\n  /* Horizontal */\n  :host(:not([vertical], [disabled])) .divider {\n    cursor: col-resize;\n  }\n\n  :host(:not([vertical])) .divider::after {\n    display: flex;\n    content: '';\n    position: absolute;\n    height: 100%;\n    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    width: var(--divider-hit-area);\n  }\n\n  /* Vertical */\n  :host([vertical]) {\n    flex-direction: column;\n  }\n\n  :host([vertical]:not([disabled])) .divider {\n    cursor: row-resize;\n  }\n\n  :host([vertical]) .divider::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    height: var(--divider-hit-area);\n  }\n\n  @media (forced-colors: active) {\n    .divider {\n      outline: solid 1px transparent;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-split-panel/nile-split-panel.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Split panels display two adjacent panels, allowing the user to reposition them.
+ *
+ * @event nile-reposition - Emitted when the divider's position changes.
+ *
+ * @slot start - Content to place in the start panel.
+ * @slot end - Content to place in the end panel.
+ * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.
+ *
+ * @csspart start - The start panel.
+ * @csspart end - The end panel.
+ * @csspart panel - Targets both the start and end panels.
+ * @csspart divider - The divider that separates the start and end panels.
+ *
+ * @cssproperty [--divider-width=4px] - The width of the visible divider.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
+ *  usually wider than the divider to facilitate easier dragging.
+ * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
+ * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
+ */
+export declare class NileSplitPanel extends NileElement {
+    static styles: CSSResultGroup;
+    private cachedPositionInPixels;
+    private resizeObserver;
+    private size;
+    divider: HTMLElement;
+    /**
+     * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+     * container's initial size.
+     */
+    position: number;
+    /** The current position of the divider from the primary panel's edge in pixels. */
+    positionInPixels: number;
+    /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+    vertical: boolean;
+    /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+    disabled: boolean;
+    /**
+     * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+     * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+     * host element is resized.
+     */
+    primary?: 'start' | 'end';
+    /**
+     * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.
+     * `"100px 50%"`.
+     */
+    snap?: string;
+    /** How close the divider must be to a snap point until snapping occurs. */
+    snapThreshold: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private detectSize;
+    private percentageToPixels;
+    private pixelsToPercentage;
+    private handleDrag;
+    private handleKeyDown;
+    private handleResize;
+    handlePositionChange(): void;
+    handlePositionInPixelsChange(): void;
+    handleVerticalChange(): void;
+    render(): TemplateResult<1>;
+}
+export default NileSplitPanel;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-split-panel': NileSplitPanel;
+    }
+}

package/dist/src/nile-split-panel/nile-split-panel.js

@@ -0,0 +1,251 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { __decorate } from "tslib";
+import { styles } from './nile-split-panel.css';
+import NileElement from '../internal/nile-element';
+import { clamp } from '../internal/math';
+import { customElement, property, query } from 'lit/decorators.js';
+import { drag } from '../internal/drag';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../internal/watch';
+/**
+ * @summary Split panels display two adjacent panels, allowing the user to reposition them.
+ *
+ * @event nile-reposition - Emitted when the divider's position changes.
+ *
+ * @slot start - Content to place in the start panel.
+ * @slot end - Content to place in the end panel.
+ * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.
+ *
+ * @csspart start - The start panel.
+ * @csspart end - The end panel.
+ * @csspart panel - Targets both the start and end panels.
+ * @csspart divider - The divider that separates the start and end panels.
+ *
+ * @cssproperty [--divider-width=4px] - The width of the visible divider.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
+ *  usually wider than the divider to facilitate easier dragging.
+ * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
+ * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
+ */
+let NileSplitPanel = class NileSplitPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+         * container's initial size.
+         */
+        this.position = 50;
+        /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+        this.vertical = false;
+        /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+        this.disabled = false;
+        /** How close the divider must be to a snap point until snapping occurs. */
+        this.snapThreshold = 12;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));
+        this.updateComplete.then(() => this.resizeObserver.observe(this));
+        this.detectSize();
+        this.cachedPositionInPixels = this.percentageToPixels(this.position);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver.unobserve(this);
+    }
+    detectSize() {
+        const { width, height } = this.getBoundingClientRect();
+        this.size = this.vertical ? height : width;
+    }
+    percentageToPixels(value) {
+        return this.size * (value / 100);
+    }
+    pixelsToPercentage(value) {
+        return (value / this.size) * 100;
+    }
+    handleDrag(event) {
+        const isRtl = false;
+        if (this.disabled) {
+            return;
+        }
+        // Prevent text selection when dragging
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        drag(this, {
+            onMove: (x, y) => {
+                let newPositionInPixels = this.vertical ? y : x;
+                // Flip for end panels
+                if (this.primary === 'end') {
+                    newPositionInPixels = this.size - newPositionInPixels;
+                }
+                // Check snap points
+                if (this.snap) {
+                    const snaps = this.snap.split(' ');
+                    snaps.forEach(value => {
+                        let snapPoint;
+                        if (value.endsWith('%')) {
+                            snapPoint = this.size * (parseFloat(value) / 100);
+                        }
+                        else {
+                            snapPoint = parseFloat(value);
+                        }
+                        if (isRtl && !this.vertical) {
+                            snapPoint = this.size - snapPoint;
+                        }
+                        if (newPositionInPixels >= snapPoint - this.snapThreshold &&
+                            newPositionInPixels <= snapPoint + this.snapThreshold) {
+                            newPositionInPixels = snapPoint;
+                        }
+                    });
+                }
+                this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
+            },
+            initialEvent: event
+        });
+    }
+    handleKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+            let newPosition = this.position;
+            const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);
+            event.preventDefault();
+            if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {
+                newPosition -= incr;
+            }
+            if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {
+                newPosition += incr;
+            }
+            if (event.key === 'Home') {
+                newPosition = this.primary === 'end' ? 100 : 0;
+            }
+            if (event.key === 'End') {
+                newPosition = this.primary === 'end' ? 0 : 100;
+            }
+            this.position = clamp(newPosition, 0, 100);
+        }
+    }
+    handleResize(entries) {
+        const { width, height } = entries[0].contentRect;
+        this.size = this.vertical ? height : width;
+        // Resize when a primary panel is set
+        if (this.primary) {
+            this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
+        }
+    }
+    handlePositionChange() {
+        this.cachedPositionInPixels = this.percentageToPixels(this.position);
+        this.positionInPixels = this.percentageToPixels(this.position);
+        this.emit('nile-reposition');
+    }
+    handlePositionInPixelsChange() {
+        this.position = this.pixelsToPercentage(this.positionInPixels);
+    }
+    handleVerticalChange() {
+        this.detectSize();
+    }
+    render() {
+        const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
+        const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';
+        const isRtl = false;
+        const primary = `
+      clamp(
+        0%,
+        clamp(
+          var(--min),
+          ${this.position}% - var(--divider-width) / 2,
+          var(--max)
+        ),
+        calc(100% - var(--divider-width))
+      )
+    `;
+        const secondary = 'auto';
+        if (this.primary === 'end') {
+            if (isRtl && !this.vertical) {
+                this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+            }
+            else {
+                this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+            }
+        }
+        else {
+            if (isRtl && !this.vertical) {
+                this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+            }
+            else {
+                this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+            }
+        }
+        // Unset the alt grid template property
+        this.style[gridTemplateAlt] = '';
+        return html `
+      <slot name="start" part="panel start" class="start"></slot>
+
+      <div
+        part="divider"
+        class="divider"
+        tabindex=${ifDefined(this.disabled ? undefined : '0')}
+        role="separator"
+        aria-valuenow=${this.position}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="resize"
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleDrag}
+        @touchstart=${this.handleDrag}
+      >
+        <slot name="divider"></slot>
+      </div>
+
+      <slot name="end" part="panel end" class="end"></slot>
+    `;
+    }
+};
+NileSplitPanel.styles = styles;
+__decorate([
+    query('.divider')
+], NileSplitPanel.prototype, "divider", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileSplitPanel.prototype, "position", void 0);
+__decorate([
+    property({ attribute: 'position-in-pixels', type: Number })
+], NileSplitPanel.prototype, "positionInPixels", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSplitPanel.prototype, "vertical", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSplitPanel.prototype, "disabled", void 0);
+__decorate([
+    property()
+], NileSplitPanel.prototype, "primary", void 0);
+__decorate([
+    property()
+], NileSplitPanel.prototype, "snap", void 0);
+__decorate([
+    property({ type: Number, attribute: 'snap-threshold' })
+], NileSplitPanel.prototype, "snapThreshold", void 0);
+__decorate([
+    watch('position')
+], NileSplitPanel.prototype, "handlePositionChange", null);
+__decorate([
+    watch('positionInPixels')
+], NileSplitPanel.prototype, "handlePositionInPixelsChange", null);
+__decorate([
+    watch('vertical')
+], NileSplitPanel.prototype, "handleVerticalChange", null);
+NileSplitPanel = __decorate([
+    customElement('nile-split-panel')
+], NileSplitPanel);
+export { NileSplitPanel };
+export default NileSplitPanel;
+//# sourceMappingURL=nile-split-panel.js.map

package/dist/src/nile-split-panel/nile-split-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-split-panel.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.ts"],"names":[],"mappings":"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","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 {LitElement, CSSResultArray, TemplateResult} from 'lit-element';\nimport {styles} from './nile-split-panel.css';\nimport NileElement from '../internal/nile-element';\n\n\nimport { clamp } from '../internal/math';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { drag } from '../internal/drag';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Split panels display two adjacent panels, allowing the user to reposition them.\n *\n * @event nile-reposition - Emitted when the divider's position changes.\n *\n * @slot start - Content to place in the start panel.\n * @slot end - Content to place in the end panel.\n * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.\n *\n * @csspart start - The start panel.\n * @csspart end - The end panel.\n * @csspart panel - Targets both the start and end panels.\n * @csspart divider - The divider that separates the start and end panels.\n *\n * @cssproperty [--divider-width=4px] - The width of the visible divider.\n * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is\n *  usually wider than the divider to facilitate easier dragging.\n * @cssproperty [--min=0] - The minimum allowed size of the primary panel.\n * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.\n */\n@customElement('nile-split-panel')\nexport class NileSplitPanel extends NileElement {\n\n\tstatic styles: CSSResultGroup = styles;\n\n  private cachedPositionInPixels: number;\n  private resizeObserver: ResizeObserver;\n  private size: number;\n\n  @query('.divider') divider: HTMLElement;\n\n  /**\n   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n   * container's initial size.\n   */\n  @property({ type: Number, reflect: true }) position = 50;\n\n  /** The current position of the divider from the primary panel's edge in pixels. */\n  @property({ attribute: 'position-in-pixels', type: Number }) positionInPixels: number;\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @property() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @property() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @property({ type: Number, attribute: 'snap-threshold' }) snapThreshold = 12;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));\n    this.updateComplete.then(() => this.resizeObserver.observe(this));\n\n    this.detectSize();\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this);\n  }\n\n  private detectSize() {\n    const { width, height } = this.getBoundingClientRect();\n    this.size = this.vertical ? height : width;\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private handleDrag(event: PointerEvent) {\n    const isRtl = false;\n\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n\n    drag(this, {\n      onMove: (x, y) => {\n        let newPositionInPixels = this.vertical ? y : x;\n\n        // Flip for end panels\n        if (this.primary === 'end') {\n          newPositionInPixels = this.size - newPositionInPixels;\n        }\n\n        // Check snap points\n        if (this.snap) {\n          const snaps = this.snap.split(' ');\n\n          snaps.forEach(value => {\n            let snapPoint: number;\n\n            if (value.endsWith('%')) {\n              snapPoint = this.size * (parseFloat(value) / 100);\n            } else {\n              snapPoint = parseFloat(value);\n            }\n\n            if (isRtl && !this.vertical) {\n              snapPoint = this.size - snapPoint;\n            }\n\n            if (\n              newPositionInPixels >= snapPoint - this.snapThreshold &&\n              newPositionInPixels <= snapPoint + this.snapThreshold\n            ) {\n              newPositionInPixels = snapPoint;\n            }\n          });\n        }\n\n        this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);\n      },\n      initialEvent: event\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      let newPosition = this.position;\n      const incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {\n        newPosition -= incr;\n      }\n\n      if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.position = clamp(newPosition, 0, 100);\n    }\n  }\n\n  private handleResize(entries: ResizeObserverEntry[]) {\n    const { width, height } = entries[0].contentRect;\n    this.size = this.vertical ? height : width;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n    }\n  }\n\n  @watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.emit('nile-reposition');\n  }\n\n  @watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  @watch('vertical')\n  handleVerticalChange() {\n    this.detectSize();\n  }\n\n  render() {\n    const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';\n    const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';\n    const isRtl = false;\n    const primary = `\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      if (isRtl && !this.vertical) {\n        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n      } else {\n        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n      }\n    } else {\n      if (isRtl && !this.vertical) {\n        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n      } else {\n        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n      }\n    }\n\n    // Unset the alt grid template property\n    this.style[gridTemplateAlt] = '';\n\n    return html`\n      <slot name=\"start\" part=\"panel start\" class=\"start\"></slot>\n\n      <div\n        part=\"divider\"\n        class=\"divider\"\n        tabindex=${ifDefined(this.disabled ? undefined : '0')}\n        role=\"separator\"\n        aria-valuenow=${this.position}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=\"resize\"\n        @keydown=${this.handleKeyDown}\n        @mousedown=${this.handleDrag}\n        @touchstart=${this.handleDrag}\n      >\n        <slot name=\"divider\"></slot>\n      </div>\n\n      <slot name=\"end\" part=\"panel end\" class=\"end\"></slot>\n    `;\n  }\n}\n\nexport default NileSplitPanel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-split-panel': NileSplitPanel;\n  }\n}\n"]}

package/dist/src/nile-stepper/nile-stepper.js

@@ -107,7 +107,7 @@ let NileStepper = class NileStepper extends NileElement {
             'nile-stepper': true,
             'nile-stepper--horizontal': !this.isVertical,
             'nile-stepper--vertical': this.isVertical
-        })}> 
+        })}>
 				<slot
 					@slotchange=${this.updateItems}
 				></slot>

package/dist/src/nile-stepper/nile-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.ts"],"names":[],"mappings":"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","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 { LitElement, html, property, CSSResultArray, TemplateResult } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-stepper.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile stepper component.\n *\n * @tag nile-stepper\n *\n */\n@customElement('nile-stepper')\nexport class NileStepper extends NileElement {\n\n\t@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;\n\t@property({ type: Boolean, attribute: 'content-below' }) contentBelow: boolean = false;\n\t@property({ type: Number, attribute: 'current-step' }) currentStep: number = 0;\n\t@property({ type: Number, attribute: 'completed-step' }) completedStep: number = 0;\n\t@property({ type: String, attribute: 'size' }) size: 'sm' | 'md' | 'lg' = 'md';\n\t@property() icon: string = 'tick';\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.updateComplete.then(() => {\n\t\t\tthis.updateItems();\n\t\t});\n\t}\n\n\t@watch('currentStep')\n\thandleCurrentStepChanges() {\n\t\tthis.updateItems();\n\t\tthis.emit('nile-current-change', { value: this.currentStep });\n\t}\n\n\t@watch('completedStep')\n\thandleCompletedStepChanges() {\n\t\tthis.updateItems()\n\t\tthis.emit('nile-completed-change', { value: this.completedStep });\n\t}\n\n\tprivate updateItems() {\n\t\tconst items: any = [...this.querySelectorAll(this.isVertical?'nile-vertical-stepper-item':'nile-stepper-item')];\n\t\tif (!items.length) return;\n\t\tconst haveFlex = items.length < 3;\n\n\t\tconst current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;\n\t\tconst calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;\n\t\tconst completed = this.completedStep > items.length ? 0 : this.completedStep;\n\n\t\titems.forEach((el: any, index: number) => {\n\t\t\t// set item is complete and is current values\n\t\t\tif (index + 1 < current) {\n\t\t\t\tel.isComplete = true;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\t\t\telse if (index + 1 == current) {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = true;\n\t\t\t}\n\t\t\telse {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\n\t\t\t// Set isLast and isFirst\n\t\t\tif (index == 0) el.isFirst = true;\n\t\t\tif (index == items.length - 1) el.isLast = true;\n\n\t\t\t// setting default values\n\t\t\tel.currentStepValue = current;\n\t\t\tel.calculatedCompletedStepValue = calculatedCompleted;\n\t\t\tel.completedStepValue = completed;\n\n\t\t\tel.icon = this.icon;\n\t\t\tel.size = this.size;\n\t\t\tel.value = index + 1;\n\t\t\tel.contentBelow = this.contentBelow\n\t\t\tif (index == 0 || index == items.length - 1) {\n\t\t\t\tel.haveFlex = haveFlex;\n\t\t\t}\n\t\t})\n\t}\n\n\t/**\n\t * The styles for nile-stepper\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div class=${classMap({\n\t\t\t\t'nile-stepper':true,\n\t\t\t\t'nile-stepper--horizontal':!this.isVertical,\n\t\t\t\t'nile-stepper--vertical':this.isVertical\n\t\t\t})}> \n\t\t\t\t<slot\n\t\t\t\t\t@slotchange=${this.updateItems}\n\t\t\t\t></slot>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepper;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper': NileStepper;\n\t}\n}"]}
+{"version":3,"file":"nile-stepper.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAc,IAAI,EAAE,QAAQ,EAAkC,MAAM,aAAa,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QAE8C,eAAU,GAAY,KAAK,CAAC;QACvB,iBAAY,GAAY,KAAK,CAAC;QAChC,gBAAW,GAAW,CAAC,CAAC;QACtB,kBAAa,GAAW,CAAC,CAAC;QACpC,SAAI,GAAuB,IAAI,CAAC;QACnE,SAAI,GAAW,MAAM,CAAC;QAgGlC,gBAAgB;IACjB,CAAC;IA/FA,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;IACJ,CAAC;IAGD,wBAAwB;QACvB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IAC/D,CAAC;IAGD,0BAA0B;QACzB,IAAI,CAAC,WAAW,EAAE,CAAA;QAClB,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IACnE,CAAC;IAEO,WAAW;QAClB,MAAM,KAAK,GAAQ,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAA,CAAC,CAAA,4BAA4B,CAAA,CAAC,CAAA,mBAAmB,CAAC,CAAC,CAAC;QAChH,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAElC,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QAClG,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QACtI,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAE7E,KAAK,CAAC,OAAO,CAAC,CAAC,EAAO,EAAE,KAAa,EAAE,EAAE;YACxC,6CAA6C;YAC7C,IAAI,KAAK,GAAG,CAAC,GAAG,OAAO,EAAE;gBACxB,EAAE,CAAC,UAAU,GAAG,IAAI,CAAC;gBACrB,EAAE,CAAC,SAAS,GAAG,KAAK,CAAC;aACrB;iBACI,IAAI,KAAK,GAAG,CAAC,IAAI,OAAO,EAAE;gBAC9B,IAAI,KAAK,GAAG,CAAC,IAAI,mBAAmB;oBAAE,EAAE,CAAC,UAAU,GAAG,IAAI,CAAC;;oBACtD,EAAE,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC3B,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC;aACpB;iBACI;gBACJ,IAAI,KAAK,GAAG,CAAC,IAAI,mBAAmB;oBAAE,EAAE,CAAC,UAAU,GAAG,IAAI,CAAC;;oBACtD,EAAE,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC3B,EAAE,CAAC,SAAS,GAAG,KAAK,CAAC;aACrB;YAED,yBAAyB;YACzB,IAAI,KAAK,IAAI,CAAC;gBAAE,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC;YAClC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;gBAAE,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC;YAEhD,yBAAyB;YACzB,EAAE,CAAC,gBAAgB,GAAG,OAAO,CAAC;YAC9B,EAAE,CAAC,4BAA4B,GAAG,mBAAmB,CAAC;YACtD,EAAE,CAAC,kBAAkB,GAAG,SAAS,CAAC;YAElC,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACpB,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACpB,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC;YACrB,EAAE,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;YACnC,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC5C,EAAE,CAAC,QAAQ,GAAG,QAAQ,CAAC;aACvB;QACF,CAAC,CAAC,CAAA;IACH,CAAC;IAED;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;gBACG,QAAQ,CAAC;YACrB,cAAc,EAAC,IAAI;YACnB,0BAA0B,EAAC,CAAC,IAAI,CAAC,UAAU;YAC3C,wBAAwB,EAAC,IAAI,CAAC,UAAU;SACxC,CAAC;;mBAEc,IAAI,CAAC,WAAW;;;IAG/B,CAAC;IACJ,CAAC;CAGD,CAAA;AAtGoD;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;+CAA6B;AACvB;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDAA+B;AAChC;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDAAyB;AACtB;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAA2B;AACpC;IAA9C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;yCAAiC;AACnE;IAAX,QAAQ,EAAE;yCAAuB;AAUlC;IADC,KAAK,CAAC,aAAa,CAAC;2DAIpB;AAGD;IADC,KAAK,CAAC,eAAe,CAAC;6DAItB;AA1BW,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAwGvB;SAxGY,WAAW;AA0GxB,eAAe,WAAW,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 { LitElement, html, property, CSSResultArray, TemplateResult } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-stepper.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { classMap } from 'lit/directives/class-map.js';\n\n\n/**\n * Nile stepper component.\n *\n * @tag nile-stepper\n *\n */\n@customElement('nile-stepper')\nexport class NileStepper extends NileElement {\n\n\t@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;\n\t@property({ type: Boolean, attribute: 'content-below' }) contentBelow: boolean = false;\n\t@property({ type: Number, attribute: 'current-step' }) currentStep: number = 0;\n\t@property({ type: Number, attribute: 'completed-step' }) completedStep: number = 0;\n\t@property({ type: String, attribute: 'size' }) size: 'sm' | 'md' | 'lg' = 'md';\n\t@property() icon: string = 'tick';\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.updateComplete.then(() => {\n\t\t\tthis.updateItems();\n\t\t});\n\t}\n\n\t@watch('currentStep')\n\thandleCurrentStepChanges() {\n\t\tthis.updateItems();\n\t\tthis.emit('nile-current-change', { value: this.currentStep });\n\t}\n\n\t@watch('completedStep')\n\thandleCompletedStepChanges() {\n\t\tthis.updateItems()\n\t\tthis.emit('nile-completed-change', { value: this.completedStep });\n\t}\n\n\tprivate updateItems() {\n\t\tconst items: any = [...this.querySelectorAll(this.isVertical?'nile-vertical-stepper-item':'nile-stepper-item')];\n\t\tif (!items.length) return;\n\t\tconst haveFlex = items.length < 3;\n\n\t\tconst current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;\n\t\tconst calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;\n\t\tconst completed = this.completedStep > items.length ? 0 : this.completedStep;\n\n\t\titems.forEach((el: any, index: number) => {\n\t\t\t// set item is complete and is current values\n\t\t\tif (index + 1 < current) {\n\t\t\t\tel.isComplete = true;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\t\t\telse if (index + 1 == current) {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = true;\n\t\t\t}\n\t\t\telse {\n\t\t\t\tif (index + 1 <= calculatedCompleted) el.isComplete = true;\n\t\t\t\telse el.isComplete = false;\n\t\t\t\tel.isCurrent = false;\n\t\t\t}\n\n\t\t\t// Set isLast and isFirst\n\t\t\tif (index == 0) el.isFirst = true;\n\t\t\tif (index == items.length - 1) el.isLast = true;\n\n\t\t\t// setting default values\n\t\t\tel.currentStepValue = current;\n\t\t\tel.calculatedCompletedStepValue = calculatedCompleted;\n\t\t\tel.completedStepValue = completed;\n\n\t\t\tel.icon = this.icon;\n\t\t\tel.size = this.size;\n\t\t\tel.value = index + 1;\n\t\t\tel.contentBelow = this.contentBelow\n\t\t\tif (index == 0 || index == items.length - 1) {\n\t\t\t\tel.haveFlex = haveFlex;\n\t\t\t}\n\t\t})\n\t}\n\n\t/**\n\t * The styles for nile-stepper\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div class=${classMap({\n\t\t\t\t'nile-stepper':true,\n\t\t\t\t'nile-stepper--horizontal':!this.isVertical,\n\t\t\t\t'nile-stepper--vertical':this.isVertical\n\t\t\t})}>\n\t\t\t\t<slot\n\t\t\t\t\t@slotchange=${this.updateItems}\n\t\t\t\t></slot>\n\t\t\t</div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileStepper;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'nile-stepper': NileStepper;\n\t}\n}\n"]}