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

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

@@ -0,0 +1,412 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html, property } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-dropdown.css';
+import { animateTo, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { getTabbableBoundary } from '../internal/tabbable';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import '../nile-popup';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-dropdown
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ * @dependency nile-popup
+ *
+ * @slot - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<nile-button>` element.
+ *
+ * @event nile-show - Emitted when the dropdown opens.
+ * @event nile-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event nile-hide - Emitted when the dropdown closes.
+ * @event nile-after-hide - Emitted after the dropdown closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart trigger - The container that wraps the trigger.
+ * @csspart panel - The panel that gets shown when the dropdown is open.
+ *
+ * @animation dropdown.show - The animation to use when showing the dropdown.
+ * @animation dropdown.hide - The animation to use when hiding the dropdown.
+ */
+let NileDropdown = class NileDropdown extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+         * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+         */
+        this.open = false;
+        /**
+         * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+         * inside of the viewport.
+         */
+        this.placement = 'bottom-start';
+        /** Disables the dropdown so the panel will not open. */
+        this.disabled = false;
+        /**
+         * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+         * dropdowns that allow for multiple interactions.
+         */
+        this.stayOpenOnSelect = false;
+        /** The distance in pixels from which to offset the panel away from its trigger. */
+        this.distance = 0;
+        this.noOpenOnClick = false;
+        /** The distance in pixels from which to offset the panel along its trigger. */
+        this.skidding = 0;
+        /**
+         * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+         * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+         */
+        this.hoist = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handlePanelSelect = this.handlePanelSelect.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+        this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+        if (!this.containingElement) {
+            this.containingElement = this;
+        }
+    }
+    firstUpdated() {
+        this.panel.hidden = !this.open;
+        // If the dropdown is visible on init, update its position
+        if (this.open) {
+            this.addOpenListeners();
+            this.popup.active = true;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeOpenListeners();
+        this.hide();
+    }
+    focusOnTrigger() {
+        const trigger = this.trigger.assignedElements({ flatten: true })[0];
+        if (typeof trigger?.focus === 'function') {
+            trigger.focus();
+        }
+    }
+    getMenu() {
+        return this.panel.assignedElements({ flatten: true }).find(el => el.tagName.toLowerCase() === 'nile-menu');
+    }
+    handleKeyDown(event) {
+        // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation
+        // in case any ancestors are also listening for this key.
+        if (this.open && event.key === 'Escape') {
+            event.stopPropagation();
+            this.hide();
+            this.focusOnTrigger();
+        }
+    }
+    handleDocumentKeyDown(event) {
+        // Close when escape or tab is pressed
+        if (event.key === 'Escape' && this.open) {
+            event.stopPropagation();
+            this.focusOnTrigger();
+            this.hide();
+            return;
+        }
+        // Handle tabbing
+        if (event.key === 'Tab') {
+            // Tabbing within an open menu should close the dropdown and refocus the trigger
+            if (this.open && document.activeElement?.tagName.toLowerCase() === 'nile-menu-item') {
+                event.preventDefault();
+                this.hide();
+                this.focusOnTrigger();
+                return;
+            }
+            // Tabbing outside of the containing element closes the panel
+            //
+            // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
+            // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
+            setTimeout(() => {
+                const activeElement = this.containingElement?.getRootNode() instanceof ShadowRoot
+                    ? document.activeElement?.shadowRoot?.activeElement
+                    : document.activeElement;
+                if (!this.containingElement ||
+                    activeElement?.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement) {
+                    this.hide();
+                }
+            });
+        }
+    }
+    handleDocumentMouseDown(event) {
+        // Close when clicking outside of the containing element
+        const path = event.composedPath();
+        if (this.containingElement && !path.includes(this.containingElement)) {
+            this.hide();
+        }
+    }
+    handlePanelSelect(event) {
+        const target = event.target;
+        // Hide the dropdown when a menu item is selected
+        if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'nile-menu') {
+            this.hide();
+            this.focusOnTrigger();
+        }
+    }
+    handleTriggerClick() {
+        if (this.noOpenOnClick) {
+            return;
+        }
+        if (this.open) {
+            this.hide();
+        }
+        else {
+            this.show();
+            this.focusOnTrigger();
+        }
+    }
+    handleTriggerKeyDown(event) {
+        // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
+        // key again to hide the menu in case they don't want to make a selection.
+        // if (['Enter'].includes(event.key)) {
+        //   event.preventDefault();
+        //   this.handleTriggerClick();
+        //   return;
+        // }
+        const menu = this.getMenu();
+        if (menu) {
+            const menuItems = menu.getAllItems();
+            const firstMenuItem = menuItems[0];
+            const lastMenuItem = menuItems[menuItems.length - 1];
+            // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
+            // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
+            // faster navigation.
+            if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                event.preventDefault();
+                // Show the menu if it's not already open
+                if (!this.open) {
+                    this.show();
+                }
+                if (menuItems.length > 0) {
+                    // Focus on the first/last menu item after showing
+                    this.updateComplete.then(() => {
+                        if (event.key === 'ArrowDown' || event.key === 'Home') {
+                            menu.setCurrentItem(firstMenuItem);
+                            firstMenuItem.focus();
+                        }
+                        if (event.key === 'ArrowUp' || event.key === 'End') {
+                            menu.setCurrentItem(lastMenuItem);
+                            lastMenuItem.focus();
+                        }
+                    });
+                }
+            }
+        }
+    }
+    handleTriggerKeyUp(event) {
+        // Prevent space from triggering a click event in Firefox
+        if (event.key === ' ') {
+            event.preventDefault();
+        }
+    }
+    handleTriggerSlotChange() {
+        this.updateAccessibleTrigger();
+    }
+    //
+    // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+    // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+    // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+    // a child of the slotted element, or an element in the slotted element's shadow root.
+    //
+    // For example, the accessible trigger of an <nile-button> is a <button> located inside its shadow root.
+    //
+    // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+    //
+    updateAccessibleTrigger() {
+        const assignedElements = this.trigger.assignedElements({ flatten: true });
+        const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
+        let target;
+        if (accessibleTrigger) {
+            switch (accessibleTrigger.tagName.toLowerCase()) {
+                // nile buttons have to update the internal button so it's announced correctly by screen readers
+                case 'nile-button':
+                case 'nile-icon-button':
+                    target = accessibleTrigger.button;
+                    break;
+                default:
+                    target = accessibleTrigger;
+            }
+            target.setAttribute('aria-haspopup', 'true');
+            target.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+        }
+    }
+    /** Shows the dropdown panel. */
+    async show() {
+        if (this.open) {
+            return undefined;
+        }
+        this.open = true;
+        return waitForEvent(this, 'nile-after-show');
+    }
+    /** Hides the dropdown panel */
+    async hide() {
+        if (!this.open) {
+            return undefined;
+        }
+        this.open = false;
+        return waitForEvent(this, 'nile-after-hide');
+    }
+    /**
+     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+     * is activated.
+     */
+    reposition() {
+        this.popup.reposition();
+    }
+    addOpenListeners() {
+        this.panel.addEventListener('nile-select', this.handlePanelSelect);
+        this.panel.addEventListener('keydown', this.handleKeyDown);
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+        document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+    removeOpenListeners() {
+        if (this.panel) {
+            this.panel.removeEventListener('nile-select', this.handlePanelSelect);
+            this.panel.removeEventListener('keydown', this.handleKeyDown);
+        }
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+    async handleOpenChange() {
+        if (this.disabled) {
+            this.open = false;
+            return;
+        }
+        this.updateAccessibleTrigger();
+        if (this.open) {
+            // Show
+            this.emit('nile-show');
+            this.addOpenListeners();
+            await stopAnimations(this);
+            this.panel.hidden = false;
+            this.popup.active = true;
+            const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });
+            await animateTo(this.popup.popup, keyframes, options);
+            this.emit('nile-after-show');
+        }
+        else {
+            // Hide
+            this.emit('nile-hide');
+            this.removeOpenListeners();
+            await stopAnimations(this);
+            const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });
+            await animateTo(this.popup.popup, keyframes, options);
+            this.panel.hidden = true;
+            this.popup.active = false;
+            this.emit('nile-after-hide');
+        }
+    }
+    render() {
+        return html `
+      <nile-popup
+        part="base"
+        id="dropdown"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        auto-size="both"
+        auto-size-padding="10"
+        class=${classMap({
+            dropdown: true,
+            'dropdown--open': this.open
+        })}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="dropdown__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <slot
+          part="panel"
+          class="dropdown__panel"
+          aria-hidden=${this.open ? 'false' : 'true'}
+          aria-labelledby="dropdown"
+        ></slot>
+      </nile-popup>
+    `;
+    }
+};
+NileDropdown.styles = styles;
+__decorate([
+    query('.dropdown')
+], NileDropdown.prototype, "popup", void 0);
+__decorate([
+    query('.dropdown__trigger')
+], NileDropdown.prototype, "trigger", void 0);
+__decorate([
+    query('.dropdown__panel')
+], NileDropdown.prototype, "panel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDropdown.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], NileDropdown.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDropdown.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true })
+], NileDropdown.prototype, "stayOpenOnSelect", void 0);
+__decorate([
+    property({ attribute: false })
+], NileDropdown.prototype, "containingElement", void 0);
+__decorate([
+    property({ type: Number })
+], NileDropdown.prototype, "distance", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileDropdown.prototype, "noOpenOnClick", void 0);
+__decorate([
+    property({ type: Number })
+], NileDropdown.prototype, "skidding", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileDropdown.prototype, "hoist", void 0);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], NileDropdown.prototype, "handleOpenChange", null);
+NileDropdown = __decorate([
+    customElement('nile-dropdown')
+], NileDropdown);
+export { NileDropdown };
+setDefaultAnimation('dropdown.show', {
+    keyframes: [
+        { opacity: 0, scale: 0.9 },
+        { opacity: 1, scale: 1 }
+    ],
+    options: { duration: 100, easing: 'ease' }
+});
+setDefaultAnimation('dropdown.hide', {
+    keyframes: [
+        { opacity: 1, scale: 1 },
+        { opacity: 0, scale: 0.9 }
+    ],
+    options: { duration: 100, easing: 'ease' }
+});
+export default NileDropdown;
+//# sourceMappingURL=nile-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-dropdown.js","sourceRoot":"","sources":["../../../src/nile-dropdown/nile-dropdown.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, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-dropdown.css';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {  query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { getTabbableBoundary } from '../internal/tabbable';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileButton from '../nile-button/nile-button';\nimport type NileIconButton from '../nile-icon-button/nile-icon-button';\nimport type { NileMenu } from '../nile-menu';\nimport type { NilePopup } from '../nile-popup';\nimport '../nile-popup';\n\n/**\n * Nile icon component.\n *\n * @tag nile-dropdown\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @dependency nile-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<nile-button>` element.\n *\n * @event nile-show - Emitted when the dropdown opens.\n * @event nile-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event nile-hide - Emitted when the dropdown closes.\n * @event nile-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */\n@customElement('nile-dropdown')\nexport class NileDropdown extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @query('.dropdown') popup: NilePopup;\n  @query('.dropdown__trigger') trigger: HTMLSlotElement;\n  @query('.dropdown__panel') panel: HTMLSlotElement;\n\n\n  /**\n   * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\n   * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * 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' = 'bottom-start';\n\n  /** Disables the dropdown so the panel will not open. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\n   * dropdowns that allow for multiple interactions.\n   */\n  @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true }) stayOpenOnSelect = false;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\n   * components that use a dropdown internally.\n   */\n  @property({ attribute: false }) containingElement?: HTMLElement;\n\n  /** The distance in pixels from which to offset the panel away from its trigger. */\n  @property({ type: Number }) distance = 0;\n\n\n  @property({ type: Boolean }) noOpenOnClick = false;\n\n  /** The distance in pixels from which to offset the panel along its trigger. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handlePanelSelect = this.handlePanelSelect.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) {\n      this.containingElement = this;\n    }\n  }\n\n  firstUpdated() {\n    this.panel.hidden = !this.open;\n\n    // If the dropdown is visible on init, update its position\n    if (this.open) {\n      this.addOpenListeners();\n      this.popup.active = true;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeOpenListeners();\n    this.hide();\n  }\n\n  focusOnTrigger() {\n    const trigger = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n    if (typeof trigger?.focus === 'function') {\n      trigger.focus();\n    }\n  }\n\n  getMenu() {\n    return this.panel.assignedElements({ flatten: true }).find(el => el.tagName.toLowerCase() === 'nile-menu') as\n      | NileMenu\n      | undefined;\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation\n    // in case any ancestors are also listening for this key.\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n      this.focusOnTrigger();\n    }\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape or tab is pressed\n    if (event.key === 'Escape' && this.open) {\n      event.stopPropagation();\n      this.focusOnTrigger();\n      this.hide();\n      return;\n    }\n\n    // Handle tabbing\n    if (event.key === 'Tab') {\n      // Tabbing within an open menu should close the dropdown and refocus the trigger\n      if (this.open && document.activeElement?.tagName.toLowerCase() === 'nile-menu-item') {\n        event.preventDefault();\n        this.hide();\n        this.focusOnTrigger();\n        return;\n      }\n\n      // Tabbing outside of the containing element closes the panel\n      //\n      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n      setTimeout(() => {\n        const activeElement =\n          this.containingElement?.getRootNode() instanceof ShadowRoot\n            ? document.activeElement?.shadowRoot?.activeElement\n            : document.activeElement;\n\n        if (\n          !this.containingElement ||\n          activeElement?.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement\n        ) {\n          this.hide();\n        }\n      });\n    }\n  }\n\n  handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the containing element\n    const path = event.composedPath();\n    if (this.containingElement && !path.includes(this.containingElement)) {\n      this.hide();\n    }\n  }\n\n  handlePanelSelect(event: any) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'nile-menu') {\n      this.hide();\n      this.focusOnTrigger();\n    }\n  }\n\n  handleTriggerClick() {\n    if(this.noOpenOnClick){\n      return;\n    }\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n      this.focusOnTrigger();\n    }\n  }\n\n  handleTriggerKeyDown(event: KeyboardEvent) {\n    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n    // key again to hide the menu in case they don't want to make a selection.\n    // if (['Enter'].includes(event.key)) {\n    //   event.preventDefault();\n    //   this.handleTriggerClick();\n    //   return;\n    // }\n\n    const menu = this.getMenu();\n\n    if (menu) {\n      const menuItems = menu.getAllItems();\n      const firstMenuItem = menuItems[0];\n      const lastMenuItem = menuItems[menuItems.length - 1];\n\n      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n      // faster navigation.\n      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n        event.preventDefault();\n\n        // Show the menu if it's not already open\n        if (!this.open) {\n          this.show();\n        }\n\n        if (menuItems.length > 0) {\n          // Focus on the first/last menu item after showing\n          this.updateComplete.then(() => {\n            if (event.key === 'ArrowDown' || event.key === 'Home') {\n              menu.setCurrentItem(firstMenuItem);\n              firstMenuItem.focus();\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'End') {\n              menu.setCurrentItem(lastMenuItem);\n              lastMenuItem.focus();\n            }\n          });\n        }\n      }\n    }\n  }\n\n  handleTriggerKeyUp(event: KeyboardEvent) {\n    // Prevent space from triggering a click event in Firefox\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n  }\n\n  handleTriggerSlotChange() {\n    this.updateAccessibleTrigger();\n  }\n\n  //\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  // a child of the slotted element, or an element in the slotted element's shadow root.\n  //\n  // For example, the accessible trigger of an <nile-button> is a <button> located inside its shadow root.\n  //\n  // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n  //\n  updateAccessibleTrigger() {\n    const assignedElements = this.trigger.assignedElements({ flatten: true }) as HTMLElement[];\n    const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);\n    let target: HTMLElement;\n\n    if (accessibleTrigger) {\n      switch (accessibleTrigger.tagName.toLowerCase()) {\n        // nile buttons have to update the internal button so it's announced correctly by screen readers\n        case 'nile-button':\n        case 'nile-icon-button':\n          target = (accessibleTrigger as NileButton | NileIconButton).button;\n          break;\n\n        default:\n          target = accessibleTrigger;\n      }\n\n      target.setAttribute('aria-haspopup', 'true');\n      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n    }\n  }\n\n  /** Shows the dropdown panel. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the dropdown panel */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  /**\n   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n   * is activated.\n   */\n  reposition() {\n    this.popup.reposition();\n  }\n\n  addOpenListeners() {\n    this.panel.addEventListener('nile-select', this.handlePanelSelect);\n    this.panel.addEventListener('keydown', this.handleKeyDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  removeOpenListeners() {\n    if (this.panel) {\n      this.panel.removeEventListener('nile-select', this.handlePanelSelect);\n      this.panel.removeEventListener('keydown', this.handleKeyDown);\n    }\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.disabled) {\n      this.open = false;\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.panel.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n      this.removeOpenListeners();\n\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.panel.hidden = true;\n      this.popup.active = false;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  render() {\n    return html`\n      <nile-popup\n        part=\"base\"\n        id=\"dropdown\"\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        strategy=${this.hoist ? 'fixed' : 'absolute'}\n        flip\n        shift\n        auto-size=\"both\"\n        auto-size-padding=\"10\"\n        class=${classMap({\n          dropdown: true,\n          'dropdown--open': this.open\n        })}\n      >\n        <slot\n          name=\"trigger\"\n          slot=\"anchor\"\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeyDown}\n          @keyup=${this.handleTriggerKeyUp}\n          @slotchange=${this.handleTriggerSlotChange}\n        ></slot>\n\n        <slot\n          part=\"panel\"\n          class=\"dropdown__panel\"\n          aria-hidden=${this.open ? 'false' : 'true'}\n          aria-labelledby=\"dropdown\"\n        ></slot>\n      </nile-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('dropdown.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('dropdown.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n\nexport default NileDropdown;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-dropdown': NileDropdown;\n  }\n}\n"]}

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

@@ -414,6 +414,26 @@ export const styles = css `
   .input--no-spin-buttons input[type='number'] {
     -moz-appearance: textfield;
   }
+
+  :host([no-border]) .input--standard {
+    border: none; /* Remove borders on all sides */
+    box-shadow: 0 0 0 0;
+  }
+
+  :host([no-border]) .input--standard:hover:not(.input--disabled) {
+    border: none; /* Remove borders on all sides */
+    box-shadow: 0 0 0 0;
+  }
+
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
+    border: none; /* Remove borders on all sides */
+    box-shadow: 0 0 0 0;
+  }
+
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
+    border: none; /* Remove borders on all sides */
+    box-shadow: 0 0 0 0;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-input.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsZxB,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 * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: 0.125rem;\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    font-size: 0.875rem;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: 1rem;\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    font-size: 1.25rem;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: undefined;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: hsl(240 3.8% 46.1%);\n    margin-top: 0.125rem;\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: 0.75rem;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 0.875rem;\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: 1rem;\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: 0.25rem;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-family: inherit;\n    font-weight: 400;\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: hsl(0, 0%, 100%);\n    border: solid 1px #c7ced4;\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #000000;\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #005ea6;\n    box-shadow: 0 0 0 3px hsl(198.6 88.7% 48.4% / 40%);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--standard.input--disabled {\n    background-color: hsl(240 4.8% 95.9%);\n    border-color: hsl(240 4.9% 83.9%);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input--standard.input--warning {\n    border-color: #e5bf43;\n  }\n\n  .input--standard.input--error {\n    border-color: #e5434d;\n  }\n\n  .input--standard.input--success {\n    border-color: #43e5c0;\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: hsl(240 4.8% 95.9%);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: hsl(240 4.8% 95.9%);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    min-width: 0;\n    height: 100%;\n    color: hsl(240 5.3% 26.1%);\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: hsl(240 3.8% 46.1%);\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: 0.875rem;\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: 0 0.75rem;\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: 0.75rem;\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: 0.75rem;\n  }\n\n  .input--medium {\n    border-radius: 0.25rem;\n    font-size: 1rem;\n    height: 38px;\n  }\n\n  .input--medium .input__control {\n    height: calc(42px - 1px * 2);\n    padding: 0 1rem;\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: 1rem;\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: 1rem;\n  }\n\n  .input--large {\n    border-radius: 0.25rem;\n    font-size: 1.25rem;\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: 0 1.25rem;\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: 1.25rem;\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: 1.25rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: 1.875rem;\n  }\n\n  .input--pill.input--medium {\n    border-radius: 2.5rem;\n  }\n\n  .input--pill.input--large {\n    border-radius: 3.125rem;\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__password-toggle:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0axB,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 * Input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: 0.125rem;\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    font-size: 0.875rem;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: 1rem;\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    font-size: 1.25rem;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: undefined;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: hsl(240 3.8% 46.1%);\n    margin-top: 0.125rem;\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: 0.75rem;\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: 0.875rem;\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: 1rem;\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: 0.25rem;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-family: inherit;\n    font-weight: 400;\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: hsl(0, 0%, 100%);\n    border: solid 1px #c7ced4;\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #000000;\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: hsl(0, 0%, 100%);\n    border-color: #005ea6;\n    box-shadow: 0 0 0 3px hsl(198.6 88.7% 48.4% / 40%);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--standard.input--disabled {\n    background-color: hsl(240 4.8% 95.9%);\n    border-color: hsl(240 4.9% 83.9%);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: hsl(240 5.9% 10%);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input--standard.input--warning {\n    border-color: #e5bf43;\n  }\n\n  .input--standard.input--error {\n    border-color: #e5434d;\n  }\n\n  .input--standard.input--success {\n    border-color: #43e5c0;\n  }\n\n  /* Filled inputs */\n  .input--filled {\n    border: none;\n    background-color: hsl(240 4.8% 95.9%);\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled:hover:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n  }\n\n  .input--filled.input--focused:not(.input--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n    outline: solid 3px hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .input--filled.input--disabled {\n    background-color: hsl(240 4.8% 95.9%);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    min-width: 0;\n    height: 100%;\n    color: hsl(240 5.3% 26.1%);\n    border: none;\n    background: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n    -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n    caret-color: hsl(240 5.3% 26.1%);\n  }\n\n  .input--filled .input__control:-webkit-autofill {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:hover {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:focus {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input--filled .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: hsl(240 3.8% 46.1%);\n    user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: hsl(240 5.3% 26.1%);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  .input__suffix::slotted(nile-icon) {\n    color: hsl(240 3.8% 46.1%);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: 0.25rem;\n    font-size: 0.875rem;\n    height: 1.875rem;\n  }\n\n  .input--small .input__control {\n    height: calc(1.875rem);\n    padding: 0 0.75rem;\n  }\n\n  .input--small .input__clear {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__password-toggle {\n    width: calc(1em + 0.75rem * 2);\n  }\n\n  .input--small .input__prefix::slotted(*) {\n    margin-inline-start: 0.75rem;\n  }\n\n  .input--small .input__suffix::slotted(*) {\n    margin-inline-end: 0.75rem;\n  }\n\n  .input--medium {\n    border-radius: 0.25rem;\n    font-size: 1rem;\n    height: 38px;\n  }\n\n  .input--medium .input__control {\n    height: calc(42px - 1px * 2);\n    padding: 0 1rem;\n  }\n\n  .input--medium .input__clear {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__password-toggle {\n    width: calc(1em + 1rem * 2);\n  }\n\n  .input--medium .input__prefix::slotted(*) {\n    margin-inline-start: 1rem;\n  }\n\n  .input--medium .input__suffix::slotted(*) {\n    margin-inline-end: 1rem;\n  }\n\n  .input--large {\n    border-radius: 0.25rem;\n    font-size: 1.25rem;\n    height: 3.125rem;\n  }\n\n  .input--large .input__control {\n    height: calc(3.125rem - 1px * 2);\n    padding: 0 1.25rem;\n  }\n\n  .input--large .input__clear {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__password-toggle {\n    width: calc(1em + 1.25rem * 2);\n  }\n\n  .input--large .input__prefix::slotted(*) {\n    margin-inline-start: 1.25rem;\n  }\n\n  .input--large .input__suffix::slotted(*) {\n    margin-inline-end: 1.25rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: 1.875rem;\n  }\n\n  .input--pill.input--medium {\n    border-radius: 2.5rem;\n  }\n\n  .input--pill.input--large {\n    border-radius: 3.125rem;\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: hsl(240 3.8% 46.1%);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__password-toggle:hover {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  :host([no-border]) .input--standard {\n    border: none; /* Remove borders on all sides */\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard:hover:not(.input--disabled) {\n    border: none; /* Remove borders on all sides */\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none; /* Remove borders on all sides */\n    box-shadow: 0 0 0 0;\n  }\n\n  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n    border: none; /* Remove borders on all sides */\n    box-shadow: 0 0 0 0;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -1,41 +1 @@
-import { LitElement } from 'lit';
-/**
- * An nile-menu element.
- *
- * @fires count-changed - Indicates when the count changes
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export declare class NileMenu extends LitElement {
-    static styles: import("lit").CSSResult;
-    /**
-     * Button Lab
-     */
-    name: string;
-    /**
-     * Button Lab
-     */
-    icon: string;
-    /**
-     * Button Lab
-     */
-    isActive: boolean;
-    /**
-     * Displays shorter version
-     */
-    short: boolean;
-    get buttonClassMap(): {
-        'nds-menu--active': boolean;
-        'nds-menu--short': boolean;
-    };
-    /**
-     * Button Lab
-     */
-    href: string;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'nile-menu': NileMenu;
-    }
-}
+export { NileMenu } from './nile-menu';