@aquera/nile-elements 0.0.1-beta.3 → 0.0.1-beta.5

package/dist/watch.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";return{setters:[],execute:function(){}};});
+System.register([],function(_export,_context){"use strict";function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;})),keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}function _defineProperty(obj,key,value){key=_toPropertyKey(key);if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(_typeof(input)!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(_typeof(res)!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function t(t,i){var n=_objectSpread({waitUntilFirstUpdate:!1},i);return function(i,s){var o=i.update,c=Array.isArray(t)?t:[t];i.update=function(t){var _this=this;c.forEach(function(i){var o=i;if(t.has(o)){var _i=t.get(o),_c=_this[o];_i!==_c&&(n.waitUntilFirstUpdate&&!_this.hasUpdated||_this[s](_i,_c));}}),o.call(this,t);};};}_export("w",t);return{setters:[],execute:function(){}};});
 //# sourceMappingURL=watch.cjs.js.map

package/dist/watch.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"watch.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"watch.cjs.js","sources":["../../src/watch.ts"],"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"],"names":["watch","propertyName","options","resolvedOptions","waitUntilFirstUpdate","proto","decoratedFnName","update","watchedProperties","Array","isArray","changedProps","forEach","property","key","has","oldValue","get","newValue","this","hasUpdated","call"],"mappings":"uvDA6BgB,QAAAA,EAAMC,CAAAA,CAAAA,CAAiCC,CACrD,CAAA,CAAA,GAAMC,EAA0C,gBAC9CC,oBAAsB,CAAA,CAAA,CAAA,EACnBF,CAEL,CAAA,CAAA,MAAO,UAA+BG,CAAAA,CAAkBC,GAEhDC,GAAEA,EAAWF,CAAAA,CAAAA,CAAbE,MAAAA,CACAC,CAAoBC,CAAAA,KAAAA,CAAMC,OAAQT,CAAAA,CAAAA,CAAAA,CAAgBA,CAAe,CAAA,CAACA,CAGxEI,CAAAA,CAAAA,CAAAA,CAAME,MAAS,CAAA,SAA2BI,CACxCH,CAAAA,gBAAAA,CAAAA,CAAkBI,QAAQC,SAAAA,CACxB,CAAA,CAAA,GAAMC,EAAMD,CAAAA,CAAAA,CACZ,GAAIF,CAAAA,CAAaI,GAAID,CAAAA,CAAAA,CAAAA,CAAM,CACzB,GAAME,GAAWL,CAAAA,CAAAA,CAAaM,GAAIH,CAAAA,CAAAA,CAAAA,CAC5BI,EAAWC,CAAAA,KAAAA,CAAKL,GAElBE,EAAaE,GAAAA,EAAAA,GACVf,CAAgBC,CAAAA,oBAAAA,EAAAA,CAAwBe,KAAKC,CAAAA,UAAAA,EAC/CD,KAAKb,CAAAA,CAAAA,CAAAA,CAA8CU,EAAUE,CAAAA,EAAAA,CAAAA,CAGnE,EAGHX,CAAAA,CAAAA,CAAAA,CAAAA,CAAOc,IAAKF,CAAAA,IAAAA,CAAMR,CACpB,CAAA,EAAC,EAEL"}

package/dist/watch.esm.js

@@ -1 +1 @@
-
+function t(t,i){const n={waitUntilFirstUpdate:!1,...i};return(i,s)=>{const{update:o}=i,c=Array.isArray(t)?t:[t];i.update=function(t){c.forEach((i=>{const o=i;if(t.has(o)){const i=t.get(o),c=this[o];i!==c&&(n.waitUntilFirstUpdate&&!this.hasUpdated||this[s](i,c))}})),o.call(this,t)}}}export{t as w};

package/package.json

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

package/src/index.ts

@@ -19,3 +19,7 @@ export { NileSelect } from './nile-select';
 export { NileOption } from './nile-option';
 export { NileTag } from './nile-tag';
 export { NileIconButton } from './nile-icon-button';
+export { NileMenuItem } from './nile-menu-item';
+export { NileDropdown } from './nile-dropdown';
+export { NileAutoComplete } from './nile-auto-complete';
+export { NileChip } from './nile-chip';

package/src/internal/tabbable.ts

@@ -0,0 +1,81 @@
+/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
+function isTabbable(el: HTMLElement) {
+  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: HTMLElement | ShadowRoot) {
+  const allElements: HTMLElement[] = [];
+
+  function walk(el: HTMLElement | ShadowRoot) {
+    if (el instanceof HTMLElement) {
+      allElements.push(el);
+
+      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
+        walk(el.shadowRoot);
+      }
+    }
+
+    [...el.children].forEach((e: HTMLElement) => 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 };
+}

package/src/nile-auto-complete/index.ts

@@ -0,0 +1 @@
+export { NileAutoComplete } from './nile-auto-complete';

package/src/nile-auto-complete/nile-auto-complete.css.ts

@@ -0,0 +1,25 @@
+/**
+ * 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';
+
+/**
+ * AutoComplete CSS
+ */
+export const styles = css`
+  :host {
+    .nile-dropdown--input {
+      width: 100%;
+    }
+
+    .nile-auto-complete--input {
+      width: 100%;
+    }
+  }
+`;
+
+export default [styles];

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -0,0 +1,132 @@
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement, query, state } from 'lit/decorators.js';
+import { styles } from './nile-auto-complete.css';
+import NileElement from '../internal/nile-element';
+import { watch } from '../watch';
+
+// Define the custom element 'nile-auto-complete'
+@customElement('nile-auto-complete')
+export class NileAutoComplete extends NileElement {
+  // Define component properties
+  @property({ type: Boolean }) isDropdownOpen: boolean = false;
+
+  @property({ type: Boolean }) openOnFocus: boolean = false;
+
+  @property({ type: String }) value: string = '';
+
+  @property({ type: String }) placeholder: string = 'Type here ..';
+
+  @property({ type: Boolean }) noBorder: boolean = false;
+
+  @state() menuItems: any = [];
+
+  @property({ type: Array }) allMenuItems: any = [];
+
+  @query('nile-dropdown') dropdownElement: any;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.menuItems = [...this.allMenuItems];
+  }
+
+  // Watch for changes in 'allMenuItems' property
+  @watch('allMenuItems')
+  handleAllMenuItemsChange() {
+    this.menuItems = [...this.allMenuItems];
+  }
+
+  // Watch for changes in 'value' and 'isDropdownOpen' properties
+  @watch('value', { waitUntilFirstUpdate: true })
+
+  @watch('isDropdownOpen', { waitUntilFirstUpdate: true })
+  async handleValueChange() {
+    await this.updateComplete;
+    // Filter menu items based on the search value
+    this.menuItems = this.allMenuItems.filter((item: string) =>
+      item.toLowerCase().includes(this.value?.toLowerCase())
+    );
+  }
+
+  private handleSelect(event: CustomEvent) {
+    this.value = event.detail.value;
+    this.emit('nile-complete', { value: event.detail.value });
+    this.isDropdownOpen = false;
+    this.dropdownElement?.hide();
+  }
+
+  private handleSearch(event: CustomEvent) {
+    const searchValue = event.detail.value.toLowerCase();
+    this.value = searchValue;
+
+    // Filter menu items based on the search value
+    this.menuItems = this.allMenuItems.filter((item: string) =>
+      item?.toLowerCase().includes(searchValue)
+    );
+
+    this.isDropdownOpen = this.menuItems.length > 0;
+    if (this.isDropdownOpen) this.dropdownElement?.show();
+  }
+
+  public handleFocus() {
+    if (!this.openOnFocus) {
+      return;
+    }
+
+    // Delay opening the dropdown to allow focus to take effect
+    setTimeout(() => {
+      this.isDropdownOpen = true;
+      this.dropdownElement?.show();
+    }, 300);
+  }
+
+  private handleClick() {
+    this.isDropdownOpen = true;
+    this.dropdownElement?.show();
+  }
+
+  private handleBlur() {
+    this.menuItems = this.allMenuItems;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
+        <nile-input class="nile-auto-complete--input"
+          ?no-border=${this.noBorder}
+          .value=${this.value}
+          @nile-input=${this.handleSearch}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @click=${this.handleClick}
+          slot="trigger"
+          placeholder=${this.placeholder}
+        ></nile-input>
+        ${this.menuItems.length > 0
+          ? html`
+              <nile-menu @nile-select=${this.handleSelect}>
+                ${this.menuItems.map(
+                  (item: unknown)  => html`
+                    <nile-menu-item value=${item}>${item}</nile-menu-item>
+                  `
+                )}
+              </nile-menu>
+            `
+          : ''}
+      </nile-dropdown>
+    `;
+  }
+}
+
+export default NileAutoComplete;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-auto-complete': NileAutoComplete;
+  }
+}

package/src/nile-chip/index.ts

@@ -0,0 +1 @@
+export { NileChip } from './nile-chip';

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

@@ -0,0 +1,148 @@
+/**
+ * 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';
+
+/**
+ * Chip CSS
+ */
+export const styles = css`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .form-control .form-control__label {
+    display: none;
+  }
+
+  .form-control .form-control__help-text {
+    display: none;
+  }
+
+  /* Label */
+  .form-control--has-label .form-control__label {
+    display: inline-block;
+    color: inherit;
+    margin-bottom: 0.125rem;
+  }
+
+  .form-control--has-label.form-control--small .form-control__label {
+    font-size: 0.875rem;
+  }
+
+  .form-control--has-label.form-control--medium .form-control__label {
+    font-size: 1rem;
+  }
+
+  .form-control--has-label.form-control--large .form-control__label {
+    font-size: 1.25rem;
+  }
+
+  :host([required]) .form-control--has-label .form-control__label::after {
+    content: '*';
+    margin-inline-start: -2px;
+    color: undefined;
+  }
+
+  /* Help text */
+  .form-control--has-help-text .form-control__help-text {
+    display: block;
+    color: hsl(240 3.8% 46.1%);
+    margin-top: 0.125rem;
+  }
+
+  .form-control--has-help-text.form-control--small .form-control__help-text {
+    font-size: 0.75rem;
+  }
+
+  .form-control--has-help-text.form-control--medium .form-control__help-text {
+    font-size: 0.875rem;
+  }
+
+  .form-control--has-help-text.form-control--large .form-control__help-text {
+    font-size: 1rem;
+  }
+
+  .form-control--has-help-text.form-control--radio-group
+    .form-control__help-text {
+    margin-top: 0.25rem;
+  }
+
+  :host {
+    display: block;
+    font-family: inherit;
+  }
+
+  .nile-chip {
+    display: inline-block;
+    padding: 5px 10px;
+    background-color: #fff;
+    border-radius: 0.25rem;
+    border: solid 1px #c7ced4;
+    padding: 5px 10px;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .nile-chip--disabled {
+    background-color: hsl(240 4.8% 95.9%);
+    border-color: hsl(240 4.9% 83.9%);
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .nile-chip:hover:not(.nile-chip--disabled) {
+    background-color: #fff;
+    box-shadow: 0 0 0 1px hsl(198.6 88.7% 48.4% / 40%);
+  }
+
+  .nile-chip.nile-chip--focused:not(.nile-chip--disabled) {
+    background-color: #fff;
+    border-color: #005ea6;
+    box-shadow: 0 0 0 1px hsl(198.6 88.7% 48.4% / 40%);
+  }
+
+  .nile-chip.nile-chip--disabled {
+    background-color: hsl(240 4.8% 95.9%);
+    border-color: hsl(240 4.9% 83.9%);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .nile-chip.nile-chip--warning {
+    border-color: #e5bf43;
+  }
+
+  .nile-chip.nile-chip--error {
+    border-color: #e5434d;
+  }
+
+  .nile-chip.nile-chip--success {
+    border-color: #43e5c0;
+  }
+
+  .nile-chip__auto-complete {
+    width: 100%;
+  }
+
+  .nile-chip__tags {
+    margin: 0.05rem;
+  }
+`;
+
+export default [styles];

package/src/nile-chip/nile-chip.ts

@@ -0,0 +1,189 @@
+/**
+ * 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 {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult
+} from 'lit-element';
+import { customElement, query, state } from 'lit/decorators.js';
+import { styles } from './nile-chip.css';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController } from '../internal/slot';
+import { watch } from '../internal/watch';
+import NileElement, { NileFormControl } from '../internal/nile-element';
+
+
+interface CustomEventDetail {
+  value: string;
+}
+
+@customElement('nile-chip')
+export class NileChip extends NileElement {
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+
+  @state() tags: string[] = [];
+
+  @state() inputValue: string = '';
+
+  @state() isDropdownOpen: boolean = false;
+
+  @query('nile-auto-complete') autoComplete!: any;
+
+  /** The input's label. If you need to display HTML, use the `label` slot instead. */
+  @property() label = '';
+
+  /** Adds a clear button when the input is not empty. */
+  @property({ type: Boolean }) acceptUserInput = false;
+
+  /** Adds a clear button when the input is not empty. */
+  @property({ type: Boolean }) clearable = false;
+
+  /** Placeholder text to show as a hint when the input is empty. */
+  @property() placeholder = '';
+
+  /** Makes the input readonly. */
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
+  /** Disables the input. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  // Auto-complete options
+  @property({ type: Array }) autoCompleteOptions : any[] = [];
+
+  private handleSelect(event: CustomEvent<CustomEventDetail>) {
+
+    // Add the selected value to the tags array
+    this.tags = [...this.tags, event.detail.value];
+
+    // Emit a custom event with the selected value
+    this.emit('nile-chip-change', { value: this.tags });
+
+    // Reset the input field
+    this.resetInput();
+  }
+
+  private handleRemove(value: string) {
+    // Remove the tag from the tags array
+    this.tags = this.tags.filter(tag => tag !== value);
+    this.emit('nile-chip-change', { value: this.tags });
+
+  }
+
+  private handleInputChange(event: CustomEvent<CustomEventDetail>) {
+    // Update the input value
+    this.inputValue = event.detail.value;
+  }
+
+  private handleInputKeydown(event: KeyboardEvent) {
+    if (!this.acceptUserInput) {
+      return;
+    }
+
+    if (event.key === 'Enter' && this.inputValue) {
+      this.tags = [...this.tags, this.inputValue];
+
+      this.resetInput();
+      this.emit('nile-chip-change', { value: this.tags });
+    }
+
+
+  }
+
+  private handleFocus() {
+    this.isDropdownOpen = true;
+  }
+
+  private resetInput() {
+    // Reset the input-related properties
+    this.inputValue = '';
+    this.isDropdownOpen = false;
+    this.autoComplete.value = '';
+    this.autoComplete.handleFocus();
+  }
+
+  render() {
+    // Check if slots are present
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+
+    // Check if label and help text are present
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+          'form-control': true,
+          'form-control--medium': true,
+          'form-control--has-label': hasLabel,
+          'form-control--has-help-text': hasHelpText,
+          'nile-chip--disabled': this.disabled,
+        })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div class="nile-chip">
+          ${this.tags.map(tag => html`
+            <nile-tag class="nile-chip__tags" @nile-remove=${() => this.handleRemove(tag)} removable pill>
+              ${tag}
+            </nile-tag>
+          `)}
+          <div class="nile-chip__auto-complete">
+            <nile-auto-complete
+              .allMenuItems=${this.autoCompleteOptions}
+              .value=${this.inputValue}
+              ?isDropdownOpen=${this.isDropdownOpen}
+              .noBorder=${true}
+              openOnFocus
+              .placeholder=${this.placeholder}
+              @nile-input=${this.handleInputChange}
+              @keydown=${this.handleInputKeydown}
+              @nile-focus=${this.handleFocus}
+              @nile-complete=${this.handleSelect}
+            ></nile-auto-complete>
+          </div>
+          <slot
+            name="help-text"
+            part="form-control-help-text"
+            id="help-text"
+            class="form-control__help-text"
+            aria-hidden=${hasHelpText ? 'false' : 'true'}
+          >
+            ${this.helpText}
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default NileChip;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-chip': NileChip;
+  }
+}

package/src/nile-dropdown/index.ts

@@ -0,0 +1 @@
+export { NileDropdown} from './nile-dropdown';

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

@@ -0,0 +1,62 @@
+/**
+* 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';
+
+/**
+ * Dropdown CSS
+ */
+export const styles = css`
+:host {
+    display: inline-block;
+  }
+
+  .dropdown::part(popup) {
+    z-index: 900;
+  }
+
+  .dropdown[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .dropdown[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .dropdown[data-current-placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .dropdown[data-current-placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .dropdown__trigger {
+    display: block;
+  }
+
+  .dropdown__panel {
+    font-size: 1rem;
+    font-weight: 400;
+    box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
+    border-radius: 0.25rem;
+    pointer-events: none;
+  }
+
+  .dropdown--open .dropdown__panel {
+    display: block;
+    pointer-events: all;
+  }
+
+  /* When users slot a menu, make sure it conforms to the popup's auto-size */
+  ::slotted(nile-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;
+
+export default [styles];