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

package/dist/watch.cjs.js

@@ -0,0 +1,2 @@
+System.register([],function(_export,_context){"use strict";return{setters:[],execute:function(){}};});
+//# sourceMappingURL=watch.cjs.js.map

package/dist/watch.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watch.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/watch.esm.js

@@ -0,0 +1 @@
+

package/package.json

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

package/src/index.ts

@@ -15,3 +15,7 @@ export { NileSlideToggle } from './nile-slide-toggle';
 export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
+export { NileSelect } from './nile-select';
+export { NileOption } from './nile-option';
+export { NileTag } from './nile-tag';
+export { NileIconButton } from './nile-icon-button';

package/src/internal/form.ts

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

package/src/internal/offset.ts

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

package/src/internal/scroll.ts

@@ -0,0 +1,69 @@
+import { getOffset } from './offset';
+
+const locks = new Set();
+
+/** Returns the width of the document's scrollbar */
+function getScrollbarWidth() {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+}
+
+/**
+ * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+ * without premature unlocking.
+ */
+export function lockBodyScrolling(lockingEl: HTMLElement) {
+  locks.add(lockingEl);
+
+  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from
+  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.
+  if (!document.body.classList.contains('nile-scroll-lock')) {
+    const scrollbarWidth = getScrollbarWidth(); // must be measured before the `nile-scroll-lock` class is applied
+    document.body.classList.add('nile-scroll-lock');
+    document.body.style.setProperty('--nile-scroll-lock-size', `${scrollbarWidth}px`);
+  }
+}
+
+/**
+ * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+ */
+export function unlockBodyScrolling(lockingEl: HTMLElement) {
+  locks.delete(lockingEl);
+
+  if (locks.size === 0) {
+    document.body.classList.remove('nile-scroll-lock');
+    document.body.style.removeProperty('--nile-scroll-lock-size');
+  }
+}
+
+/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */
+export function scrollIntoView(
+  element: HTMLElement,
+  container: HTMLElement,
+  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',
+  behavior: 'smooth' | 'auto' = 'smooth'
+) {
+  const offset = getOffset(element, container);
+  const offsetTop = offset.top + container.scrollTop;
+  const offsetLeft = offset.left + container.scrollLeft;
+  const minX = container.scrollLeft;
+  const maxX = container.scrollLeft + container.offsetWidth;
+  const minY = container.scrollTop;
+  const maxY = container.scrollTop + container.offsetHeight;
+
+  if (direction === 'horizontal' || direction === 'both') {
+    if (offsetLeft < minX) {
+      container.scrollTo({ left: offsetLeft, behavior });
+    } else if (offsetLeft + element.clientWidth > maxX) {
+      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+    }
+  }
+
+  if (direction === 'vertical' || direction === 'both') {
+    if (offsetTop < minY) {
+      container.scrollTo({ top: offsetTop, behavior });
+    } else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export { NileIconButton } from './nile-icon-button';

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;
   }
 

package/src/nile-option/index.ts

@@ -0,0 +1 @@
+export { NileOption } from './nile-option';

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

@@ -0,0 +1,97 @@
+/**
+ * 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';
+
+/**
+ * Option_2 CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+    user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  .option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.8;
+    letter-spacing: normal;
+    color: hsl(240 5.3% 26.1%);
+    padding: 0.5rem 1rem 0.5rem 0.5rem;
+    transition: 150ms fill;
+    cursor: pointer;
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: rgba(0, 94, 166, 0.1);
+    color: hsl(0, 0%, 0%);
+  }
+
+  .option--current,
+  .option--current.option--disabled {
+    background-color: rgba(0, 94, 166, 0.1);
+    color: #005ea6;
+    opacity: 1;
+  }
+
+  .option--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .option__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    line-height: 1.4;
+  }
+
+  .option .option__check {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    padding-inline-end: 0.25rem;
+  }
+
+  .option--selected .option__check {
+    visibility: visible;
+  }
+
+  .option__prefix,
+  .option__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option__prefix::slotted(*) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: 0.5rem;
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .option {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;
+
+export default [styles];

package/src/nile-option/nile-option.ts

@@ -0,0 +1,172 @@
+/**
+ * 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, CSSResultArray, TemplateResult } from 'lit-element';
+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 type { CSSResultGroup } from 'lit';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-option
+ *
+ */
+
+/**
+ * @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.
+ */
+
+@customElement('nile-option')
+export class NileOption extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private cachedTextLabel: string;
+
+  @query('.option__label') defaultSlot: HTMLSlotElement;
+
+  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+  @state() selected = false; // the option is selected and has aria-selected="true"
+  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
+  @state() 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
+   * multiple values.
+   */
+  @property({ reflect: true }) value = '';
+
+  /** Draws the option in a disabled state, preventing selection. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'option');
+    this.setAttribute('aria-selected', 'false');
+  }
+
+  private handleDefaultSlotChange() {
+    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,
+      });
+    }
+  }
+
+  private handleMouseEnter() {
+    this.hasHover = true;
+  }
+
+  private handleMouseLeave() {
+    this.hasHover = false;
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  @watch('selected')
+  handleSelectedChange() {
+    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+  }
+
+  @watch('value')
+  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
+            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>`
+        : ''}
+    `;
+  }
+}
+
+export default NileOption;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-option': NileOption;
+  }
+}

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

@@ -13,7 +13,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/src/nile-popup/nile-popup.ts

@@ -355,7 +355,6 @@ export 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'