@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/internal/resizable-table-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-table-helper.js","sourceRoot":"","sources":["../../../src/internal/resizable-table-helper.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\n/**\n * Resizable Helper Utility\n * Provides common functionality for resizable table columns\n */\n\nexport interface ResizeOptions {\n  minWidth?: number;\n  startX: number;\n  startWidth: number;\n  element: HTMLElement;\n}\n\nexport interface ColumnResizeData {\n  columnIndex: number;\n  newWidth: number;\n}\n\n/**\n * Handles the start of a resize operation\n * @param e Mouse event\n * @param options Resize configuration options\n * @returns Cleanup function to remove event listeners\n */\nexport function handleResizeStart(e: MouseEvent, options: ResizeOptions): () => void {\n  e.preventDefault();\n  e.stopPropagation();\n  \n  const { minWidth = 50, startX, startWidth, element } = options;\n  const resizer = e.target as HTMLElement;\n  \n  resizer.classList.add('resizing');\n\n  const onMouseMove = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    \n    const delta = e.pageX - startX;\n    const newWidth = Math.max(minWidth, startWidth + delta);\n\n    element.style.width = newWidth + 'px';\n\n    synchronizeColumnWidth(element, newWidth);\n  };\n\n  const onMouseUp = () => {\n    resizer.classList.remove('resizing');\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n\n  document.addEventListener('mousemove', onMouseMove);\n  document.addEventListener('mouseup', onMouseUp);\n\n  return () => {\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n  };\n}\n\n/**\n * Gets the column index of an element within its table row\n * @param element The table cell or header element\n * @param selector The CSS selector for the column elements\n * @returns Column index (0-based)\n */\nexport function getColumnIndex(element: HTMLElement, selector: string): number {\n  const tableRow = element.closest('nile-table-row');\n  if (tableRow) {\n    const columns = tableRow.querySelectorAll(selector);\n    return Array.from(columns).indexOf(element);\n  }\n  return 0;\n}\n\n/**\n * Synchronizes the width of all cells in the same column\n * @param sourceElement The element that was resized\n * @param newWidth The new width to apply\n */\nexport function synchronizeColumnWidth(sourceElement: HTMLElement, newWidth: number): void {\n  const tableBody = sourceElement.closest('nile-table-body');\n  if (!tableBody) return;\n\n  const isHeader = sourceElement.tagName.toLowerCase() === 'nile-table-header-item';\n  const selector = isHeader ? 'nile-table-header-item' : 'nile-table-cell-item';\n  const targetSelector = isHeader ? 'nile-table-cell-item' : 'nile-table-cell-item';\n  \n  const columnIndex = getColumnIndex(sourceElement, selector);\n  const rows = tableBody.querySelectorAll('nile-table-row');\n  \n  rows.forEach(row => {\n    const cells = row.querySelectorAll(targetSelector);\n    if (cells[columnIndex]) {\n      cells[columnIndex].style.width = newWidth + 'px';\n    }\n  });\n}\n\n/**\n * Resets all column widths in a table to their default values\n * @param tableBody The table body element to reset\n */\nexport function resetAllColumnWidths(tableBody: HTMLElement): void {\n  const headerItems = tableBody.querySelectorAll('nile-table-header-item');\n  const cellItems = tableBody.querySelectorAll('nile-table-cell-item');\n  \n  headerItems.forEach(header => {\n    header.style.removeProperty('width');\n  });\n  \n  cellItems.forEach(cell => {\n    cell.style.removeProperty('width');\n  });\n}\n\n/**\n * Checks if an element has the resizable attribute\n * @param element The element to check\n * @returns True if the element is resizable\n */\nexport function isResizable(element: HTMLElement): boolean {\n  return element.hasAttribute('resizable');\n}\n\n/**\n * Creates a resize handler function for use in component event listeners\n * @param element The element to make resizable\n * @param minWidth Minimum width constraint\n * @returns Event handler function\n */\nexport function createResizeHandler(element: HTMLElement, minWidth: number = 50): (e: MouseEvent) => void {\n  return (e: MouseEvent) => {\n    const options: ResizeOptions = {\n      minWidth,\n      startX: e.pageX,\n      startWidth: element.offsetWidth,\n      element\n    };\n    \n    handleResizeStart(e, options);\n  };\n}\n\n/**\n * Detects if any columns in a table are resizable\n * @param tableBody The table body element\n * @returns True if any columns have resizable attribute\n */\nexport function hasResizableColumns(tableBody: HTMLElement): boolean {\n  const directChildren = Array.from(tableBody.children);\n  \n  const hasResizableHeaders = directChildren.some(child => {\n    if (child.tagName.toLowerCase() === 'nile-table-header-item') {\n      return child.hasAttribute('resizable');\n    }\n    return false;\n  });\n  \n  const hasResizableCells = directChildren.some(child => {\n    if (child.tagName.toLowerCase() === 'nile-table-cell-item') {\n      return child.hasAttribute('resizable');\n    }\n    return false;\n  });\n  \n  return hasResizableHeaders || hasResizableCells;\n} \n"]}

package/dist/src/internal/resizable-table-styles.js

@@ -0,0 +1,165 @@
+/**
+ * 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';
+/**
+ * Resizable Styles Utility
+ * Centralized styles for resizable table functionality
+ */
+export const resizableTableStyles = css `
+  :host([resizable]) .base {
+    overflow: unset;
+  }
+  :host([resizable]) .nile__table__body {
+    display: table;
+    table-layout: fixed;
+    border-collapse: collapse;
+    width: 100%;
+    position: relative;
+  }
+`;
+export const resizableHeaderStyles = css `
+  :host([resizable]) .headers {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    position: relative;
+  }
+
+  :host([resizable]) .header__item__wrapper {
+    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    position: relative;
+  }
+
+  :host([resizable]) .headers {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+export const resizerStyles = css `
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: 0px;
+    bottom: 0px;
+    width: 8px;
+    cursor: col-resize;
+    user-select: none;
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    right: 0px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    opacity: 0.8;
+  }
+
+  .resizer:hover {
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  .resizer:hover::before {
+    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
+    opacity: 1;
+  }
+
+  .resizer.resizing {
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .resizer.resizing::before {
+    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
+    opacity: 1;
+    width: 3px;
+  }
+`;
+export const resizableCellStyles = css `
+  :host([resizable]) .column {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+export const headerResizerStyles = css `
+  .resizer {
+    position: absolute;
+    right: -2px;
+    top: -1000px;
+    bottom: -1000px;
+    width: 8px;
+    cursor: ew-resize;
+    user-select: none;
+    transition: background-color 0.2s;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  :host([resizable]):hover .resizer {
+    opacity: 1;
+  }
+
+  .resizer::before {
+    content: '';
+    position: absolute;
+    height: 100%;
+    opacity: 0.8;
+  }
+
+  .resizer.resizing {
+    border-right: 4px double var(--nile-colors-neutral-400);
+    background-color: transparent;
+    opacity: 1;
+  }
+
+  :host([resizable]) .headers {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+export const resizableSlotStyles = css `
+  :host([resizable]) ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  :host([resizable]) ::slotted(span),
+  :host([resizable]) ::slotted(div),
+  :host([resizable]) ::slotted(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;
+export const tableLayoutStyles = css `
+  .nile__table__body[resizable] {
+    table-layout: fixed;
+  }
+`;
+//# sourceMappingURL=resizable-table-styles.js.map

package/dist/src/internal/resizable-table-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-table-styles.js","sourceRoot":"","sources":["../../../src/internal/resizable-table-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;CAWtC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBvC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoD/B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;CAOrC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCrC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBrC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;CAInC,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 * Resizable Styles Utility\n * Centralized styles for resizable table functionality\n */\n\nexport const resizableTableStyles = css`\n  :host([resizable]) .base {\n    overflow: unset;\n  }\n  :host([resizable]) .nile__table__body {\n    display: table;\n    table-layout: fixed;\n    border-collapse: collapse;\n    width: 100%;\n    position: relative;\n  }\n`;\n\nexport const resizableHeaderStyles = css`\n  :host([resizable]) .headers {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));\n    position: relative;\n  }\n\n  :host([resizable]) .header__item__wrapper {\n    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    position: relative;\n  }\n\n  :host([resizable]) .headers {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const resizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: 0;\n    top: 0px;\n    bottom: 0px;\n    width: 8px;\n    cursor: col-resize;\n    user-select: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    right: 0px;\n    top: 0;\n    width: 2px;\n    height: 100%;\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    opacity: 0.8;\n  }\n\n  .resizer:hover {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .resizer:hover::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n  }\n\n  .resizer.resizing {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .resizer.resizing::before {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    opacity: 1;\n    width: 3px;\n  }\n`;\n\nexport const resizableCellStyles = css`\n  :host([resizable]) .column {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const headerResizerStyles = css`\n  .resizer {\n    position: absolute;\n    right: -2px;\n    top: -1000px;\n    bottom: -1000px;\n    width: 8px;\n    cursor: ew-resize;\n    user-select: none;\n    transition: background-color 0.2s;\n    z-index: 10;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n\n  :host([resizable]):hover .resizer {\n    opacity: 1;\n  }\n\n  .resizer::before {\n    content: '';\n    position: absolute;\n    height: 100%;\n    opacity: 0.8;\n  }\n\n  .resizer.resizing {\n    border-right: 4px double var(--nile-colors-neutral-400);\n    background-color: transparent;\n    opacity: 1;\n  }\n\n  :host([resizable]) .headers {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nexport const resizableSlotStyles = css`\n  :host([resizable]) ::slotted(*) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n\n  :host([resizable]) ::slotted(span),\n  :host([resizable]) ::slotted(div),\n  :host([resizable]) ::slotted(p) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n\nexport const tableLayoutStyles = css`\n  .nile__table__body[resizable] {\n    table-layout: fixed;\n  }\n`;\n"]}

package/dist/src/internal/scroll.js

@@ -0,0 +1,58 @@
+import { getOffset } from './offset';
+const locks = new Set();
+/** Returns the width of the document's scrollbar */
+function getScrollbarWidth() {
+    const documentWidth = document.documentElement.clientWidth;
+    return Math.abs(window.innerWidth - documentWidth);
+}
+/**
+ * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+ * without premature unlocking.
+ */
+export function lockBodyScrolling(lockingEl) {
+    locks.add(lockingEl);
+    // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from
+    // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.
+    if (!document.body.classList.contains('nile-scroll-lock')) {
+        const scrollbarWidth = getScrollbarWidth(); // must be measured before the `nile-scroll-lock` class is applied
+        document.body.classList.add('nile-scroll-lock');
+        document.body.style.setProperty('--nile-scroll-lock-size', `${scrollbarWidth}px`);
+    }
+}
+/**
+ * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+ */
+export function unlockBodyScrolling(lockingEl) {
+    locks.delete(lockingEl);
+    if (locks.size === 0) {
+        document.body.classList.remove('nile-scroll-lock');
+        document.body.style.removeProperty('--nile-scroll-lock-size');
+    }
+}
+/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */
+export function scrollIntoView(element, container, direction = 'vertical', behavior = 'smooth') {
+    const offset = getOffset(element, container);
+    const offsetTop = offset.top + container.scrollTop;
+    const offsetLeft = offset.left + container.scrollLeft;
+    const minX = container.scrollLeft;
+    const maxX = container.scrollLeft + container.offsetWidth;
+    const minY = container.scrollTop;
+    const maxY = container.scrollTop + container.offsetHeight;
+    if (direction === 'horizontal' || direction === 'both') {
+        if (offsetLeft < minX) {
+            container.scrollTo({ left: offsetLeft, behavior });
+        }
+        else if (offsetLeft + element.clientWidth > maxX) {
+            container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+        }
+    }
+    if (direction === 'vertical' || direction === 'both') {
+        if (offsetTop < minY) {
+            container.scrollTo({ top: offsetTop, behavior });
+        }
+        else if (offsetTop + element.clientHeight > maxY) {
+            container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+        }
+    }
+}
+//# sourceMappingURL=scroll.js.map

package/dist/src/internal/scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../src/internal/scroll.ts"],"names":[],"mappings":"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","sourcesContent":["import { getOffset } from './offset';\n\nconst locks = new Set();\n\n/** Returns the width of the document's scrollbar */\nfunction getScrollbarWidth() {\n  const documentWidth = document.documentElement.clientWidth;\n  return Math.abs(window.innerWidth - documentWidth);\n}\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n\n  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from\n  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.\n  if (!document.body.classList.contains('nile-scroll-lock')) {\n    const scrollbarWidth = getScrollbarWidth(); // must be measured before the `nile-scroll-lock` class is applied\n    document.body.classList.add('nile-scroll-lock');\n    document.body.style.setProperty('--nile-scroll-lock-size', `${scrollbarWidth}px`);\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('nile-scroll-lock');\n    document.body.style.removeProperty('--nile-scroll-lock-size');\n  }\n}\n\n/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"]}

package/dist/src/internal/slot.js

@@ -0,0 +1,82 @@
+/** A reactive controller that determines when slots exist. */
+export class HasSlotController {
+    constructor(host, ...slotNames) {
+        this.slotNames = [];
+        (this.host = host).addController(this);
+        this.slotNames = slotNames;
+        this.handleSlotChange = this.handleSlotChange.bind(this);
+    }
+    hasDefaultSlot() {
+        return [...this.host.childNodes].some(node => {
+            if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
+                return true;
+            }
+            if (node.nodeType === node.ELEMENT_NODE) {
+                const el = node;
+                const tagName = el.tagName.toLowerCase();
+                // Ignore visually hidden elements since they aren't rendered
+                if (tagName === 'nile-visually-hidden') {
+                    return false;
+                }
+                // If it doesn't have a slot attribute, it's part of the default slot
+                if (!el.hasAttribute('slot')) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+    hasNamedSlot(name) {
+        return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+    }
+    test(slotName) {
+        return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+    }
+    hostConnected() {
+        this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    }
+    hostDisconnected() {
+        this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    handleSlotChange(event) {
+        const slot = event.target;
+        if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
+            this.host.requestUpdate();
+        }
+    }
+}
+/**
+ * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+ * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+ */
+export function getInnerHTML(slot) {
+    const nodes = slot.assignedNodes({ flatten: true });
+    let html = '';
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            html += node.outerHTML;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            html += node.textContent;
+        }
+    });
+    return html;
+}
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+export function getTextContent(slot) {
+    if (!slot) {
+        return '';
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = '';
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent;
+        }
+    });
+    return text;
+}
+//# sourceMappingURL=slot.js.map

package/dist/src/internal/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","sourceRoot":"","sources":["../../../src/internal/slot.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/** A reactive controller that determines when slots exist. */\nexport class HasSlotController implements ReactiveController {\n  host: ReactiveControllerHost & Element;\n  slotNames: string[] = [];\n\n  constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n    (this.host = host).addController(this);\n    this.slotNames = slotNames;\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  private hasDefaultSlot() {\n    return [...this.host.childNodes].some(node => {\n      if (node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '') {\n        return true;\n      }\n\n      if (node.nodeType === node.ELEMENT_NODE) {\n        const el = node as HTMLElement;\n        const tagName = el.tagName.toLowerCase();\n\n        // Ignore visually hidden elements since they aren't rendered\n        if (tagName === 'nile-visually-hidden') {\n          return false;\n        }\n\n        // If it doesn't have a slot attribute, it's part of the default slot\n        if (!el.hasAttribute('slot')) {\n          return true;\n        }\n      }\n\n      return false;\n    });\n  }\n\n  private hasNamedSlot(name: string) {\n    return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n  }\n\n  test(slotName: string) {\n    return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n  }\n\n  hostConnected() {\n    this.host.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  hostDisconnected() {\n    this.host.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {\n      this.host.requestUpdate();\n    }\n  }\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n */\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement | undefined | null): string {\n  if (!slot) {\n    return '';\n  }\n  const nodes = slot.assignedNodes({ flatten: true });\n  let text = '';\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n"]}

package/dist/src/internal/string.js

@@ -0,0 +1,5 @@
+/** Converts the first letter of a string to uppercase */
+export function uppercaseFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+//# sourceMappingURL=string.js.map

package/dist/src/internal/string.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.js","sourceRoot":"","sources":["../../../src/internal/string.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,UAAU,oBAAoB,CAAC,MAAc;IACjD,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAC1D,CAAC","sourcesContent":["/** Converts the first letter of a string to uppercase */\nexport function uppercaseFirstLetter(string: string) {\n  return string.charAt(0).toUpperCase() + string.slice(1);\n}\n"]}

package/dist/src/internal/tabbable.js

@@ -0,0 +1,65 @@
+/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
+function isTabbable(el) {
+    const tag = el.tagName.toLowerCase();
+    // Elements with a -1 tab index are not tabbable
+    if (el.getAttribute('tabindex') === '-1') {
+        return false;
+    }
+    // Elements with a disabled attribute are not tabbable
+    if (el.hasAttribute('disabled')) {
+        return false;
+    }
+    // Elements with aria-disabled are not tabbable
+    if (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') !== 'false') {
+        return false;
+    }
+    // Radios without a checked attribute are not tabbable
+    if (tag === 'input' && el.getAttribute('type') === 'radio' && !el.hasAttribute('checked')) {
+        return false;
+    }
+    // Elements that are hidden have no offsetParent and are not tabbable
+    if (el.offsetParent === null) {
+        return false;
+    }
+    // Elements without visibility are not tabbable
+    if (window.getComputedStyle(el).visibility === 'hidden') {
+        return false;
+    }
+    // Audio and video elements with the controls attribute are tabbable
+    if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
+        return true;
+    }
+    // Elements with a tabindex other than -1 are tabbable
+    if (el.hasAttribute('tabindex')) {
+        return true;
+    }
+    // Elements with a contenteditable attribute are tabbable
+    if (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false') {
+        return true;
+    }
+    // At this point, the following elements are considered tabbable
+    return ['button', 'input', 'select', 'textarea', 'a', 'audio', 'video', 'summary'].includes(tag);
+}
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export function getTabbableBoundary(root) {
+    const allElements = [];
+    function walk(el) {
+        if (el instanceof HTMLElement) {
+            allElements.push(el);
+            if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
+                walk(el.shadowRoot);
+            }
+        }
+        [...el.children].forEach((e) => walk(e));
+    }
+    // Collect all elements including the root
+    walk(root);
+    // Find the first and last tabbable elements
+    const start = allElements.find(el => isTabbable(el)) ?? null;
+    const end = allElements.reverse().find(el => isTabbable(el)) ?? null;
+    return { start, end };
+}
+//# sourceMappingURL=tabbable.js.map

package/dist/src/internal/tabbable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbable.js","sourceRoot":"","sources":["../../../src/internal/tabbable.ts"],"names":[],"mappings":"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","sourcesContent":["/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  // Elements with a -1 tab index are not tabbable\n  if (el.getAttribute('tabindex') === '-1') {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // Elements with aria-disabled are not tabbable\n  if (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') !== 'false') {\n    return false;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (tag === 'input' && el.getAttribute('type') === 'radio' && !el.hasAttribute('checked')) {\n    return false;\n  }\n\n  // Elements that are hidden have no offsetParent and are not tabbable\n  if (el.offsetParent === null) {\n    return false;\n  }\n\n  // Elements without visibility are not tabbable\n  if (window.getComputedStyle(el).visibility === 'hidden') {\n    return false;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false') {\n    return true;\n  }\n\n  // At this point, the following elements are considered tabbable\n  return ['button', 'input', 'select', 'textarea', 'a', 'audio', 'video', 'summary'].includes(tag);\n}\n\n/**\n * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single\n * element because it short-circuits after finding the first and last ones.\n */\nexport function getTabbableBoundary(root: HTMLElement | ShadowRoot) {\n  const allElements: HTMLElement[] = [];\n\n  function walk(el: HTMLElement | ShadowRoot) {\n    if (el instanceof HTMLElement) {\n      allElements.push(el);\n\n      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {\n        walk(el.shadowRoot);\n      }\n    }\n\n    [...el.children].forEach((e: HTMLElement) => walk(e));\n  }\n\n  // Collect all elements including the root\n  walk(root);\n\n  // Find the first and last tabbable elements\n  const start = allElements.find(el => isTabbable(el)) ?? null;\n  const end = allElements.reverse().find(el => isTabbable(el)) ?? null;\n\n  return { start, end };\n}\n"]}

package/dist/src/internal/watch.js

@@ -0,0 +1,40 @@
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export function watch(propertyName, options) {
+    const resolvedOptions = {
+        waitUntilFirstUpdate: false,
+        ...options
+    };
+    return (proto, decoratedFnName) => {
+        // @ts-expect-error - update is a protected property
+        const { update } = proto;
+        const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+        // @ts-expect-error - update is a protected property
+        proto.update = function (changedProps) {
+            watchedProperties.forEach(property => {
+                const key = property;
+                if (changedProps.has(key)) {
+                    const oldValue = changedProps.get(key);
+                    const newValue = this[key];
+                    if (oldValue !== newValue) {
+                        if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                            this[decoratedFnName](oldValue, newValue);
+                        }
+                    }
+                }
+            });
+            update.call(this, changedProps);
+        };
+    };
+}
+//# sourceMappingURL=watch.js.map

package/dist/src/internal/watch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watch.js","sourceRoot":"","sources":["../../../src/internal/watch.ts"],"names":[],"mappings":"AAiBA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,KAAK,CAAC,YAA+B,EAAE,OAAsB;IAC3E,MAAM,eAAe,GAA2B;QAC9C,oBAAoB,EAAE,KAAK;QAC3B,GAAG,OAAO;KACX,CAAC;IACF,OAAO,CAA+B,KAAgB,EAAE,eAAqD,EAAE,EAAE;QAC/G,oDAAoD;QACpD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;QACzB,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;QAEtF,oDAAoD;QACpD,KAAK,CAAC,MAAM,GAAG,UAA2B,YAA8D;YACtG,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACnC,MAAM,GAAG,GAAG,QAA2B,CAAC;gBACxC,IAAI,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC1B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;oBACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;oBAE3B,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;wBAC1B,IAAI,CAAC,eAAe,CAAC,oBAAoB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;4BAC5D,IAAI,CAAC,eAAe,CAA8B,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;wBAC1E,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import type { LitElement } from 'lit';\n\ntype UpdateHandler = (prev?: unknown, next?: unknown) => void;\n\ntype NonUndefined<A> = A extends undefined ? never : A;\n\ntype UpdateHandlerFunctionKeys<T extends object> = {\n  [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;\n}[keyof T];\n\ninterface WatchOptions {\n  /**\n   * If true, will only start watching after the initial update/render\n   */\n  waitUntilFirstUpdate?: boolean;\n}\n\n/**\n * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an\n * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the\n * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.\n *\n * Usage:\n *\n * @watch('propName')\n * handlePropChange(oldValue, newValue) {\n *   ...\n * }\n */\nexport function watch(propertyName: string | string[], options?: WatchOptions) {\n  const resolvedOptions: Required<WatchOptions> = {\n    waitUntilFirstUpdate: false,\n    ...options\n  };\n  return <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => {\n    // @ts-expect-error - update is a protected property\n    const { update } = proto;\n    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];\n\n    // @ts-expect-error - update is a protected property\n    proto.update = function (this: ElemClass, changedProps: Map<keyof ElemClass, ElemClass[keyof ElemClass]>) {\n      watchedProperties.forEach(property => {\n        const key = property as keyof ElemClass;\n        if (changedProps.has(key)) {\n          const oldValue = changedProps.get(key);\n          const newValue = this[key];\n\n          if (oldValue !== newValue) {\n            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {\n              (this[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);\n            }\n          }\n        }\n      });\n\n      update.call(this, changedProps);\n    };\n  };\n}\n"]}

package/dist/src/nile-accordion/index.js

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

package/dist/src/nile-accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { NileAccordion } from './nile-accordion';\n"]}

package/dist/src/nile-accordion/nile-accordian.test.js

@@ -0,0 +1,103 @@
+import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';
+import './nile-accordion';
+import { NileAccordion } from './nile-accordion';
+import Sinon from 'sinon';
+describe('NileAccordion', () => {
+    it('should render correctly', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
+        expect(el).to.be.instanceOf(NileAccordion);
+        expect(el.shadowRoot).not.to.be.null;
+        expect(el.summary).to.equal('Test Summary');
+    });
+    it('should initialize closed by default', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
+        expect(el.open).to.be.false;
+        const body = el.shadowRoot?.querySelector('.accordian__body');
+        expect(body?.hidden).to.be.true;
+    });
+    it('should open when clicked', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        header.click();
+        await elementUpdated(el);
+        expect(el.open).to.be.true;
+        const body = el.shadowRoot?.querySelector('.accordian__body');
+        expect(body?.hidden).to.be.false;
+    });
+    it('should emit "nile-show" and "nile-after-show" when opened', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
+        const showSpy = Sinon.spy(el, 'emit');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        setTimeout(() => header.click());
+        await oneEvent(el, 'nile-after-show');
+        expect(showSpy.calledWith('nile-show')).to.be.true;
+        expect(showSpy.calledWith('nile-after-show')).to.be.true;
+    });
+    it('should emit "nile-hide" and "nile-after-hide" when closed', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" open></nile-accordion>`);
+        const hideSpy = Sinon.spy(el, 'emit');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        setTimeout(() => header.click());
+        await oneEvent(el, 'nile-after-hide');
+        expect(hideSpy.calledWith('nile-hide')).to.be.true;
+        expect(hideSpy.calledWith('nile-after-hide')).to.be.true;
+    });
+    it('should be disabled when the "disabled" property is set', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" disabled></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        header.click();
+        await elementUpdated(el);
+        expect(el.open).to.be.false;
+    });
+    it('should handle keyboard interaction (Enter and Space)', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+        header.dispatchEvent(enterEvent);
+        await elementUpdated(el);
+        expect(el.open).to.be.true;
+        const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
+        header.dispatchEvent(spaceEvent);
+        await elementUpdated(el);
+        expect(el.open).to.be.false;
+    });
+    it('should handle ArrowUp/ArrowLeft to close and ArrowDown/ArrowRight to open', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+        header.dispatchEvent(arrowDownEvent);
+        await elementUpdated(el);
+        expect(el.open).to.be.true;
+        const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+        header.dispatchEvent(arrowUpEvent);
+        await elementUpdated(el);
+        expect(el.open).to.be.false;
+    });
+    it('should apply the "variant" class based on the variant property', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" variant="dark"></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        expect(header).to.have.class('accordian__header--dark');
+    });
+    it('should apply the correct size class based on the size property', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" size="lg"></nile-accordion>`);
+        const container = el.shadowRoot?.querySelector('.accordian');
+        expect(container).to.have.class('accordian--lg');
+    });
+    it('should apply the correct expand icon placement class based on the expandIconPlacement property', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" expandIconPlacement="left"></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        expect(header).to.have.class('accordian__header--arrow-left');
+    });
+    it('should animate when opening and closing', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
+        const animateSpy = Sinon.spy(el, 'handleOpenChange');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        header.click();
+        await elementUpdated(el);
+        expect(animateSpy.called).to.be.true;
+        header.click();
+        await elementUpdated(el);
+        expect(animateSpy.calledTwice).to.be.true;
+    });
+});
+//# sourceMappingURL=nile-accordian.test.js.map