shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,355 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,70 @@
+//
+// 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

@@ -0,0 +1,35 @@
+//
+// 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

@@ -0,0 +1,26 @@
+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');