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

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

@@ -5,23 +5,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __decorate } from "tslib";
-import { LitElement, html, property, } from 'lit-element';
-import { customElement, state } from 'lit/decorators.js';
 import { styles } from './nile-option.css';
+import '../nile-icon';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
 /**
  * Nile icon component.
  *
  * @tag nile-option
  *
  */
-let NileOption = class NileOption extends LitElement {
+/**
+ * @summary Options define the selectable items within various form controls such as [select](/components/select).
+ * @status stable
+ *
+ * @dependency nile-icon
+ *
+ * @slot - The option's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-icon - The checked icon, an `<nile-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+let NileOption = class NileOption extends NileElement {
     constructor() {
         super(...arguments);
-        /* #endregion */
         this.current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
         this.selected = false; // the option is selected and has aria-selected="true"
-        this.hidden = false; // the option is hidden
         this.hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
+        this.hidden = false; // the option is hidden
         /**
          * The option's value. When selected, the containing form control will receive this value. The value must be unique
          * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
@@ -30,90 +49,94 @@ let NileOption = class NileOption extends LitElement {
         this.value = '';
         /** Draws the option in a disabled state, preventing selection. */
         this.disabled = false;
-        /** Draws the option in a disabled state, preventing selection. */
-        this.multiple = false;
-        // class=${classMap({
-        //   option: true,
-        //   'option--current': this.current,
-        //   'option--disabled': this.disabled,
-        //   'option--selected': this.selected,
-        //   'option--hover': this.hasHover
-        // })}
-        /* #endregion */
     }
-    /**
-     * The styles for Option
-     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-     */
-    static get styles() {
-        return [styles];
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'option');
+        this.setAttribute('aria-selected', 'false');
     }
-    /* #region Methods */
     handleDefaultSlotChange() {
-        // const textLabel = this.getTextLabel();
-        // // Ignore the first time the label is set
-        // if (typeof this.cachedTextLabel === 'undefined') {
-        //   this.cachedTextLabel = textLabel;
-        //   return;
-        // }
+        const textLabel = this.getTextLabel();
+        // Ignore the first time the label is set
+        if (typeof this.cachedTextLabel === 'undefined') {
+            this.cachedTextLabel = textLabel;
+            return;
+        }
         // When the label changes, emit a slotchange event so parent controls see it
-        // if (textLabel !== this.cachedTextLabel) {
-        //   this.cachedTextLabel = textLabel;
-        //   this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
-        // }
+        if (textLabel !== this.cachedTextLabel) {
+            this.cachedTextLabel = textLabel;
+            this.emit('slotchange', {
+                bubbles: true,
+                composed: false,
+                cancelable: false,
+            });
+        }
     }
-    /** Returns a plain text label based on the option's content. */
-    getTextLabel() {
-        return (this.textContent ?? '').trim();
-    }
-    onMouseEnter() {
+    handleMouseEnter() {
         this.hasHover = true;
     }
-    onMouseLeave() {
+    handleMouseLeave() {
         this.hasHover = false;
     }
-    /**
-     * Render method
-     * @slot This is a slot test
-     */
+    handleDisabledChange() {
+        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    }
+    handleSelectedChange() {
+        this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+    }
+    handleValueChange() {
+        // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
+        // instead of requiring them to cast the value to a string.
+        if (typeof this.value !== 'string') {
+            this.value = String(this.value);
+        }
+        if (this.value.includes(' ')) {
+            console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
+            this.value = this.value.replace(/ /g, '_');
+        }
+    }
+    /** Returns a plain text label based on the option's content. */
+    getTextLabel() {
+        return (this.textContent ?? '').trim();
+    }
     render() {
         return html `
       ${!this.hidden
-            ? html `
-            <div
-              class="option ${this.multiple ? 'extra-padding' : ''}"
-              @mouseenter=${this.onMouseEnter}
-              @mouseleave=${this.onMouseLeave}
-            >
-              ${this.multiple
-                ? html `<input
-                    type="checkbox"
-                    style="pointer-events: none;"
-                    ?checked=${this.selected}
-                  />`
-                : ''}
-
-              <span class="label-container">
-                <span class="prefix">
-                  <slot part="prefix" name="prefix"></slot>
-                </span>
-
-                <slot
-                  part="label"
-                  class="label"
-                  @slotchange=${this.handleDefaultSlotChange}
-                ></slot>
-                <slot part="suffix" name="suffix" class="option__suffix"></slot>
-              </span>
-              ${this.selected && !this.multiple
-                ? html `<nile-icon name="tick" class="check"> </nile-icon>`
-                : ''}
-            </div>
-          `
+            ? html ` <div
+            part="base"
+            class=${classMap({
+                option: true,
+                'option--current': this.current,
+                'option--disabled': this.disabled,
+                'option--selected': this.selected,
+                'option--hover': this.hasHover,
+            })}
+            @mouseenter=${this.handleMouseEnter}
+            @mouseleave=${this.handleMouseLeave}
+          >
+            <nile-icon
+              part="checked-icon"
+              class="option__check"
+              name="tick"
+              color=${this.current ? '#005EA6' : ''}
+              aria-hidden="true"
+            ></nile-icon>
+            <slot part="prefix" name="prefix" class="option__prefix"></slot>
+            <slot
+              part="label"
+              class="option__label"
+              @slotchange=${this.handleDefaultSlotChange}
+            ></slot>
+            <slot part="suffix" name="suffix" class="option__suffix"></slot>
+          </div>`
             : ''}
     `;
     }
 };
+NileOption.styles = styles;
+__decorate([
+    query('.option__label')
+], NileOption.prototype, "defaultSlot", void 0);
 __decorate([
     state()
 ], NileOption.prototype, "current", void 0);
@@ -122,10 +145,10 @@ __decorate([
 ], NileOption.prototype, "selected", void 0);
 __decorate([
     state()
-], NileOption.prototype, "hidden", void 0);
+], NileOption.prototype, "hasHover", void 0);
 __decorate([
     state()
-], NileOption.prototype, "hasHover", void 0);
+], NileOption.prototype, "hidden", void 0);
 __decorate([
     property({ reflect: true })
 ], NileOption.prototype, "value", void 0);
@@ -133,8 +156,14 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], NileOption.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], NileOption.prototype, "multiple", void 0);
+    watch('disabled')
+], NileOption.prototype, "handleDisabledChange", null);
+__decorate([
+    watch('selected')
+], NileOption.prototype, "handleSelectedChange", null);
+__decorate([
+    watch('value')
+], NileOption.prototype, "handleValueChange", null);
 NileOption = __decorate([
     customElement('nile-option')
 ], NileOption);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAS,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C;;;;;GAKG;AAEH,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QASE,gBAAgB;QAEP,YAAO,GAAG,KAAK,CAAC,CAAC,qFAAqF;QACtG,aAAQ,GAAG,KAAK,CAAC,CAAC,sDAAsD;QACxE,WAAM,GAAG,KAAK,CAAC,CAAC,uBAAuB;QACvC,aAAQ,GAAG,KAAK,CAAC,CAAC,yEAAyE;QAEpG;;;;WAIG;QAC0B,UAAK,GAAG,EAAE,CAAC;QAExC,kEAAkE;QACtB,aAAQ,GAAG,KAAK,CAAC;QAE7D,kEAAkE;QACtB,aAAQ,GAAG,KAAK,CAAC;QAwE7D,qBAAqB;QACrB,kBAAkB;QAClB,qCAAqC;QACrC,uCAAuC;QACvC,uCAAuC;QACvC,mCAAmC;QACnC,MAAM;QACN,gBAAgB;IAClB,CAAC;IA1GC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAsBD,qBAAqB;IAEb,uBAAuB;QAC7B,yCAAyC;QACzC,4CAA4C;QAC5C,qDAAqD;QACrD,sCAAsC;QACtC,YAAY;QACZ,IAAI;QACJ,4EAA4E;QAC5E,4CAA4C;QAC5C,sCAAsC;QACtC,oFAAoF;QACpF,IAAI;IACN,CAAC;IAED,gEAAgE;IAChE,YAAY;QACV,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IACzC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAED,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IACD;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;QACP,CAAC,IAAI,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;;8BAEgB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;4BACtC,IAAI,CAAC,YAAY;4BACjB,IAAI,CAAC,YAAY;;gBAE7B,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA;;;+BAGS,IAAI,CAAC,QAAQ;qBACvB;gBACL,CAAC,CAAC,EAAE;;;;;;;;;;gCAUY,IAAI,CAAC,uBAAuB;;;;gBAI5C,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAC/B,CAAC,CAAC,IAAI,CAAA,oDAAoD;gBAC1D,CAAC,CAAC,EAAE;;WAET;YACH,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;CAUF,CAAA;AAhGU;IAAR,KAAK,EAAE;2CAAiB;AAChB;IAAR,KAAK,EAAE;4CAAkB;AACjB;IAAR,KAAK,EAAE;0CAAgB;AACf;IAAR,KAAK,EAAE;4CAAkB;AAOG;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAY;AAGI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AA3BlD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA2GtB;SA3GY,UAAU;AA6GvB,eAAe,UAAU,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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-option.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n@customElement('nile-option')\nexport class NileOption extends LitElement {\n  /**\n   * The styles for Option\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /* #endregion */\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hidden = false; // the option is hidden\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /* #region Methods */\n\n  private handleDefaultSlotChange() {\n    // const textLabel = this.getTextLabel();\n    // // Ignore the first time the label is set\n    // if (typeof this.cachedTextLabel === 'undefined') {\n    //   this.cachedTextLabel = textLabel;\n    //   return;\n    // }\n    // When the label changes, emit a slotchange event so parent controls see it\n    // if (textLabel !== this.cachedTextLabel) {\n    //   this.cachedTextLabel = textLabel;\n    //   this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel(): string {\n    return (this.textContent ?? '').trim();\n  }\n\n  onMouseEnter(): void {\n    this.hasHover = true;\n  }\n\n  onMouseLeave(): void {\n    this.hasHover = false;\n  }\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      ${!this.hidden\n        ? html`\n            <div\n              class=\"option ${this.multiple ? 'extra-padding' : ''}\"\n              @mouseenter=${this.onMouseEnter}\n              @mouseleave=${this.onMouseLeave}\n            >\n              ${this.multiple\n                ? html`<input\n                    type=\"checkbox\"\n                    style=\"pointer-events: none;\"\n                    ?checked=${this.selected}\n                  />`\n                : ''}\n\n              <span class=\"label-container\">\n                <span class=\"prefix\">\n                  <slot part=\"prefix\" name=\"prefix\"></slot>\n                </span>\n\n                <slot\n                  part=\"label\"\n                  class=\"label\"\n                  @slotchange=${this.handleDefaultSlotChange}\n                ></slot>\n                <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n              </span>\n              ${this.selected && !this.multiple\n                ? html`<nile-icon name=\"tick\" class=\"check\"> </nile-icon>`\n                : ''}\n            </div>\n          `\n        : ''}\n    `;\n  }\n\n  // class=${classMap({\n  //   option: true,\n  //   'option--current': this.current,\n  //   'option--disabled': this.disabled,\n  //   'option--selected': this.selected,\n  //   'option--hover': this.hasHover\n  // })}\n  /* #endregion */\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}
+{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;;GAeG;AAGH,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,WAAW;IAA3C;;QAOW,YAAO,GAAG,KAAK,CAAC,CAAC,qFAAqF;QACtG,aAAQ,GAAG,KAAK,CAAC,CAAC,sDAAsD;QACxE,aAAQ,GAAG,KAAK,CAAC,CAAC,yEAAyE;QAC3F,WAAM,GAAG,KAAK,CAAC,CAAC,uBAAuB;QAEhD;;;;WAIG;QAC0B,UAAK,GAAG,EAAE,CAAC;QAExC,kEAAkE;QACtB,aAAQ,GAAG,KAAK,CAAC;IAqG/D,CAAC;IAnGC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAEO,uBAAuB;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAEtC,yCAAyC;QACzC,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,WAAW,EAAE;YAC/C,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;YACjC,OAAO;SACR;QAED,4EAA4E;QAC5E,IAAI,SAAS,KAAK,IAAI,CAAC,eAAe,EAAE;YACtC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBACtB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,KAAK;aAClB,CAAC,CAAC;SACJ;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACvE,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACvE,CAAC;IAGD,iBAAiB;QACf,oHAAoH;QACpH,2DAA2D;QAC3D,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YAClC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC5B,OAAO,CAAC,KAAK,CACX,uFAAuF,EACvF,IAAI,CACL,CAAC;YACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;SAC5C;IACH,CAAC;IAED,gEAAgE;IAChE,YAAY;QACV,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,CAAC,IAAI,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;;oBAEM,QAAQ,CAAC;gBACf,MAAM,EAAE,IAAI;gBACZ,iBAAiB,EAAE,IAAI,CAAC,OAAO;gBAC/B,kBAAkB,EAAE,IAAI,CAAC,QAAQ;gBACjC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;gBACjC,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,CAAC;0BACY,IAAI,CAAC,gBAAgB;0BACrB,IAAI,CAAC,gBAAgB;;;;;;sBAMzB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;;;;;4BAOvB,IAAI,CAAC,uBAAuB;;;iBAGvC;YACT,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;CACF,CAAA;AAxHQ,iBAAM,GAAmB,MAAO,CAAA;AAId;IAAxB,KAAK,CAAC,gBAAgB,CAAC;+CAA8B;AAE7C;IAAR,KAAK,EAAE;2CAAiB;AAChB;IAAR,KAAK,EAAE;4CAAkB;AACjB;IAAR,KAAK,EAAE;4CAAkB;AACjB;IAAR,KAAK,EAAE;0CAAgB;AAOK;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAY;AAGI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AAqC7D;IADC,KAAK,CAAC,UAAU,CAAC;sDAGjB;AAGD;IADC,KAAK,CAAC,UAAU,CAAC;sDAGjB;AAGD;IADC,KAAK,CAAC,OAAO,CAAC;mDAed;AAjFU,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAyHtB;SAzHY,UAAU;AA2HvB,eAAe,UAAU,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit-element';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n  @state() hidden = false; // the option is hidden\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange', {\n        bubbles: true,\n        composed: false,\n        cancelable: false,\n      });\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    if (this.value.includes(' ')) {\n      console.error(\n        `Option values cannot include a space. All spaces have been replaced with underscores.`,\n        this\n      );\n      this.value = this.value.replace(/ /g, '_');\n    }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      ${!this.hidden\n        ? html` <div\n            part=\"base\"\n            class=${classMap({\n              option: true,\n              'option--current': this.current,\n              'option--disabled': this.disabled,\n              'option--selected': this.selected,\n              'option--hover': this.hasHover,\n            })}\n            @mouseenter=${this.handleMouseEnter}\n            @mouseleave=${this.handleMouseLeave}\n          >\n            <nile-icon\n              part=\"checked-icon\"\n              class=\"option__check\"\n              name=\"tick\"\n              color=${this.current ? '#005EA6' : ''}\n              aria-hidden=\"true\"\n            ></nile-icon>\n            <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n            <slot\n              part=\"label\"\n              class=\"option__label\"\n              @slotchange=${this.handleDefaultSlotChange}\n            ></slot>\n            <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n          </div>`\n        : ''}\n    `;\n  }\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}

package/dist/src/nile-popup/nile-popup.css.js

@@ -11,7 +11,7 @@ import { css } from 'lit-element';
 export const styles = css `
 
 :host {
-    --arrow-color: var(--sl-color-neutral-1000);
+    --arrow-color: hsl(240 4.8% 95.9%);
     --arrow-size: 6px;
 
     /*

package/dist/src/nile-popup/nile-popup.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-popup.css.js","sourceRoot":"","sources":["../../../src/nile-popup/nile-popup.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * Popup CSS\n */\nexport const styles = css`\n\n:host {\n    --arrow-color: var(--sl-color-neutral-1000);\n    --arrow-size: 6px;\n\n    /*\n     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant\n     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.\n     */\n    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);\n    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));\n\n    display: contents;\n  }\n\n  .popup {\n    position: absolute;\n    isolation: isolate;\n    max-width: var(--auto-size-available-width, none);\n    max-height: var(--auto-size-available-height, none);\n  }\n\n  .popup--fixed {\n    position: fixed;\n  }\n\n  .popup:not(.popup--active) {\n    display: none;\n  }\n\n  .popup__arrow {\n    position: absolute;\n    width: calc(var(--arrow-size-diagonal) * 2);\n    height: calc(var(--arrow-size-diagonal) * 2);\n    rotate: 45deg;\n    background: var(--arrow-color);\n    z-index: -1;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-popup.css.js","sourceRoot":"","sources":["../../../src/nile-popup/nile-popup.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * Popup CSS\n */\nexport const styles = css`\n\n:host {\n    --arrow-color: hsl(240 4.8% 95.9%);\n    --arrow-size: 6px;\n\n    /*\n     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant\n     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.\n     */\n    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);\n    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));\n\n    display: contents;\n  }\n\n  .popup {\n    position: absolute;\n    isolation: isolate;\n    max-width: var(--auto-size-available-width, none);\n    max-height: var(--auto-size-available-height, none);\n  }\n\n  .popup--fixed {\n    position: fixed;\n  }\n\n  .popup:not(.popup--active) {\n    display: none;\n  }\n\n  .popup__arrow {\n    position: absolute;\n    width: calc(var(--arrow-size-diagonal) * 2);\n    height: calc(var(--arrow-size-diagonal) * 2);\n    rotate: 45deg;\n    background: var(--arrow-color);\n    z-index: -1;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -244,7 +244,6 @@ let NilePopup = class NilePopup extends NileElement {
         //
         // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.
         //
-        // More info: https://github.com/shoelace-style/shoelace/issues/1135
         //
         const getOffsetParent = this.strategy === 'absolute'
             ? (element) => platform.getOffsetParent(element, offsetParent)

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

@@ -1 +1 @@
-{"version":3,"file":"nile-popup.js","sourceRoot":"","sources":["../../../src/nile-popup/nile-popup.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, CSSResultArray, TemplateResult} from 'lit-element';\nimport { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { offsetParent } from 'composed-offset-position';\nimport NileElement from '../internal/nile-element';\nimport {styles} from './nile-popup.css';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popup\n *\n */\n@customElement('nile-popup')\nexport class NilePopup extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private anchorEl: Element | null;\n  private cleanup: ReturnType<typeof autoUpdate> | undefined;\n\n  /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */\n  @query('.popup') popup: HTMLElement;\n  @query('.popup__arrow') private arrowEl: HTMLElement;\n\n  /**\n   * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\n   * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n   */\n  @property() anchor: Element | string;\n\n  /**\n   * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\n   * down and the popup will be hidden.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\n   * panel inside of the viewport.\n   */\n  @property({ reflect: true }) placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /**\n   * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\n   * clipped, using a `fixed` position strategy can often workaround it.\n   */\n  @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';\n\n  /** The distance in pixels from which to offset the panel away from its anchor. */\n  @property({ type: Number }) distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its anchor. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n   * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n   * `::part(arrow)` in your stylesheet.\n   */\n  @property({ type: Boolean }) arrow = false;\n\n  /**\n   * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\n   * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\n   * align the arrow to the start, end, or center of the popover instead.\n   */\n  @property({ attribute: 'arrow-placement' }) arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n  /**\n   * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\n   * this will prevent it from overflowing the corners.\n   */\n  @property({ attribute: 'arrow-padding', type: Number }) arrowPadding = 10;\n\n  /**\n   * When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n   * `flipFallbackPlacements` to further configure how the fallback placement is determined.\n   */\n  @property({ type: Boolean }) flip = false;\n\n  /**\n   * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\n   * string of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\n   * fallback strategy will be used instead.\n   * */\n  @property({\n    attribute: 'flip-fallback-placements',\n    converter: {\n      fromAttribute: (value: string) => {\n        return value\n          .split(' ')\n          .map(p => p.trim())\n          .filter(p => p !== '');\n      },\n      toAttribute: (value: []) => {\n        return value.join(' ');\n      }\n    }\n  })\n  flipFallbackPlacements = '';\n\n  /**\n   * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\n   * the popup should be positioned using the best available fit based on available space or as it was initially\n   * preferred.\n   */\n  @property({ attribute: 'flip-fallback-strategy' }) flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n  /**\n   * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) flipBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */\n  @property({ attribute: 'flip-padding', type: Number }) flipPadding = 0;\n\n  /** Moves the popup along the axis to keep it in view when clipped. */\n  @property({ type: Boolean }) shift = false;\n\n  /**\n   * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) shiftBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */\n  @property({ attribute: 'shift-padding', type: Number }) shiftPadding = 0;\n\n  /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */\n  @property({ attribute: 'auto-size' }) autoSize: 'horizontal' | 'vertical' | 'both';\n\n  /** Syncs the popup's width or height to that of the anchor element. */\n  @property() sync: 'width' | 'height' | 'both';\n\n  /**\n   * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) autoSizeBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */\n  @property({ attribute: 'auto-size-padding', type: Number }) autoSizePadding = 0;\n\n  async connectedCallback() {\n    super.connectedCallback();\n\n    // Start the positioner after the first update\n    await this.updateComplete;\n    this.start();\n  }\n\n  disconnectedCallback() {\n    this.stop();\n  }\n\n  async updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    // Start or stop the positioner when active changes\n    if (changedProps.has('active')) {\n      if (this.active) {\n        this.start();\n      } else {\n        this.stop();\n      }\n    }\n\n    // Update the anchor when anchor changes\n    if (changedProps.has('anchor')) {\n      this.handleAnchorChange();\n    }\n\n    // All other properties will trigger a reposition when active\n    if (this.active) {\n      await this.updateComplete;\n      this.reposition();\n    }\n  }\n\n  private async handleAnchorChange() {\n    await this.stop();\n\n    if (this.anchor && typeof this.anchor === 'string') {\n      // Locate the anchor by id\n      const root = this.getRootNode() as Document | ShadowRoot;\n      this.anchorEl = root.getElementById(this.anchor);\n    } else if (this.anchor instanceof Element) {\n      // Use the anchor's reference\n      this.anchorEl = this.anchor;\n    } else {\n      // Look for a slotted anchor\n      this.anchorEl = this.querySelector<HTMLElement>('[slot=\"anchor\"]');\n    }\n\n    // If the anchor is a <slot>, we'll use the first assigned element as the target since slots use `display: contents`\n    // and positioning can't be calculated on them\n    if (this.anchorEl instanceof HTMLSlotElement) {\n      this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;\n    }\n\n    if (!this.anchorEl) {\n      throw new Error(\n        'Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.'\n      );\n    }\n\n    this.start();\n  }\n\n  private start() {\n    // We can't start the positioner without an anchor\n    if (!this.anchorEl) {\n      return;\n    }\n\n    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {\n      this.reposition();\n    });\n  }\n\n  private async stop(): Promise<void> {\n    return new Promise(resolve => {\n      if (this.cleanup) {\n        this.cleanup();\n        this.cleanup = undefined;\n        this.removeAttribute('data-current-placement');\n        this.style.removeProperty('--auto-size-available-width');\n        this.style.removeProperty('--auto-size-available-height');\n        requestAnimationFrame(() => resolve());\n      } else {\n        resolve();\n      }\n    });\n  }\n\n  /** Forces the popup to recalculate and reposition itself. */\n  reposition() {\n    // Nothing to do if the popup is inactive or the anchor doesn't exist\n    if (!this.active || !this.anchorEl) {\n      return;\n    }\n\n    //\n    // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware\n    //\n    const middleware = [\n      // The offset middleware goes first\n      offset({ mainAxis: this.distance, crossAxis: this.skidding })\n    ];\n\n    // First we sync width/height\n    if (this.sync) {\n      middleware.push(\n        size({\n          apply: ({ rects }) => {\n            const syncWidth = this.sync === 'width' || this.sync === 'both';\n            const syncHeight = this.sync === 'height' || this.sync === 'both';\n            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';\n            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're not matching width/height\n      this.popup.style.width = '';\n      this.popup.style.height = '';\n    }\n\n    // Then we flip\n    if (this.flip) {\n      middleware.push(\n        flip({\n          boundary: this.flipBoundary,\n          // @ts-expect-error - We're converting a string attribute to an array here\n          fallbackPlacements: this.flipFallbackPlacements,\n          fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n          padding: this.flipPadding\n        })\n      );\n    }\n\n    // Then we shift\n    if (this.shift) {\n      middleware.push(\n        shift({\n          boundary: this.shiftBoundary,\n          padding: this.shiftPadding\n        })\n      );\n    }\n\n    // Now we adjust the size as needed\n    if (this.autoSize) {\n      middleware.push(\n        size({\n          boundary: this.autoSizeBoundary,\n          padding: this.autoSizePadding,\n          apply: ({ availableWidth, availableHeight }) => {\n            if (this.autoSize === 'vertical' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-height');\n            }\n\n            if (this.autoSize === 'horizontal' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-width');\n            }\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're no longer using auto-size\n      this.style.removeProperty('--auto-size-available-width');\n      this.style.removeProperty('--auto-size-available-height');\n    }\n\n    // Finally, we add an arrow\n    if (this.arrow) {\n      middleware.push(\n        arrow({\n          element: this.arrowEl,\n          padding: this.arrowPadding\n        })\n      );\n    }\n\n    //\n    // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.\n    //\n    // More info: https://github.com/shoelace-style/shoelace/issues/1135\n    //\n    const getOffsetParent =\n      this.strategy === 'absolute'\n        ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n        : platform.getOffsetParent;\n\n    computePosition(this.anchorEl, this.popup, {\n      placement: this.placement,\n      middleware,\n      strategy: this.strategy,\n      platform: {\n        ...platform,\n        getOffsetParent\n      }\n    }).then(({ x, y, middlewareData, placement }) => {\n      //\n      // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of\n      // that, we'll use the same approach that Floating UI uses.\n      //\n      // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31\n      //\n      const isRtl = getComputedStyle(this).direction === 'rtl';\n      const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;\n\n      this.setAttribute('data-current-placement', placement);\n\n      Object.assign(this.popup.style, {\n        left: `${x}px`,\n        top: `${y}px`\n      });\n\n      if (this.arrow) {\n        const arrowX = middlewareData.arrow!.x;\n        const arrowY = middlewareData.arrow!.y;\n        let top = '';\n        let right = '';\n        let bottom = '';\n        let left = '';\n\n        if (this.arrowPlacement === 'start') {\n          // Start\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? value : '';\n          left = isRtl ? '' : value;\n        } else if (this.arrowPlacement === 'end') {\n          // End\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? '' : value;\n          left = isRtl ? value : '';\n          bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n        } else if (this.arrowPlacement === 'center') {\n          // Center\n          left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n          top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n        } else {\n          // Anchor (default)\n          left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n          top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n        }\n\n        Object.assign(this.arrowEl.style, {\n          top,\n          right,\n          bottom,\n          left,\n          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'\n        });\n      }\n    });\n\n    this.emit('reposition');\n  }\n\n  render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this.handleAnchorChange}></slot>\n\n      <div\n        part=\"popup\"\n        class=${classMap({\n          popup: true,\n          'popup--active': this.active,\n          'popup--fixed': this.strategy === 'fixed',\n          'popup--has-arrow': this.arrow\n        })}\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\" class=\"popup__arrow\" role=\"presentation\"></div>` : ''}\n      </div>\n    `;\n  }\n}\n\nexport default NilePopup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popup': NilePopup;\n  }\n}\n"]}
+{"version":3,"file":"nile-popup.js","sourceRoot":"","sources":["../../../src/nile-popup/nile-popup.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, CSSResultArray, TemplateResult} from 'lit-element';\nimport { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { offsetParent } from 'composed-offset-position';\nimport NileElement from '../internal/nile-element';\nimport {styles} from './nile-popup.css';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popup\n *\n */\n@customElement('nile-popup')\nexport class NilePopup extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private anchorEl: Element | null;\n  private cleanup: ReturnType<typeof autoUpdate> | undefined;\n\n  /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */\n  @query('.popup') popup: HTMLElement;\n  @query('.popup__arrow') private arrowEl: HTMLElement;\n\n  /**\n   * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\n   * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n   */\n  @property() anchor: Element | string;\n\n  /**\n   * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\n   * down and the popup will be hidden.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\n   * panel inside of the viewport.\n   */\n  @property({ reflect: true }) placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /**\n   * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\n   * clipped, using a `fixed` position strategy can often workaround it.\n   */\n  @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';\n\n  /** The distance in pixels from which to offset the panel away from its anchor. */\n  @property({ type: Number }) distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its anchor. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n   * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n   * `::part(arrow)` in your stylesheet.\n   */\n  @property({ type: Boolean }) arrow = false;\n\n  /**\n   * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\n   * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\n   * align the arrow to the start, end, or center of the popover instead.\n   */\n  @property({ attribute: 'arrow-placement' }) arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n  /**\n   * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\n   * this will prevent it from overflowing the corners.\n   */\n  @property({ attribute: 'arrow-padding', type: Number }) arrowPadding = 10;\n\n  /**\n   * When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n   * `flipFallbackPlacements` to further configure how the fallback placement is determined.\n   */\n  @property({ type: Boolean }) flip = false;\n\n  /**\n   * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\n   * string of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\n   * fallback strategy will be used instead.\n   * */\n  @property({\n    attribute: 'flip-fallback-placements',\n    converter: {\n      fromAttribute: (value: string) => {\n        return value\n          .split(' ')\n          .map(p => p.trim())\n          .filter(p => p !== '');\n      },\n      toAttribute: (value: []) => {\n        return value.join(' ');\n      }\n    }\n  })\n  flipFallbackPlacements = '';\n\n  /**\n   * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\n   * the popup should be positioned using the best available fit based on available space or as it was initially\n   * preferred.\n   */\n  @property({ attribute: 'flip-fallback-strategy' }) flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n  /**\n   * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) flipBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */\n  @property({ attribute: 'flip-padding', type: Number }) flipPadding = 0;\n\n  /** Moves the popup along the axis to keep it in view when clipped. */\n  @property({ type: Boolean }) shift = false;\n\n  /**\n   * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) shiftBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */\n  @property({ attribute: 'shift-padding', type: Number }) shiftPadding = 0;\n\n  /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */\n  @property({ attribute: 'auto-size' }) autoSize: 'horizontal' | 'vertical' | 'both';\n\n  /** Syncs the popup's width or height to that of the anchor element. */\n  @property() sync: 'width' | 'height' | 'both';\n\n  /**\n   * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) autoSizeBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */\n  @property({ attribute: 'auto-size-padding', type: Number }) autoSizePadding = 0;\n\n  async connectedCallback() {\n    super.connectedCallback();\n\n    // Start the positioner after the first update\n    await this.updateComplete;\n    this.start();\n  }\n\n  disconnectedCallback() {\n    this.stop();\n  }\n\n  async updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    // Start or stop the positioner when active changes\n    if (changedProps.has('active')) {\n      if (this.active) {\n        this.start();\n      } else {\n        this.stop();\n      }\n    }\n\n    // Update the anchor when anchor changes\n    if (changedProps.has('anchor')) {\n      this.handleAnchorChange();\n    }\n\n    // All other properties will trigger a reposition when active\n    if (this.active) {\n      await this.updateComplete;\n      this.reposition();\n    }\n  }\n\n  private async handleAnchorChange() {\n    await this.stop();\n\n    if (this.anchor && typeof this.anchor === 'string') {\n      // Locate the anchor by id\n      const root = this.getRootNode() as Document | ShadowRoot;\n      this.anchorEl = root.getElementById(this.anchor);\n    } else if (this.anchor instanceof Element) {\n      // Use the anchor's reference\n      this.anchorEl = this.anchor;\n    } else {\n      // Look for a slotted anchor\n      this.anchorEl = this.querySelector<HTMLElement>('[slot=\"anchor\"]');\n    }\n\n    // If the anchor is a <slot>, we'll use the first assigned element as the target since slots use `display: contents`\n    // and positioning can't be calculated on them\n    if (this.anchorEl instanceof HTMLSlotElement) {\n      this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;\n    }\n\n    if (!this.anchorEl) {\n      throw new Error(\n        'Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.'\n      );\n    }\n\n    this.start();\n  }\n\n  private start() {\n    // We can't start the positioner without an anchor\n    if (!this.anchorEl) {\n      return;\n    }\n\n    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {\n      this.reposition();\n    });\n  }\n\n  private async stop(): Promise<void> {\n    return new Promise(resolve => {\n      if (this.cleanup) {\n        this.cleanup();\n        this.cleanup = undefined;\n        this.removeAttribute('data-current-placement');\n        this.style.removeProperty('--auto-size-available-width');\n        this.style.removeProperty('--auto-size-available-height');\n        requestAnimationFrame(() => resolve());\n      } else {\n        resolve();\n      }\n    });\n  }\n\n  /** Forces the popup to recalculate and reposition itself. */\n  reposition() {\n    // Nothing to do if the popup is inactive or the anchor doesn't exist\n    if (!this.active || !this.anchorEl) {\n      return;\n    }\n\n    //\n    // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware\n    //\n    const middleware = [\n      // The offset middleware goes first\n      offset({ mainAxis: this.distance, crossAxis: this.skidding })\n    ];\n\n    // First we sync width/height\n    if (this.sync) {\n      middleware.push(\n        size({\n          apply: ({ rects }) => {\n            const syncWidth = this.sync === 'width' || this.sync === 'both';\n            const syncHeight = this.sync === 'height' || this.sync === 'both';\n            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';\n            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're not matching width/height\n      this.popup.style.width = '';\n      this.popup.style.height = '';\n    }\n\n    // Then we flip\n    if (this.flip) {\n      middleware.push(\n        flip({\n          boundary: this.flipBoundary,\n          // @ts-expect-error - We're converting a string attribute to an array here\n          fallbackPlacements: this.flipFallbackPlacements,\n          fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n          padding: this.flipPadding\n        })\n      );\n    }\n\n    // Then we shift\n    if (this.shift) {\n      middleware.push(\n        shift({\n          boundary: this.shiftBoundary,\n          padding: this.shiftPadding\n        })\n      );\n    }\n\n    // Now we adjust the size as needed\n    if (this.autoSize) {\n      middleware.push(\n        size({\n          boundary: this.autoSizeBoundary,\n          padding: this.autoSizePadding,\n          apply: ({ availableWidth, availableHeight }) => {\n            if (this.autoSize === 'vertical' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-height');\n            }\n\n            if (this.autoSize === 'horizontal' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-width');\n            }\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're no longer using auto-size\n      this.style.removeProperty('--auto-size-available-width');\n      this.style.removeProperty('--auto-size-available-height');\n    }\n\n    // Finally, we add an arrow\n    if (this.arrow) {\n      middleware.push(\n        arrow({\n          element: this.arrowEl,\n          padding: this.arrowPadding\n        })\n      );\n    }\n\n    //\n    // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.\n    //\n    //\n    const getOffsetParent =\n      this.strategy === 'absolute'\n        ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n        : platform.getOffsetParent;\n\n    computePosition(this.anchorEl, this.popup, {\n      placement: this.placement,\n      middleware,\n      strategy: this.strategy,\n      platform: {\n        ...platform,\n        getOffsetParent\n      }\n    }).then(({ x, y, middlewareData, placement }) => {\n      //\n      // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of\n      // that, we'll use the same approach that Floating UI uses.\n      //\n      // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31\n      //\n      const isRtl = getComputedStyle(this).direction === 'rtl';\n      const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;\n\n      this.setAttribute('data-current-placement', placement);\n\n      Object.assign(this.popup.style, {\n        left: `${x}px`,\n        top: `${y}px`\n      });\n\n      if (this.arrow) {\n        const arrowX = middlewareData.arrow!.x;\n        const arrowY = middlewareData.arrow!.y;\n        let top = '';\n        let right = '';\n        let bottom = '';\n        let left = '';\n\n        if (this.arrowPlacement === 'start') {\n          // Start\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? value : '';\n          left = isRtl ? '' : value;\n        } else if (this.arrowPlacement === 'end') {\n          // End\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? '' : value;\n          left = isRtl ? value : '';\n          bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n        } else if (this.arrowPlacement === 'center') {\n          // Center\n          left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n          top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n        } else {\n          // Anchor (default)\n          left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n          top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n        }\n\n        Object.assign(this.arrowEl.style, {\n          top,\n          right,\n          bottom,\n          left,\n          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'\n        });\n      }\n    });\n\n    this.emit('reposition');\n  }\n\n  render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this.handleAnchorChange}></slot>\n\n      <div\n        part=\"popup\"\n        class=${classMap({\n          popup: true,\n          'popup--active': this.active,\n          'popup--fixed': this.strategy === 'fixed',\n          'popup--has-arrow': this.arrow\n        })}\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\" class=\"popup__arrow\" role=\"presentation\"></div>` : ''}\n      </div>\n    `;\n  }\n}\n\nexport default NilePopup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popup': NilePopup;\n  }\n}\n"]}

package/dist/src/nile-select/index.d.ts

@@ -0,0 +1 @@
+export { NileSelect } from './nile-select';

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

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

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

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

package/dist/src/nile-select/nile-select.css.d.ts

@@ -1,2 +1,12 @@
-declare const _default: import("lit").CSSResult;
+/**
+* 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.
+*/
+/**
+ * Select_2 CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
 export default _default;