shoelace-rails-ui 0.1.0 → 0.1.1

data/remote-src/2.0.0.beta64/shoelace-next/src/components/tooltip/tooltip.test.ts

@@ -1,117 +0,0 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlTooltip from './tooltip';
-
-describe('<sl-tooltip>', () => {
-  it('should be visible with the open attribute', async () => {
-    const el = await fixture<SlTooltip>(html`
-      <sl-tooltip content="This is a tooltip" open>
-        <sl-button>Hover Me</sl-button>
-      </sl-tooltip>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-
-    expect(base.hidden).to.be.false;
-  });
-
-  it('should not be visible without the open attribute', async () => {
-    const el = await fixture<SlTooltip>(html`
-      <sl-tooltip content="This is a tooltip">
-        <sl-button>Hover Me</sl-button>
-      </sl-tooltip>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-
-    expect(base.hidden).to.be.true;
-  });
-
-  it('should emit sl-show and sl-after-show when calling show()', async () => {
-    const el = await fixture<SlTooltip>(html`
-      <sl-tooltip content="This is a tooltip">
-        <sl-button>Hover Me</sl-button>
-      </sl-tooltip>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-    const showHandler = sinon.spy();
-    const afterShowHandler = sinon.spy();
-
-    el.addEventListener('sl-show', showHandler);
-    el.addEventListener('sl-after-show', afterShowHandler);
-    el.show();
-
-    await waitUntil(() => showHandler.calledOnce);
-    await waitUntil(() => afterShowHandler.calledOnce);
-
-    expect(showHandler).to.have.been.calledOnce;
-    expect(afterShowHandler).to.have.been.calledOnce;
-    expect(base.hidden).to.be.false;
-  });
-
-  it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
-    const el = await fixture<SlTooltip>(html`
-      <sl-tooltip content="This is a tooltip" open>
-        <sl-button>Hover Me</sl-button>
-      </sl-tooltip>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-    const hideHandler = sinon.spy();
-    const afterHideHandler = sinon.spy();
-
-    el.addEventListener('sl-hide', hideHandler);
-    el.addEventListener('sl-after-hide', afterHideHandler);
-    el.hide();
-
-    await waitUntil(() => hideHandler.calledOnce);
-    await waitUntil(() => afterHideHandler.calledOnce);
-
-    expect(hideHandler).to.have.been.calledOnce;
-    expect(afterHideHandler).to.have.been.calledOnce;
-    expect(base.hidden).to.be.true;
-  });
-
-  it('should emit sl-show and sl-after-show when setting open = true', async () => {
-    const el = await fixture<SlTooltip>(html`
-      <sl-tooltip content="This is a tooltip">
-        <sl-button>Hover Me</sl-button>
-      </sl-tooltip>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-    const showHandler = sinon.spy();
-    const afterShowHandler = sinon.spy();
-
-    el.addEventListener('sl-show', showHandler);
-    el.addEventListener('sl-after-show', afterShowHandler);
-    el.open = true;
-
-    await waitUntil(() => showHandler.calledOnce);
-    await waitUntil(() => afterShowHandler.calledOnce);
-
-    expect(showHandler).to.have.been.calledOnce;
-    expect(afterShowHandler).to.have.been.calledOnce;
-    expect(base.hidden).to.be.false;
-  });
-
-  it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
-    const el = await fixture<SlTooltip>(html`
-      <sl-tooltip content="This is a tooltip" open>
-        <sl-button>Hover Me</sl-button>
-      </sl-tooltip>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-    const hideHandler = sinon.spy();
-    const afterHideHandler = sinon.spy();
-
-    el.addEventListener('sl-hide', hideHandler);
-    el.addEventListener('sl-after-hide', afterHideHandler);
-    el.open = false;
-
-    await waitUntil(() => hideHandler.calledOnce);
-    await waitUntil(() => afterHideHandler.calledOnce);
-
-    expect(hideHandler).to.have.been.calledOnce;
-    expect(afterHideHandler).to.have.been.calledOnce;
-    expect(base.hidden).to.be.true;
-  });
-});

data/remote-src/2.0.0.beta64/shoelace-next/src/components/tooltip/tooltip.ts

@@ -1,355 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { Instance as PopperInstance, createPopper } from '@popperjs/core/dist/esm';
-import { animateTo, parseDuration, stopAnimations } from '../../internal/animate';
-import { emit, waitForEvent } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry';
-import styles from './tooltip.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - The tooltip's target element. Only the first element will be used as the target.
- * @slot content - The tooltip's content. Alternatively, you can use the content prop.
- *
- * @event sl-show - Emitted when the tooltip begins to show.
- * @event sl-after-show - Emitted after the tooltip has shown and all animations are complete.
- * @event sl-hide - Emitted when the tooltip begins to hide.
- * @event sl-after-hide - Emitted after the tooltip has hidden and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --max-width - The maximum width of the tooltip.
- * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
- * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
- *
- * @animation tooltip.show - The animation to use when showing the tooltip.
- * @animation tooltip.hide - The animation to use when hiding the tooltip.
- */
-@customElement('sl-tooltip')
-export default class SlTooltip extends LitElement {
-  static styles = styles;
-
-  @query('.tooltip-positioner') positioner: HTMLElement;
-  @query('.tooltip') tooltip: HTMLElement;
-
-  private target: HTMLElement;
-  private popover: PopperInstance;
-  private hoverTimeout: any;
-
-  /** The tooltip's content. Alternatively, you can use the content slot. */
-  @property() content = '';
-
-  /**
-   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-   * inside of the viewport.
-   */
-  @property() placement:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end' = 'top';
-
-  /** Disables the tooltip so it won't show when triggered. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** The distance in pixels from which to offset the tooltip away from its target. */
-  @property({ type: Number }) distance = 10;
-
-  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /** The distance in pixels from which to offset the tooltip along its target. */
-  @property({ type: Number }) skidding = 0;
-
-  /**
-   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
-   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
-   * programmatically.
-   */
-  @property() trigger = 'hover focus';
-
-  /**
-   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-   * `overflow: auto|hidden|scroll`.
-   */
-  @property({ type: Boolean }) hoist = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleMouseOut = this.handleMouseOut.bind(this);
-
-    this.updateComplete.then(() => {
-      this.addEventListener('blur', this.handleBlur, true);
-      this.addEventListener('focus', this.handleFocus, true);
-      this.addEventListener('click', this.handleClick);
-      this.addEventListener('keydown', this.handleKeyDown);
-      this.addEventListener('mouseover', this.handleMouseOver);
-      this.addEventListener('mouseout', this.handleMouseOut);
-
-      this.target = this.getTarget();
-      this.syncOptions();
-    });
-  }
-
-  firstUpdated() {
-    this.tooltip.hidden = !this.open;
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('blur', this.handleBlur, true);
-    this.removeEventListener('focus', this.handleFocus, true);
-    this.removeEventListener('click', this.handleClick);
-    this.removeEventListener('keydown', this.handleKeyDown);
-    this.removeEventListener('mouseover', this.handleMouseOver);
-    this.removeEventListener('mouseout', this.handleMouseOut);
-
-    if (this.popover) {
-      this.popover.destroy();
-    }
-  }
-
-  /** Shows the tooltip. */
-  async show() {
-    if (this.open) {
-      return;
-    }
-
-    this.open = true;
-    return waitForEvent(this, 'sl-after-show');
-  }
-
-  /** Hides the tooltip */
-  async hide() {
-    if (!this.open) {
-      return;
-    }
-
-    this.open = false;
-    return waitForEvent(this, 'sl-after-hide');
-  }
-
-  getTarget() {
-    // Get the first child that isn't a <style> or content slot
-    const target = [...this.children].find(
-      el => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content'
-    ) as HTMLElement;
-
-    if (!target) {
-      throw new Error('Invalid tooltip target: no child element was found.');
-    }
-
-    return target;
-  }
-
-  handleBlur() {
-    if (this.hasTrigger('focus')) {
-      this.hide();
-    }
-  }
-
-  handleClick() {
-    if (this.hasTrigger('click')) {
-      this.open ? this.hide() : this.show();
-    }
-  }
-
-  handleFocus() {
-    if (this.hasTrigger('focus')) {
-      this.show();
-    }
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    // Pressing escape when the target element has focus should dismiss the tooltip
-    if (this.open && event.key === 'Escape') {
-      event.stopPropagation();
-      this.hide();
-    }
-  }
-
-  handleMouseOver() {
-    if (this.hasTrigger('hover')) {
-      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = setTimeout(() => this.show(), delay);
-    }
-  }
-
-  handleMouseOut() {
-    if (this.hasTrigger('hover')) {
-      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = setTimeout(() => this.hide(), delay);
-    }
-  }
-
-  @watch('open', { waitUntilFirstUpdate: true })
-  async handleOpenChange() {
-    if (this.disabled) {
-      return;
-    }
-
-    if (this.open) {
-      // Show
-      emit(this, 'sl-show');
-
-      await stopAnimations(this.tooltip);
-
-      if (this.popover) {
-        this.popover.destroy();
-      }
-
-      this.popover = createPopper(this.target, this.positioner, {
-        placement: this.placement,
-        strategy: this.hoist ? 'fixed' : 'absolute',
-        modifiers: [
-          {
-            name: 'flip',
-            options: {
-              boundary: 'viewport'
-            }
-          },
-          {
-            name: 'offset',
-            options: {
-              offset: [this.skidding, this.distance]
-            }
-          }
-        ]
-      });
-
-      this.tooltip.hidden = false;
-      const { keyframes, options } = getAnimation(this, 'tooltip.show');
-      await animateTo(this.tooltip, keyframes, options);
-
-      emit(this, 'sl-after-show');
-    } else {
-      // Hide
-      emit(this, 'sl-hide');
-
-      await stopAnimations(this.tooltip);
-      const { keyframes, options } = getAnimation(this, 'tooltip.hide');
-      await animateTo(this.tooltip, keyframes, options);
-      this.tooltip.hidden = true;
-
-      if (this.popover) {
-        this.popover.destroy();
-      }
-
-      emit(this, 'sl-after-hide');
-    }
-  }
-
-  @watch('placement')
-  @watch('distance')
-  @watch('skidding')
-  @watch('hoist')
-  handleOptionsChange() {
-    this.syncOptions();
-  }
-
-  @watch('content')
-  handleContentChange() {
-    if (this.popover && this.open) {
-      this.popover.update();
-    }
-  }
-
-  @watch('disabled')
-  handleDisabledChange() {
-    if (this.disabled && this.open) {
-      this.hide();
-    }
-  }
-
-  hasTrigger(triggerType: string) {
-    const triggers = this.trigger.split(' ');
-    return triggers.includes(triggerType);
-  }
-
-  syncOptions() {
-    if (this.popover) {
-      this.popover.setOptions({
-        placement: this.placement,
-        strategy: this.hoist ? 'fixed' : 'absolute',
-        modifiers: [
-          {
-            name: 'flip',
-            options: {
-              boundary: 'viewport'
-            }
-          },
-          {
-            name: 'offset',
-            options: {
-              offset: [this.skidding, this.distance]
-            }
-          }
-        ]
-      });
-    }
-  }
-
-  render() {
-    return html`
-      <div class="tooltip-content" aria-described-by="tooltip">
-        <slot></slot>
-      </div>
-
-      <div class="tooltip-positioner">
-        <div
-          part="base"
-          id="tooltip"
-          class=${classMap({
-            tooltip: true,
-            'tooltip--open': this.open
-          })}
-          role="tooltip"
-          aria-hidden=${this.open ? 'false' : 'true'}
-        >
-          <slot name="content"> ${this.content} </slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-setDefaultAnimation('tooltip.show', {
-  keyframes: [
-    { opacity: 0, transform: 'scale(0.8)' },
-    { opacity: 1, transform: 'scale(1)' }
-  ],
-  options: { duration: 150, easing: 'ease' }
-});
-
-setDefaultAnimation('tooltip.hide', {
-  keyframes: [
-    { opacity: 1, transform: 'scale(1)' },
-    { opacity: 0, transform: 'scale(0.8)' }
-  ],
-  options: { duration: 150, easing: 'ease' }
-});
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-tooltip': SlTooltip;
-  }
-}

data/remote-src/2.0.0.beta64/shoelace-next/src/components/visually-hidden/visually-hidden.styles.ts

@@ -1,18 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host(:not(:focus-within)) {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    clip: rect(0 0 0 0) !important;
-    clip-path: inset(50%) !important;
-    border: none !important;
-    overflow: hidden !important;
-    white-space: nowrap !important;
-    padding: 0 !important;
-  }
-`;

data/remote-src/2.0.0.beta64/shoelace-next/src/components/visually-hidden/visually-hidden.test.ts

@@ -1,39 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-import '../../../dist/shoelace.js';
-import type SlVisuallyHidden from './visually-hidden';
-
-describe('<sl-visually-hidden>', () => {
-  it('should render but not display visually hidden content', async () => {
-    const el = <SlVisuallyHidden>await fixture(html`
-      <sl-visually-hidden>
-        <a href="#">Skip to main content</a>
-      </sl-visually-hidden>
-    `);
-
-    const { width, height, overflow, clipPath } = getComputedStyle(el);
-
-    expect(width).to.equal('1px');
-    expect(height).to.equal('1px');
-    expect(overflow).to.equal('hidden');
-    expect(clipPath).to.equal('inset(50%)');
-  });
-
-  // should show visually hidden content when focused
-  it('should show visually hidden content when focused', async () => {
-    const el = <SlVisuallyHidden>await fixture(html`
-      <sl-visually-hidden>
-        <a href="#">Skip to main content</a>
-      </sl-visually-hidden>
-    `);
-
-    const a = el.querySelector('a');
-    a.focus();
-
-    const { width, height, overflow, clipPath } = getComputedStyle(el);
-
-    expect(width).not.to.equal('1px');
-    expect(height).not.to.equal('1px');
-    expect(overflow).not.to.equal('hidden');
-    expect(clipPath).not.to.equal('inset(50%)');
-  });
-});

data/remote-src/2.0.0.beta64/shoelace-next/src/components/visually-hidden/visually-hidden.ts

@@ -1,24 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import styles from './visually-hidden.styles';
-
-/**
- * @since 2.0
- * @status experimental
- *
- * @slot - The content you'd like to be visually hidden.
- */
-@customElement('sl-visually-hidden')
-export default class SlVisuallyHidden extends LitElement {
-  static styles = styles;
-
-  render() {
-    return html` <slot></slot> `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-visually-hidden': SlVisuallyHidden;
-  }
-}

data/remote-src/2.0.0.beta64/shoelace-next/src/declaration.d.ts

@@ -1,8 +0,0 @@
-declare module '@popperjs/core/dist/esm' {
-  export * from '@popperjs/core/lib';
-}
-
-declare module '*.css' {
-  const styles: string;
-  export default styles;
-}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/animate.ts

@@ -1,70 +0,0 @@
-//
-// Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
-//
-export function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions) {
-  return new Promise(async resolve => {
-    if (options?.duration === Infinity) {
-      throw new Error('Promise-based animations must be finite.');
-    }
-
-    const animation = el.animate(keyframes, {
-      ...options,
-      duration: prefersReducedMotion() ? 0 : options!.duration
-    });
-
-    animation.addEventListener('cancel', resolve, { once: true });
-    animation.addEventListener('finish', resolve, { once: true });
-  });
-}
-
-//
-// Parses a CSS duration and returns the number of milliseconds.
-//
-export function parseDuration(delay: number | string) {
-  delay = (delay + '').toLowerCase();
-
-  if (delay.indexOf('ms') > -1) {
-    return parseFloat(delay);
-  }
-
-  if (delay.indexOf('s') > -1) {
-    return parseFloat(delay) * 1000;
-  }
-
-  return parseFloat(delay);
-}
-
-//
-// Tells if the user has enabled the "reduced motion" setting in their browser or OS.
-//
-export function prefersReducedMotion() {
-  const query = window.matchMedia('(prefers-reduced-motion: reduce)');
-  return query?.matches;
-}
-
-//
-// Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
-//
-export function stopAnimations(el: HTMLElement) {
-  return Promise.all(
-    el.getAnimations().map((animation: any) => {
-      return new Promise(resolve => {
-        const handleAnimationEvent = requestAnimationFrame(resolve);
-
-        animation.addEventListener('cancel', () => handleAnimationEvent, { once: true });
-        animation.addEventListener('finish', () => handleAnimationEvent, { once: true });
-        animation.cancel();
-      });
-    })
-  );
-}
-
-// We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
-// element's scrollHeight before the animation.
-export function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number) {
-  return keyframes.map(keyframe =>
-    Object.assign({}, keyframe, {
-      height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height
-    })
-  );
-}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/event.ts

@@ -1,35 +0,0 @@
-//
-// Emits a custom event with more convenient defaults.
-//
-export function emit(el: HTMLElement, name: string, options?: CustomEventInit) {
-  const event = new CustomEvent(
-    name,
-    Object.assign(
-      {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-        detail: {}
-      },
-      options
-    )
-  );
-  el.dispatchEvent(event);
-  return event;
-}
-
-//
-// Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements.
-//
-export function waitForEvent(el: HTMLElement, eventName: string) {
-  return new Promise<void>(resolve => {
-    function done(event: Event) {
-      if (event.target === el) {
-        el.removeEventListener(eventName, done);
-        resolve();
-      }
-    }
-
-    el.addEventListener(eventName, done);
-  });
-}

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/focus-visible.ts

@@ -1,26 +0,0 @@
-import { unsafeCSS } from 'lit';
-
-//
-// Determines if the current browser supports :focus-visible
-//
-export const hasFocusVisible = (() => {
-  const style = document.createElement('style');
-  let isSupported;
-
-  try {
-    document.head.appendChild(style);
-    style.sheet!.insertRule(':focus-visible { color: inherit }');
-    isSupported = true;
-  } catch {
-    isSupported = false;
-  } finally {
-    style.remove();
-  }
-
-  return isSupported;
-})();
-
-//
-// A selector for Lit stylesheets that outputs `:focus-visible` if the browser supports it and `:focus` otherwise
-//
-export const focusVisibleSelector = unsafeCSS(hasFocusVisible ? ':focus-visible' : ':focus');