shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+  }
+
+  .details {
+    border: solid 1px var(--sl-color-neutral-200);
+    border-radius: var(--sl-border-radius-medium);
+    background-color: var(--sl-color-neutral-0);
+    overflow-anchor: none;
+  }
+
+  .details--disabled {
+    opacity: 0.5;
+  }
+
+  .details__header {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    padding: var(--sl-spacing-medium);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .details__header:focus {
+    outline: none;
+  }
+
+  .details__header${focusVisibleSelector} {
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  .details--disabled .details__header {
+    cursor: not-allowed;
+  }
+
+  .details--disabled .details__header${focusVisibleSelector} {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .details__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .details__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--sl-transition-medium) transform ease;
+  }
+
+  .details--open .details__summary-icon {
+    transform: rotate(90deg);
+  }
+
+  .details__body {
+    overflow: hidden;
+  }
+
+  .details__content {
+    padding: var(--sl-spacing-medium);
+  }
+`;

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

@@ -0,0 +1,153 @@
+// cspell:dictionaries lorem-ipsum
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlDetails from './details';
+
+describe('<sl-details>', () => {
+  it('should be visible with the open attribute', async () => {
+    const el = await fixture<SlDetails>(html`
+      <sl-details open>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `);
+    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
+
+    expect(body.hidden).to.be.false;
+  });
+
+  it('should not be visible without the open attribute', async () => {
+    const el = await fixture<SlDetails>(html`
+      <sl-details>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `);
+    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
+
+    expect(body.hidden).to.be.true;
+  });
+
+  it('should emit sl-show and sl-after-show when calling show()', async () => {
+    const el = await fixture<SlDetails>(html`
+      <sl-details>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `);
+    const body = el.shadowRoot?.querySelector('.details__body') 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(body.hidden).to.be.false;
+  });
+
+  it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
+    const el = await fixture<SlDetails>(html`
+      <sl-details open>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `);
+    const body = el.shadowRoot?.querySelector('.details__body') 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(body.hidden).to.be.true;
+  });
+
+  it('should emit sl-show and sl-after-show when setting open = true', async () => {
+    const el = await fixture<SlDetails>(html`
+      <sl-details>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `);
+    const body = el.shadowRoot?.querySelector('.details__body') 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(body.hidden).to.be.false;
+  });
+
+  it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
+    const el = await fixture<SlDetails>(html`
+      <sl-details open>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </sl-details>
+    `);
+    const body = el.shadowRoot?.querySelector('.details__body') 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(body.hidden).to.be.true;
+  });
+
+  it('should be the correct size after opening more than one instance', async () => {
+    const el = await fixture<SlDetails>(html`
+      <div>
+        <sl-details>
+          <div style="height: 200px;"></div>
+        </sl-details>
+        <sl-details>
+          <div style="height: 400px;"></div>
+        </sl-details>
+      </div>
+    `);
+    const first = el.querySelectorAll('sl-details')[0];
+    const second = el.querySelectorAll('sl-details')[1];
+    const firstBody = first.shadowRoot?.querySelector('.details__body');
+    const secondBody = second.shadowRoot?.querySelector('.details__body');
+
+    await first.show();
+    await second.show();
+
+    expect(firstBody!.clientHeight).to.equal(200);
+    expect(secondBody!.clientHeight).to.equal(400);
+  });
+});

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

@@ -0,0 +1,192 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { animateTo, stopAnimations, shimKeyframesHeightAuto } from '../../internal/animate';
+import { emit } from '../../internal/event';
+import { watch } from '../../internal/watch';
+import { waitForEvent } from '../../internal/event';
+import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
+import styles from './details.styles';
+
+import '../icon/icon';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @dependency sl-icon
+ *
+ * @slot - The details' content.
+ * @slot summary - The details' summary. Alternatively, you can use the summary prop.
+ *
+ * @event sl-show - Emitted when the details opens.
+ * @event sl-after-show - Emitted after the details opens and all animations are complete.
+ * @event sl-hide - Emitted when the details closes.
+ * @event sl-after-hide - Emitted after the details closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The summary header.
+ * @csspart summary - The details summary.
+ * @csspart summary-icon - The expand/collapse summary icon.
+ * @csspart content - The details content.
+ *
+ * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
+ * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+ */
+@customElement('sl-details')
+export default class SlDetails extends LitElement {
+  static styles = styles;
+
+  @query('.details') details: HTMLElement;
+  @query('.details__header') header: HTMLElement;
+  @query('.details__body') body: HTMLElement;
+
+  /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
+  @property() summary: string;
+
+  /** Disables the details so it can't be toggled. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  firstUpdated() {
+    this.body.hidden = !this.open;
+    this.body.style.height = this.open ? 'auto' : '0';
+  }
+
+  /** Shows the details. */
+  async show() {
+    if (this.open) {
+      return;
+    }
+
+    this.open = true;
+    return waitForEvent(this, 'sl-after-show');
+  }
+
+  /** Hides the details */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+
+    this.open = false;
+    return waitForEvent(this, 'sl-after-hide');
+  }
+
+  handleSummaryClick() {
+    if (!this.disabled) {
+      this.open ? this.hide() : this.show();
+      this.header.focus();
+    }
+  }
+
+  handleSummaryKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.open ? this.hide() : this.show();
+    }
+
+    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.hide();
+    }
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.show();
+    }
+  }
+
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.open) {
+      // Show
+      emit(this, 'sl-show');
+
+      await stopAnimations(this);
+      this.body.hidden = false;
+
+      const { keyframes, options } = getAnimation(this, 'details.show');
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = 'auto';
+
+      emit(this, 'sl-after-show');
+    } else {
+      // Hide
+      emit(this, 'sl-hide');
+
+      await stopAnimations(this);
+
+      const { keyframes, options } = getAnimation(this, 'details.hide');
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.hidden = true;
+      this.body.style.height = 'auto';
+
+      emit(this, 'sl-after-hide');
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          details: true,
+          'details--open': this.open,
+          'details--disabled': this.disabled
+        })}
+      >
+        <header
+          part="header"
+          id="header"
+          class="details__header"
+          role="button"
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+          tabindex=${this.disabled ? '-1' : '0'}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <div part="summary" class="details__summary">
+            <slot name="summary">${this.summary}</slot>
+          </div>
+
+          <span part="summary-icon" class="details__summary-icon">
+            <sl-icon name="chevron-right" library="system"></sl-icon>
+          </span>
+        </header>
+
+        <div class="details__body">
+          <div part="content" id="content" class="details__content" role="region" aria-labelledby="header">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+setDefaultAnimation('details.show', {
+  keyframes: [
+    { height: '0', opacity: '0' },
+    { height: 'auto', opacity: '1' }
+  ],
+  options: { duration: 250, easing: 'linear' }
+});
+
+setDefaultAnimation('details.hide', {
+  keyframes: [
+    { height: 'auto', opacity: '1' },
+    { height: '0', opacity: '0' }
+  ],
+  options: { duration: 250, easing: 'linear' }
+});
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-details': SlDetails;
+  }
+}

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

@@ -0,0 +1,106 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --width: 31rem;
+    --header-spacing: var(--sl-spacing-large);
+    --body-spacing: var(--sl-spacing-large);
+    --footer-spacing: var(--sl-spacing-large);
+
+    display: contents;
+  }
+
+  .dialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--sl-z-index-dialog);
+  }
+
+  .dialog__panel {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    width: var(--width);
+    max-width: calc(100% - var(--sl-spacing-2x-large));
+    max-height: calc(100% - var(--sl-spacing-2x-large));
+    background-color: var(--sl-panel-background-color);
+    border-radius: var(--sl-border-radius-medium);
+    box-shadow: var(--sl-shadow-x-large);
+  }
+
+  .dialog__panel:focus {
+    outline: none;
+  }
+
+  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
+  @media screen and (max-width: 420px) {
+    .dialog__panel {
+      max-height: 80vh;
+    }
+  }
+
+  .dialog--open .dialog__panel {
+    display: flex;
+    opacity: 1;
+    transform: none;
+  }
+
+  .dialog__header {
+    flex: 0 0 auto;
+    display: flex;
+  }
+
+  .dialog__title {
+    flex: 1 1 auto;
+    font-size: var(--sl-font-size-large);
+    line-height: var(--sl-line-height-dense);
+    padding: var(--header-spacing);
+  }
+
+  .dialog__close {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-x-large);
+    padding: 0 var(--header-spacing);
+  }
+
+  .dialog__body {
+    flex: 1 1 auto;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .dialog__footer {
+    flex: 0 0 auto;
+    text-align: right;
+    padding: var(--footer-spacing);
+  }
+
+  .dialog__footer ::slotted(sl-button:not(:first-of-type)) {
+    margin-left: var(--sl-spacing-x-small);
+  }
+
+  .dialog:not(.dialog--has-footer) .dialog__footer {
+    display: none;
+  }
+
+  .dialog__overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--sl-overlay-background-color);
+  }
+`;

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

@@ -0,0 +1,135 @@
+// cspell:dictionaries lorem-ipsum
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlDialog from './dialog';
+
+describe('<sl-dialog>', () => {
+  it('should be visible with the open attribute', async () => {
+    const el = await fixture<SlDialog>(html`
+      <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
+    `);
+    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<SlDialog>(
+      html` <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog> `
+    );
+    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<SlDialog>(html`
+      <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
+    `);
+    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<SlDialog>(html`
+      <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
+    `);
+    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<SlDialog>(html`
+      <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
+    `);
+    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<SlDialog>(html`
+      <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
+    `);
+    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;
+  });
+
+  it('should not close when sl-request-close is prevented', async () => {
+    const el = await fixture<SlDialog>(html`
+      <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
+    `);
+    const overlay = el.shadowRoot?.querySelector('[part="overlay"]') as HTMLElement;
+
+    el.addEventListener('sl-request-close', event => event.preventDefault());
+    overlay.click();
+
+    expect(el.open).to.be.true;
+  });
+
+  it('should allow initial focus to be set', async () => {
+    const el = await fixture<SlDialog>(html` <sl-dialog><input /></sl-dialog> `);
+    const input = el.querySelector('input');
+    const initialFocusHandler = sinon.spy(event => {
+      event.preventDefault();
+      input.focus();
+    });
+
+    el.addEventListener('sl-initial-focus', initialFocusHandler);
+    el.show();
+
+    await waitUntil(() => initialFocusHandler.calledOnce);
+
+    expect(initialFocusHandler).to.have.been.calledOnce;
+    expect(document.activeElement).to.equal(input);
+  });
+});