@aquera/nile-elements 0.0.1-beta.2 → 0.0.1-beta.4

package/dist/watch.cjs.js

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +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.2",
+  "version": "0.0.1-beta.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -15,3 +15,11 @@ export { NileSlideToggle } from './nile-slide-toggle';
 export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
+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/form.ts

@@ -78,7 +78,7 @@ export class FormControlController implements ReactiveController {
       disabled: input => input.disabled ?? false,
       reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),
       setValue: (input, value: string) => (input.value = value),
-      assumeInteractionOn: ['sl-input'],
+      assumeInteractionOn: ['nile-input'],
       ...options
     };
     this.handleFormData = this.handleFormData.bind(this);
@@ -182,7 +182,7 @@ export class FormControlController implements ReactiveController {
 
     // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by
     // injecting the name/value on a temporary button, so we can just skip them here.
-    const isButton = this.host.tagName.toLowerCase() === 'sl-button';
+    const isButton = this.host.tagName.toLowerCase() === 'nile-button';
 
     if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
       if (Array.isArray(value)) {
@@ -349,14 +349,14 @@ export class FormControlController implements ReactiveController {
   }
 
   /**
-   * Dispatches a non-bubbling, cancelable custom event of type `sl-invalid`.
-   * If the `sl-invalid` event will be cancelled then the original `invalid`
+   * Dispatches a non-bubbling, cancelable custom event of type `nile-invalid`.
+   * If the `nile-invalid` event will be cancelled then the original `invalid`
    * event (which may have been passed as argument) will also be cancelled.
-   * If no original `invalid` event has been passed then the `sl-invalid`
+   * If no original `invalid` event has been passed then the `nile-invalid`
    * event will be cancelled before being dispatched.
    */
   emitInvalidEvent(originalInvalidEvent?: Event) {
-    const slInvalidEvent = new CustomEvent<Record<PropertyKey, never>>('sl-invalid', {
+    const slInvalidEvent = new CustomEvent<Record<PropertyKey, never>>('nile-invalid', {
       bubbles: false,
       composed: false,
       cancelable: true,

package/src/internal/offset.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
+ * parent doesn't have to be positioned relative or absolute.
+ *
+ * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems
+ * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
+ */
+export function getOffset(element: HTMLElement, parent: HTMLElement) {
+  return {
+    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
+  };
+}

package/src/internal/scroll.ts

@@ -0,0 +1,69 @@
+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: HTMLElement) {
+  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: HTMLElement) {
+  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: HTMLElement,
+  container: HTMLElement,
+  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',
+  behavior: 'smooth' | 'auto' = '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 });
+    }
+  }
+}

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: { text: string }) =>
+      item.text.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: { text: string }) =>
+      item.text.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];