@aquera/nile-elements 0.0.79 → 0.0.81

package/package.json

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

package/src/index.ts

@@ -63,4 +63,5 @@ export { NileStepperItem } from './nile-stepper-item';
 export { NileStepper } from './nile-stepper';
 export { NileHeroHeader } from './nile-hero-header';
 export { NileVerticalStepperItem } from './nile-vertical-stepper-item';
-export { NileFormatDate } from './nile-format-date';
+export { NileFormatDate } from './nile-format-date';
+export { NileSplitPanel } from './nile-split-panel';

package/src/internal/drag.ts

@@ -0,0 +1,45 @@
+interface DragOptions {
+  /** Callback that runs as dragging occurs. */
+  onMove: (x: number, y: number) => void;
+  /** Callback that runs when dragging stops. */
+  onStop: () => void;
+  /**
+   * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This
+   * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial "click" to activate
+   * a drag (e.g. positioning a handle initially at the click target).
+   */
+  initialEvent: PointerEvent;
+}
+
+/** Begins listening for dragging. */
+export function drag(container: HTMLElement, options?: Partial<DragOptions>) {
+  function move(pointerEvent: PointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView!;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+
+    if (options?.onMove) {
+      options.onMove(x, y);
+    }
+  }
+
+  function stop() {
+    document.removeEventListener('pointermove', move);
+    document.removeEventListener('pointerup', stop);
+
+    if (options?.onStop) {
+      options.onStop();
+    }
+  }
+
+  document.addEventListener('pointermove', move, { passive: true });
+  document.addEventListener('pointerup', stop);
+
+  // If an initial event is set, trigger the first drag immediately
+  if (options?.initialEvent instanceof PointerEvent) {
+    move(options.initialEvent);
+  }
+}

package/src/internal/math.ts

@@ -0,0 +1,14 @@
+/** Ensures a number stays within a minimum and maximum value */
+export function clamp(value: number, min: number, max: number) {
+  const noNegativeZero = (n: number) => (Object.is(n, -0) ? 0 : n);
+
+  if (value < min) {
+    return noNegativeZero(min);
+  }
+
+  if (value > max) {
+    return noNegativeZero(max);
+  }
+
+  return noNegativeZero(value);
+}

package/src/nile-empty-state/nile-empty-state.test.ts

@@ -0,0 +1,69 @@
+import { fixture,html,expect } from "@open-wc/testing";
+import './nile-empty-state';
+import { NileEmptyState } from "./nile-empty-state";
+
+describe('NileEmptyState',()=>{
+    it('renders correctly with default properties',async ()=>{
+        const el=await fixture<NileEmptyState>(html`<nile-empty-state></nile-empty-state>`)
+        expect(el.size).to.equal('md');
+        expect(el.variant).to.equal('tonal');
+        expect(el.icon).to.equal('error');
+        expect(el.grayscale).to.be.false;
+        expect(el.text).to.equal('Empty State');
+        expect(el.subText).to.equal('No Data');
+    })
+
+    it('should reflect properties to attributes', async () => {
+        const iconName="action"
+        const el = await fixture<NileEmptyState>(html`
+          <nile-empty-state size="sm" variant="flat" icon=${iconName} grayscale text="Test state text" sub-text="Test sub text"></nile-empty-state>
+        `);
+        expect(el.getAttribute('size')).to.equal('sm');
+        expect(el.getAttribute('variant')).to.equal('flat');
+        expect(el.getAttribute('icon')).to.equal(iconName);
+        expect(el.hasAttribute('grayscale')).to.be.true;
+        expect(el.getAttribute('text')).to.equal('Test state text');
+        expect(el.getAttribute('sub-text')).to.equal('Test sub text');
+      });
+
+      it('should render different sizes correctly', async () => {
+        const sizes:Array<'sm' | 'md' | 'lg' >= ['sm', 'md', 'lg'];
+        for (const size of sizes) {
+          const el = await fixture<NileEmptyState>(html`<nile-empty-state size="${size}"></nile-empty-state>`);
+          const container = el.shadowRoot!.querySelector('.empty-state')!;
+          expect(container.classList.contains(`empty-state--${size}`)).to.be.true;
+        }
+      });
+
+      it('should render different variants correctly', async () => {
+        const variants :Array<'flat' | 'content' | 'tonal' >= ['flat', 'content', 'tonal'];
+        for (const variant of variants) {
+          const el = await fixture<NileEmptyState>(html`<nile-empty-state variant="${variant}"></nile-empty-state>`);
+          const container = el.shadowRoot!.querySelector(`.empty-state__body--${variant}`)!;
+          expect(container).to.exist;
+        }
+      });
+
+      it('should render text properties correctly', async () => {
+        const sampleText='Custom Text'
+        const sampleSubText="Custom SubText"
+        const el = await fixture<NileEmptyState>(html`
+          <nile-empty-state text=${sampleText} sub-text=${sampleSubText}></nile-empty-state>
+        `);
+        const textEl = el.shadowRoot!.querySelector('.empty-state__text')!;
+        const subTextEl = el.shadowRoot!.querySelector('.empty-state__subtext')!;
+        expect(textEl.textContent).to.equal(sampleText);
+        expect(subTextEl.textContent).to.equal(sampleSubText);
+      });
+
+      it('should render slot content', async () => {
+        const el = await fixture<NileEmptyState>(html`
+          <nile-empty-state>
+            <div class="slot-content">Slot Content</div>
+          </nile-empty-state>
+        `);
+        const slotContent = el.querySelector('.slot-content')!;
+        expect(slotContent).to.exist;
+        expect(slotContent.textContent).to.equal('Slot Content');
+      });
+})

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

@@ -32,6 +32,16 @@ export const styles = css`
   		transition: var(--nile-hero-transition-time);
 	}
 
+	.hero__container--collapsed{
+		height: 67px;
+		background-color: var(--nile-hero-collapsed-background,#fff);
+	}
+
+	.hero__container--expanded{
+		height:var(--nile-hero-height);
+		background:linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);
+	}
+
 	.icon__container {
 		height: 32px;
 		aspect-ratio: 1 / 1;

package/src/nile-hero/nile-hero.test.ts

@@ -0,0 +1,45 @@
+import { fixture, html, expect, oneEvent } from '@open-wc/testing';
+import './nile-hero';
+import { NileHero } from './nile-hero';
+
+describe('NileHero', () => {
+  it('renders correctly with default properties', async () => {
+    const el = await fixture<NileHero>(html`
+		<nile-hero icon="error" hero-text="Test Hero">
+            <nile-page-header
+                heading="I am heading"
+                sub-heading="I am subheading"
+            ></nile-page-header>
+        </nile-hero>`);
+    expect(el.getAttribute('icon')).to.equal('error');
+    expect(el.hasAttribute('collapse')).to.be.false;
+    expect(el.getAttribute('img-src')).to.equal('');
+    expect(el.getAttribute('hero-text')).to.equal('Test Hero');
+    expect(el).shadowDom.to.equalSnapshot();
+  });
+
+  it('checks for collapsed state', async () => {
+    const el = await fixture<NileHero>(html`<nile-hero></nile-hero>`);
+    el.collapse = true;
+    await el.updateComplete;
+    expect(el.collapse).to.be.true;
+    el.collapse=true;
+    await el.updateComplete;
+    const heroContainer=el.shadowRoot?.querySelector('.hero__container');
+    expect(heroContainer?.classList.contains('hero__container--collapsed')).to.be.true;
+  });
+
+  it('should render slot content', async () => {
+    const el = await fixture<NileHero>(html`
+      <nile-hero>
+            <nile-page-header
+                heading="I am heading"
+                sub-heading="I am subheading"
+            ></nile-page-header>
+      </nile-hero>
+    `);
+    await el.updateComplete;
+    const NilePageHeader = el.querySelector('nile-page-header')!;
+    expect(NilePageHeader).to.exist;
+  });
+})

package/src/nile-hero/nile-hero.ts

@@ -9,7 +9,6 @@ import {LitElement, html, property, CSSResultArray, TemplateResult,nothing} from
 import { customElement, query, state } from 'lit/decorators.js';
 import {styles} from './nile-hero.css';
 import NileElement from '../internal/nile-element';
-import { watch } from '../internal/watch';
 import { classMap } from 'lit/directives/class-map.js';
 
 
@@ -21,14 +20,11 @@ import { classMap } from 'lit/directives/class-map.js';
  */
 @customElement('nile-hero')
 export class NileHero extends NileElement {
-	@query('.hero__container') heroContainer: HTMLElement;
-	@query('nile-hero-header') heroHeader: HTMLElement;
-	@query('.hero__img__container') imgContainer: HTMLElement;
 	@property({ reflect: true }) icon: string = 'action';
 	@property({ reflect: true, type: Boolean }) collapse: boolean = false;
 
 	@property({ reflect: true, attribute: 'img-src' }) imgSrc: string = '';
-	@property({ reflect: true, attribute: 'hero-text' }) heroText: string = 'Nile Hero';
+	@property({ reflect: true, attribute: 'hero-text' }) heroText: string = '';
 
 	/**
 	 * The styles for nile-hero
@@ -39,35 +35,20 @@ export class NileHero extends NileElement {
 	}
 
 	/* #endregion */
-	connectedCallback() {
-		super.connectedCallback();
-		this.updateComplete.then(() => {
-			this.updateOnCollapseChange();
-		});
-	}
 	/* #region Methods */
 
-	@watch('collapse')
-	updateOnCollapseChange() {
-		if (!this.heroContainer) return;
-		const heroHeaderHeight = this.heroHeader.scrollHeight+1;
-		if (this.collapse) {
-			this.heroContainer.style.height = heroHeaderHeight + 'px';
-			this.heroContainer.style.background = "var(--nile-hero-collapsed-background,#fff)";
-		}
-		else {
-			this.heroContainer.style.height = "var(--nile-hero-height)";
-			this.heroContainer.style.background = "linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%)";
-		}
-	}
 	/**
 	 * Render method
 	 * @slot This is a slot test
 	 */
 	public render(): TemplateResult {
 		return html`
-		<div class="hero__container">
-			<nile-hero-header class='hero__header--collapsed' style="opacity:${this.collapse?1:0}" hero-text="${this.heroText}" icon="${this.icon}"></nile-hero-header>
+		<div part="nile__hero__container" class=${classMap({
+			"hero__container":true,
+			"hero__container--collapsed":this.collapse,
+			"hero__container--expanded":!this.collapse
+		})}>
+			<nile-hero-header part="nile__hero__header" class='hero__header--collapsed' style="opacity:${this.collapse?1:0}" hero-text="${this.heroText}" icon="${this.icon}"></nile-hero-header>
 			<div class="hero__slot__container" style="opacity:${this.collapse?0:1}">
 			 <div class="hero__slot">
 			 	<span class="icon__container">

package/src/nile-icon/icons/svg/flow-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBpZD0iMTYvRmxvdyI+PHBhdGggaWQ9IlVuaW9uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNjc0OCAxSDUuNjc0OFY1SDQuMTc0OFY2LjVINy42NzQ4VjVIMTUuNjc0OFY5SDcuNjc0OFY3LjVINC4xNzQ4VjEyLjVINy42NzQ4VjExSDE1LjY3NDhWMTVINy42NzQ4VjEzLjVINC4xNzQ4SDMuNjc0OEgzLjE3NDhWNUgxLjY3NDhWMVpNOC42NzQ4IDEzLjVWMTRIMTQuNjc0OFYxMkg4LjY3NDhWMTIuNVYxMy41Wk04LjY3NDggNy41VjYuNVY2SDE0LjY3NDhWOEg4LjY3NDhWNy41Wk0zLjE3NDggNEg0LjE3NDhINC42NzQ4VjJIMi42NzQ4VjRIMy4xNzQ4WiIgZmlsbD0iIzAwNUVBNiIvPjwvZz48L3N2Zz4=";

package/src/nile-icon/icons/svg/index.ts

@@ -180,6 +180,7 @@ export { default as filter } from './filter';
 export { default as fingerprint03 } from './fingerprint-03';
 export { default as firewall } from './firewall';
 export { default as firewallagent } from './firewallagent';
+export { default as flow01 } from './flow-01';
 export { default as flowh } from './flow-h';
 export { default as flow } from './flow';
 export { default as flowmapagent } from './flowmap-agent';
@@ -257,6 +258,7 @@ export { default as info } from './info';
 export { default as info2 } from './info2';
 export { default as inprogress } from './inprogress';
 export { default as integer } from './integer';
+export { default as intersection } from './intersection';
 export { default as itemplaceholder } from './itemplaceholder';
 export { default as js } from './js';
 export { default as keyperformanceindicator } from './key-performance-indicator';
@@ -266,6 +268,7 @@ export { default as layersthree01 } from './layers-three-01';
 export { default as layersthree02 } from './layers-three-02';
 export { default as layoutalt02 } from './layout-alt-02';
 export { default as layoutalt03 } from './layout-alt-03';
+export { default as leftjoin } from './left-join';
 export { default as leftarrow } from './leftarrow';
 export { default as leftpointarrow } from './leftpointarrow';
 export { default as lifebuoy01 } from './life-buoy-01';
@@ -290,6 +293,7 @@ export { default as mapcreate } from './mapcreate';
 export { default as mapdont } from './mapdont';
 export { default as maponcreate } from './maponcreate';
 export { default as maponupdate } from './maponupdate';
+export { default as mapper } from './mapper';
 export { default as mapupdate } from './mapupdate';
 export { default as markerpin01 } from './marker-pin-01';
 export { default as maximize } from './maximize';
@@ -381,6 +385,7 @@ export { default as resource } from './resource';
 export { default as returnvalue } from './returnvalue';
 export { default as revocationcycle } from './revocationcycle';
 export { default as revokationcycle } from './revokation-cycle';
+export { default as rightjoin } from './right-join';
 export { default as rightarrow } from './rightarrow';
 export { default as role } from './role';
 export { default as rolemanager } from './rolemanager';
@@ -452,6 +457,7 @@ export { default as trendup02 } from './trend-up-02';
 export { default as trigger } from './trigger';
 export { default as undo1 } from './undo-1';
 export { default as undo } from './undo';
+export { default as union } from './union';
 export { default as unmute } from './unmute';
 export { default as uparrow } from './uparrow';
 export { default as update } from './update';

package/src/nile-icon/icons/svg/intersection.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAxNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0icGF0aC0xLWluc2lkZS0xXzE1ODZfMTcyNTQiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNTAxMDEgMTMuMDAwMUMwLjU1NjM1NiAxMS42ODY3IC00LjI1ODA4ZS0wNyAxMC4wNzUzIC0zLjQ5NjkxZS0wNyA4LjMzMzk4Qy0xLjU2NTYyZS0wNyAzLjkxNTcxIDMuNTgxNzIgMC4zMzM5ODQgOCAwLjMzMzk4NEMxMi40MTgzIDAuMzMzOTg0IDE2IDMuOTE1NzEgMTYgOC4zMzM5OEMxNiAxMC4wNzUzIDE1LjQ0MzYgMTEuNjg2NyAxNC40OTkgMTMuMDAwMUMxNS40NDM2IDE0LjMxMzUgMTYgMTUuOTI0OSAxNiAxNy42NjYyQzE2IDIyLjA4NDUgMTIuNDE4MyAyNS42NjYyIDggMjUuNjY2MkMzLjU4MTcyIDI1LjY2NjIgLTkuNTA3NDZlLTA3IDIyLjA4NDUgLTcuNTc2MTdlLTA3IDE3LjY2NjJDLTYuODE1MDFlLTA3IDE1LjkyNDkgMC41NTYzNTYgMTQuMzEzNSAxLjUwMTAxIDEzLjAwMDFaIi8+PC9tYXNrPjxwYXRoIGQ9Ik0xLjUwMTAxIDEzLjAwMDFMMi4zMTI4NCAxMy41ODRMMi43MzI4MSAxMy4wMDAxTDIuMzEyODQgMTIuNDE2MkwxLjUwMTAxIDEzLjAwMDFaTTE0LjQ5OSAxMy4wMDAxTDEzLjY4NzIgMTIuNDE2MkwxMy4yNjcyIDEzLjAwMDFMMTMuNjg3MiAxMy41ODRMMTQuNDk5IDEzLjAwMDFaTTIuMzEyODQgMTIuNDE2MkMxLjQ4NjQ2IDExLjI2NzMgMSA5Ljg1ODkxIDEgOC4zMzM5OEwtMSA4LjMzMzk4Qy0xIDEwLjI5MTcgLTAuMzczNzQ3IDEyLjEwNjIgMC42ODkxODcgMTMuNTg0TDIuMzEyODQgMTIuNDE2MlpNMSA4LjMzMzk4QzEgNC40Njc5OSA0LjEzNDAxIDEuMzMzOTggOCAxLjMzMzk4TDggLTAuNjY2MDE2QzMuMDI5NDQgLTAuNjY2MDE2IC0xIDMuMzYzNDIgLTEgOC4zMzM5OEwxIDguMzMzOThaTTggMS4zMzM5OEMxMS44NjYgMS4zMzM5OCAxNSA0LjQ2Nzk5IDE1IDguMzMzOThMMTcgOC4zMzM5OEMxNyAzLjM2MzQyIDEyLjk3MDYgLTAuNjY2MDE2IDggLTAuNjY2MDE2TDggMS4zMzM5OFpNMTUgOC4zMzM5OEMxNSA5Ljg1ODkxIDE0LjUxMzUgMTEuMjY3MyAxMy42ODcyIDEyLjQxNjJMMTUuMzEwOCAxMy41ODRDMTYuMzczNyAxMi4xMDYyIDE3IDEwLjI5MTcgMTcgOC4zMzM5OEwxNSA4LjMzMzk4Wk0xMy42ODcyIDEzLjU4NEMxNC41MTM1IDE0LjczMyAxNSAxNi4xNDEzIDE1IDE3LjY2NjJMMTcgMTcuNjY2MkMxNyAxNS43MDg1IDE2LjM3MzcgMTMuODk0MSAxNS4zMTA4IDEyLjQxNjJMMTMuNjg3MiAxMy41ODRaTTE1IDE3LjY2NjJDMTUgMjEuNTMyMiAxMS44NjYgMjQuNjY2MiA4IDI0LjY2NjJMOCAyNi42NjYyQzEyLjk3MDYgMjYuNjY2MiAxNyAyMi42MzY4IDE3IDE3LjY2NjJMMTUgMTcuNjY2MlpNOCAyNC42NjYyQzQuMTM0MDEgMjQuNjY2MiAwLjk5OTk5OSAyMS41MzIyIDAuOTk5OTk5IDE3LjY2NjJMLTEgMTcuNjY2MkMtMSAyMi42MzY4IDMuMDI5NDQgMjYuNjY2MiA4IDI2LjY2NjJMOCAyNC42NjYyWk0wLjk5OTk5OSAxNy42NjYyQzAuOTk5OTk5IDE2LjE0MTMgMS40ODY0NiAxNC43MzMgMi4zMTI4NCAxMy41ODRMMC42ODkxODcgMTIuNDE2MkMtMC4zNzM3NDcgMTMuODk0MSAtMSAxNS43MDg1IC0xIDE3LjY2NjJMMC45OTk5OTkgMTcuNjY2MloiIGZpbGw9IiMwMDVFQTYiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xXzE1ODZfMTcyNTQpIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjUwMTA1IDEzLjAwMThDMi45NTMyNSAxNS4wMjA5IDUuMzIzMSAxNi4zMzU3IDguMDAwMDMgMTYuMzM1N0MxMC42NzcgMTYuMzM1NyAxMy4wNDY4IDE1LjAyMDkgMTQuNDk5IDEzLjAwMThDMTMuMDQ2OCAxMC45ODI4IDEwLjY3NyA5LjY2Nzk3IDguMDAwMDMgOS42Njc5N0M1LjMyMzEgOS42Njc5NyAyLjk1MzI1IDEwLjk4MjggMS41MDEwNSAxMy4wMDE4WiIgZmlsbD0iIzAwNUVBNiIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/left-join.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAxNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI4IiBjeT0iMTcuNjY2IiByPSI3LjUiIHRyYW5zZm9ybT0icm90YXRlKDkwIDggMTcuNjY2KSIgc3Ryb2tlPSIjMDA1RUE2Ii8+PGNpcmNsZSBjeD0iOCIgY3k9IjguMzMzOTgiIHI9IjgiIHRyYW5zZm9ybT0icm90YXRlKDkwIDggOC4zMzM5OCkiIGZpbGw9IiMwMDVFQTYiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/mapper.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBpZD0iMTYvTWFwcGVyIj48cGF0aCBpZD0iVW5pb24iIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNC42NzQ4IDFIMS42NzQ4VjRINC42NzQ4VjNMMTIuNjc0OCAzVjRIMTUuNjc0OFYxSDEyLjY3NDhWMkw0LjY3NDggMlYxWk00LjY3NDggNi41SDEuNjc0OFY5LjVINC42NzQ4VjguNUg4LjY3NDhWMTIuNUM4LjY3NDggMTIuNzc2MSA4LjQ1MDk1IDEzIDguMTc0OCAxM0g0LjY3NDhWMTJIMS42NzQ4VjE1SDQuNjc0OFYxNEg4LjE3NDhDOS4wMDMyMyAxNCA5LjY3NDggMTMuMzI4NCA5LjY3NDggMTIuNVY4LjVIMTIuNjc0OFY5LjVIMTUuNjc0OFY2LjVIMTIuNjc0OFY3LjVINC42NzQ4VjYuNVoiIGZpbGw9IiMwMDVFQTYiLz48L2c+PC9zdmc+";

package/src/nile-icon/icons/svg/right-join.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAxNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI4IiBjeT0iMTcuNjY2IiByPSI4IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4IDE3LjY2NikiIGZpbGw9IiMwMDVFQTYiLz48Y2lyY2xlIGN4PSI4IiBjeT0iOC4zMzM5OCIgcj0iNy41IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4IDguMzMzOTgpIiBzdHJva2U9IiMwMDVFQTYiLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/union.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAxNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNTAxMDEgMTMuMDAwMUMwLjU1NjM1NiAxMS42ODY3IC00LjI1ODA4ZS0wNyAxMC4wNzUzIC0zLjQ5NjkxZS0wNyA4LjMzMzk4Qy0xLjU2NTYyZS0wNyAzLjkxNTcxIDMuNTgxNzIgMC4zMzM5ODQgOCAwLjMzMzk4NEMxMi40MTgzIDAuMzMzOTg0IDE2IDMuOTE1NzEgMTYgOC4zMzM5OEMxNiAxMC4wNzUzIDE1LjQ0MzYgMTEuNjg2NyAxNC40OTkgMTMuMDAwMUMxNS40NDM2IDE0LjMxMzUgMTYgMTUuOTI0OSAxNiAxNy42NjYyQzE2IDIyLjA4NDUgMTIuNDE4MyAyNS42NjYyIDggMjUuNjY2MkMzLjU4MTcyIDI1LjY2NjIgLTkuNTA3NDZlLTA3IDIyLjA4NDUgLTcuNTc2MTdlLTA3IDE3LjY2NjJDLTYuODE1MDFlLTA3IDE1LjkyNDkgMC41NTYzNTYgMTQuMzEzNSAxLjUwMTAxIDEzLjAwMDFaIiBmaWxsPSIjMDA1RUE2Ii8+PC9zdmc+";

package/src/nile-menu/nile-menu.ts

@@ -30,7 +30,7 @@ export class NileMenu extends NileElement {
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
 
-  @query('slot') defaultSlot: HTMLSlotElement;
+  @query('slot:not([name])') defaultSlot!: HTMLSlotElement;
 
   connectedCallback() {
     super.connectedCallback();

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

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

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

@@ -0,0 +1,101 @@
+/**
+* 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];