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

package/src/nile-icon-button/nile-icon-button.css.ts

@@ -0,0 +1,63 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * IconButton CSS
+ */
+export const styles = css`
+
+:host {
+    display: inline-block;
+    color: hsl(240 5.2% 33.9%);
+  }
+
+  .icon-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: 0.25rem;
+    font-size: inherit;
+    color: inherit;
+    padding: 0.5rem;
+    cursor: pointer;
+    transition: 50ms; color;
+    -webkit-appearance: none;
+  }
+
+  .icon-button:hover:not(.icon-button--disabled),
+  .icon-button:focus-visible:not(.icon-button--disabled) {
+    color: hsl(200.4 98% 39.4%);
+  }
+
+  .icon-button:active:not(.icon-button--disabled) {
+    color: hsl(201.3 96.3% 32.2%);
+  }
+
+  .icon-button:focus {
+    outline: none;
+  }
+
+  .icon-button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .icon-button:focus-visible {
+    outline: hsl(200.4 98% 39.4%);
+    outline-offset: 1px;
+  }
+
+  .icon-button__icon {
+    pointer-events: none;
+  }
+`;
+
+export default [styles];

package/src/nile-icon-button/nile-icon-button.ts

@@ -0,0 +1,154 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-icon-button.css';
+
+import '../nile-icon';
+import { classMap } from 'lit/directives/class-map.js';
+import { query, state } from 'lit/decorators.js';
+import { literal, html } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import type { CSSResultGroup } from 'lit';
+import NileElement from '../internal/nile-element';
+
+/**
+ * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-icon
+ *
+ * @event nile-blur - Emitted when the icon button loses focus.
+ * @event nile-focus - Emitted when the icon button gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+/**
+ * Nile icon component.
+ *
+ * @tag nile-icon-button
+ *
+ */
+@customElement('nile-icon-button')
+export class NileIconButton extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;
+
+  @state() private hasFocus = false;
+
+  /** The name of the icon to draw. Available names depend on the icon library being used. */
+  @property() name?: string;
+
+  /** The name of a registered custom icon library. */
+  @property() library?: string;
+
+  /**
+   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+   * can result in XSS attacks.
+   */
+  @property() src?: string;
+
+  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+  @property() href?: string;
+
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  @property() target?: '_blank' | '_parent' | '_self' | '_top';
+
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
+  @property() download?: string;
+
+  /**
+   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label
+   * that describes what the icon button does.
+   */
+  @property() label = '';
+
+  /** Disables the button. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('nile-blur');
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('nile-focus');
+  }
+
+  private handleClick(event: MouseEvent) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  /** Simulates a click on the icon button. */
+  click() {
+    this.button.click();
+  }
+
+  /** Sets focus on the icon button. */
+  focus(options?: FocusOptions) {
+    this.button.focus(options);
+  }
+
+  /** Removes focus from the icon button. */
+  blur() {
+    this.button.blur();
+  }
+
+  render() {
+    const isLink = this.href ? true : false;
+    const tag = isLink ? literal`a` : literal`button`;
+
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+          'icon-button': true,
+          'icon-button--disabled': !isLink && this.disabled,
+          'icon-button--focused': this.hasFocus
+        })}
+        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
+        type=${ifDefined(isLink ? undefined : 'button')}
+        href=${ifDefined(isLink ? this.href : undefined)}
+        target=${ifDefined(isLink ? this.target : undefined)}
+        download=${ifDefined(isLink ? this.download : undefined)}
+        rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}
+        role=${ifDefined(isLink ? undefined : 'button')}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-label="${this.label}"
+        tabindex=${this.disabled ? '-1' : '0'}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <nile-icon
+          class="icon-button__icon"
+          name=${ifDefined(this.name)}
+          library=${ifDefined(this.library)}
+          src=${ifDefined(this.src)}
+          aria-hidden="true"
+        ></nile-icon>
+      </${tag}>
+    `;
+  }
+}
+
+
+export default NileIconButton;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-icon-button': NileIconButton;
+  }
+}

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

@@ -126,15 +126,15 @@ export const styles = css`
   }
 
   .input--standard.input--warning {
-    border-color: #E5BF43;
+    border-color: #e5bf43;
   }
 
   .input--standard.input--error {
-    border-color: #E5434D;
+    border-color: #e5434d;
   }
 
   .input--standard.input--success {
-    border-color: #43E5C0;
+    border-color: #43e5c0;
   }
 
   /* Filled inputs */
@@ -264,7 +264,7 @@ export const styles = css`
   }
 
   .input--small .input__control {
-    height: calc(1.875rem - 1px * 2);
+    height: calc(1.875rem);
     padding: 0 0.75rem;
   }
 
@@ -416,6 +416,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];

package/src/nile-menu/index.ts

@@ -1,116 +1 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-/**
- * An nile-menu element.
- *
- * @fires count-changed - Indicates when the count changes
- * @slot - This element has a slot
- * @csspart button - The button
- */
-@customElement('nile-menu')
-export class NileMenu extends LitElement {
-  static override styles = css`
-    :host {
-      display: block;
-      width: 100%;
-    }
-    .nds-menu {
-      display: flex;
-      padding: 6px 6px;
-      border-radius: 4px;
-      cursor: pointer;
-      margin-bottom: 12px;
-      align-items: center;
-      text-decoration: none;
-    }
-
-    .nds-menu:hover {
-      background: rgba(0, 94, 166, 0.1);
-    }
-    .nds-menu__link {
-      font-family: var(--nile-font-family-sans-serif);
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 14px;
-      letter-spacing: 0.2px;
-      color: #131415;
-      text-decoration: none;
-      margin-left: 12px;
-    }
-    .nds-menu--active {
-      background: rgba(0, 94, 166, 0.1);
-    }
-
-    .nds-menu__icon {
-      margin-bottom: 0;
-      height: 14px;
-    }
-
-    .nds-menu--short {
-      width: auto;
-      /* min-width: 30px; */
-    }
-    .nds-menu--short > .nds-menu__link {
-      display:none;
-    }
-  `;
-
-  /**
-   * Button Lab
-   */
-  @property()
-  name = 'Heading 1';
-
-  /**
-   * Button Lab
-   */
-  @property()
-  icon: string = "";
-
-  /**
-   * Button Lab
-   */
-  @property()
-  isActive: boolean = false;
-
-  /**
-   * Displays shorter version
-   */
-  @property()
-  short: boolean = false;
-
-
-  get buttonClassMap() {
-    return {
-      'nds-menu--active': this.isActive,
-      'nds-menu--short': this.short
-    };
-  }
-
-  /**
-   * Button Lab
-   */
-  @property()
-  href = "/";
-
-  override render() {
-    const { name, icon, href } = this;
-    const hrefPath = `/${href}`;
-    return html`
-      <a class="nds-menu ${classMap(this.buttonClassMap)}">
-        <span class="nds-menu__icon">
-          <nile-icon name="${this.icon}" size="14" color="#000"></nile-icon>
-        </span>
-        <span class="nds-menu__link">${this.name}</span>
-      </a>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-menu': NileMenu;
-  }
-}
+export { NileMenu } from './nile-menu';

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * Menu CSS
+ */
+export const styles = css`
+ :host {
+    display: block;
+    position: relative;
+    background: hsl(0, 0%, 100%);
+    border: solid 1px hsl(240 5.9% 90%);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    overflow: auto;
+    overscroll-behavior: none;
+  }
+
+  ::slotted(nile-divider) {
+    --spacing: 0.5rem;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,169 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import {  query } from 'lit/decorators.js';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+import type NileMenuItem from '../nile-menu-item/nile-menu-item';
+import {styles} from './nile-menu.css';
+
+/**
+ * An nile-menu element.
+ * @summary Menus provide a list of options for the user to choose from.
+ *
+ * @slot - The menu's content, including menu items, menu labels, and dividers.
+ *
+ * @event nile-select - Emitted when a menu item is selected.
+ * @fires count-changed - Indicates when the count changes
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+
+@customElement('nile-menu')
+export class NileMenu extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  @query('slot') defaultSlot: HTMLSlotElement;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'menu');
+  }
+
+  private handleClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const item = target.closest('nile-menu-item');
+
+    // if (!item || item.disabled || item.inert) {
+    if (!item || item.disabled) {
+      return;
+    }
+
+    if (item.type === 'checkbox') {
+      item.checked = !item.checked;
+    }
+
+    this.emit('nile-select', { value :item.value });
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    // Make a selection when pressing enter
+    if (event.key === 'Enter') {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+
+      // Simulate a click to support @click handlers on menu items that also work with the keyboard
+      item?.click();
+    }
+
+    // Prevent scrolling when space is pressed
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+
+    // Move the selection when pressing down or up
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+
+      if (items.length > 0) {
+        event.preventDefault();
+
+        if (event.key === 'ArrowDown') {
+          index++;
+        } else if (event.key === 'ArrowUp') {
+          index--;
+        } else if (event.key === 'Home') {
+          index = 0;
+        } else if (event.key === 'End') {
+          index = items.length - 1;
+        }
+
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+
+  private handleMouseDown(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target as NileMenuItem);
+    }
+  }
+
+  private handleSlotChange() {
+    const items = this.getAllItems();
+
+    // Reset the roving tab index when the slotted items change
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+
+  private isMenuItem(item: HTMLElement) {
+    return (
+      item.tagName.toLowerCase() === 'nile-menu-item' ||
+      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')
+    );
+  }
+
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {
+      if ( !this.isMenuItem(el)) {
+      // if (el.inert || !this.isMenuItem(el)) {
+        return false;
+      }
+      return true;
+    }) as NileMenuItem[];
+  }
+
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
+  }
+
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item: NileMenuItem) {
+    const items = this.getAllItems();
+
+    // Update tab indexes
+    items.forEach(i => {
+      i.setAttribute('tabindex', i === item ? '0' : '-1');
+    });
+  }
+
+  render() {
+    return html`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+  `;
+  }
+}
+export default NileMenu;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-menu': NileMenu;
+  }
+}

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

@@ -0,0 +1 @@
+export { NileMenuItem } from './nile-menu-item';

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

@@ -0,0 +1,123 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * MenuItem CSS
+ */
+export const styles = css`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.8;
+    letter-spacing: normal;
+    color: hsl(240 5.3% 26.1%);
+    padding: 0.25rem 0.25rem;
+    transition: 150ms fill;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item .menu-item__label {
+    flex: 1 1 auto;
+    display: inline-block;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: 0.5rem;
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+    background-color: hsl(240 4.8% 95.9%);
+    color: hsl(0, 0%, 0%);
+  }
+
+  :host(:focus-visible) .menu-item {
+    outline: none;
+    background-color: hsl(200.4 98% 39.4%);
+    color: hsl(0, 0%, 100%);
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;
+
+export default [styles];