shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,56 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --track-width: 2px;
+    --track-color: rgb(128 128 128 / 25%);
+    --indicator-color: var(--sl-color-primary-600);
+    --speed: 800ms;
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+  }
+
+  .spinner {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+  }
+
+  .spinner__track,
+  .spinner__indicator {
+    fill: none;
+    stroke-width: var(--track-width);
+    r: calc(0.5em - var(--track-width) / 2);
+    cx: 0.5em;
+    cy: 0.5em;
+    transform-origin: 50% 50%;
+  }
+
+  .spinner__track {
+    stroke: var(--track-color);
+    transform-origin: 0% 0%;
+    mix-blend-mode: multiply;
+  }
+
+  .spinner__indicator {
+    stroke: var(--indicator-color);
+    stroke-linecap: round;
+    stroke-dasharray: 150% 75%;
+    animation: spin var(--speed) linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;

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

@@ -0,0 +1,24 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import '../../../dist/shoelace.js';
+import type SlSpinner from './spinner';
+
+describe('<sl-spinner>', () => {
+  let el: SlSpinner;
+
+  describe('when provided no parameters', () => {
+    before(async () => {
+      el = await fixture<SlSpinner>(html` <sl-spinner></sl-spinner> `);
+    });
+
+    it('should render a component that passes accessibility test.', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('should have a role of "status".', async () => {
+      // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+      const base = el.shadowRoot?.querySelector('[part="base"]') as SVGElement;
+      await expect(base).have.attribute('role', 'status');
+    });
+  });
+});

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

@@ -0,0 +1,34 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import styles from './spinner.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+@customElement('sl-spinner')
+export default class SlSpinner extends LitElement {
+  static styles = styles;
+
+  render() {
+    return html`
+      <svg part="base" class="spinner" role="status">
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-spinner': SlSpinner;
+  }
+}

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

@@ -0,0 +1,76 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --divider-width: 4px;
+    --divider-hit-area: 12px;
+    --min: 0%;
+    --max: 100%;
+
+    display: grid;
+  }
+
+  .start,
+  .end {
+    overflow: hidden;
+  }
+
+  .divider {
+    flex: 0 0 var(--divider-width);
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--sl-color-neutral-200);
+    color: var(--sl-color-neutral-900);
+    z-index: 1;
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider${focusVisibleSelector} {
+    background-color: var(--sl-color-primary-600);
+    color: var(--sl-color-neutral-0);
+  }
+
+  :host([disabled]) .divider {
+    cursor: not-allowed;
+  }
+
+  /* Horizontal */
+  :host(:not([vertical], [disabled])) .divider {
+    cursor: col-resize;
+  }
+
+  :host(:not([vertical])) .divider::after {
+    display: flex;
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    width: var(--divider-hit-area);
+  }
+
+  /* Vertical */
+  :host([vertical]) {
+    flex-direction: column;
+  }
+
+  :host([vertical]:not([disabled])) .divider {
+    cursor: row-resize;
+  }
+
+  :host([vertical]) .divider::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    height: var(--divider-hit-area);
+  }
+`;

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

@@ -0,0 +1,13 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+// import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlSplitPanel from './split-panel';
+
+describe('<sl-split-panel>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <sl-split-panel></sl-split-panel> `);
+
+    expect(el).to.exist;
+  });
+});

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

@@ -0,0 +1,272 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { clamp } from '../../internal/math';
+import { emit } from '../../internal/event';
+import { watch } from '../../internal/watch';
+import { LocalizeController } from '../../utilities/localize';
+import styles from './split-panel.styles';
+
+/**
+ * @since 2.0
+ * @status experimental
+ *
+ * @event sl-reposition - Emitted when the divider's position changes.
+ *
+ * @csspart start - The start panel.
+ * @csspart end - The end panel.
+ * @csspart panel - Targets both the start and end panels.
+ * @csspart divider - The divider that separates the start and end panels.
+ *
+ * @slot start - The start panel.
+ * @slot end - The end panel.
+ * @slot handle - An optional handle to render at the center of the divider.
+ *
+ * @cssproperty [--divider-width=4px] - The width of the visible divider.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
+ *  usually wider than the divider to facilitate easier dragging.
+ * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
+ * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
+ */
+@customElement('sl-split-panel')
+export default class SlSplitPanel extends LitElement {
+  static styles = styles;
+
+  private cachedPositionInPixels: number;
+  private localize = new LocalizeController(this);
+  private resizeObserver: ResizeObserver;
+  private size: number;
+
+  @query('.divider') divider: HTMLElement;
+
+  /**
+   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+   * container's initial size.
+   */
+  @property({ type: Number, reflect: true }) position = 50;
+
+  /**
+   * The current position of the divider from the primary panel's edge in pixels.
+   */
+  @property({ attribute: 'position-in-pixels', type: Number }) positionInPixels: number;
+
+  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+  @property({ type: Boolean, reflect: true }) vertical = false;
+
+  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+   * host element is resized.
+   */
+  @property() primary: 'start' | 'end';
+
+  /**
+   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.
+   * `"100px 50%"`.
+   */
+  @property() snap: string;
+
+  /** How close the divider must be to a snap point until snapping occurs. */
+  @property({ type: Number, attribute: 'snap-threshold' }) snapThreshold = 12;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(entries => this.handleResize(entries));
+    this.updateComplete.then(() => this.resizeObserver.observe(this));
+
+    this.detectSize();
+    this.cachedPositionInPixels = this.percentageToPixels(this.position);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+
+  private detectSize() {
+    const { width, height } = this.getBoundingClientRect();
+    this.size = this.vertical ? height : width;
+  }
+
+  private percentageToPixels(value: number) {
+    return this.size * (value / 100);
+  }
+
+  private pixelsToPercentage(value: number) {
+    return (value / this.size) * 100;
+  }
+
+  handleDrag(event: Event) {
+    if (this.disabled) {
+      return;
+    }
+
+    // Prevent text selection when dragging
+    event.preventDefault();
+
+    function drag(container: HTMLElement, onMove: (x: number, y: number) => void) {
+      const move = (event: any) => {
+        const dims = container.getBoundingClientRect();
+        const defaultView = container.ownerDocument.defaultView!;
+        const offsetX = dims.left + defaultView.pageXOffset;
+        const offsetY = dims.top + defaultView.pageYOffset;
+        const x = (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - offsetX;
+        const y = (event.changedTouches ? event.changedTouches[0].pageY : event.pageY) - offsetY;
+
+        onMove(x, y);
+      };
+
+      const stop = () => {
+        document.removeEventListener('mousemove', move);
+        document.removeEventListener('touchmove', move);
+        document.removeEventListener('mouseup', stop);
+        document.removeEventListener('touchend', stop);
+      };
+
+      document.addEventListener('mousemove', move, { passive: true });
+      document.addEventListener('touchmove', move, { passive: true });
+      document.addEventListener('mouseup', stop);
+      document.addEventListener('touchend', stop);
+    }
+
+    drag(this, (x, y) => {
+      let newPositionInPixels = this.vertical ? y : x;
+
+      // Flip for end panels
+      if (this.primary === 'end') {
+        newPositionInPixels = this.size - newPositionInPixels;
+      }
+
+      // Check snap points
+      if (this.snap) {
+        const snaps = this.snap.split(' ');
+
+        snaps.map(value => {
+          let snapPoint: number;
+
+          if (value.endsWith('%')) {
+            snapPoint = this.size * (parseFloat(value) / 100);
+          } else {
+            snapPoint = parseFloat(value);
+          }
+
+          if (
+            newPositionInPixels >= snapPoint - this.snapThreshold &&
+            newPositionInPixels <= snapPoint + this.snapThreshold
+          ) {
+            newPositionInPixels = snapPoint;
+          }
+        });
+      }
+
+      this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
+    });
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    if (this.disabled) {
+      return;
+    }
+
+    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+      let newPosition = this.position;
+      let incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);
+
+      event.preventDefault();
+
+      if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {
+        newPosition -= incr;
+      }
+
+      if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {
+        newPosition += incr;
+      }
+
+      if (event.key === 'Home') {
+        newPosition = this.primary === 'end' ? 100 : 0;
+      }
+
+      if (event.key === 'End') {
+        newPosition = this.primary === 'end' ? 0 : 100;
+      }
+
+      this.position = clamp(newPosition, 0, 100);
+    }
+  }
+
+  @watch('position')
+  handlePositionChange() {
+    this.cachedPositionInPixels = this.percentageToPixels(this.position);
+    this.positionInPixels = this.percentageToPixels(this.position);
+    emit(this, 'sl-reposition');
+  }
+
+  @watch('positionInPixels')
+  handlePositionInPixelsChange() {
+    this.position = this.pixelsToPercentage(this.positionInPixels);
+  }
+
+  handleResize(entries: ResizeObserverEntry[]) {
+    const { width, height } = entries[0].contentRect;
+    this.size = this.vertical ? height : width;
+
+    // Resize when a primary panel is set
+    if (this.primary && this.cachedPositionInPixels) {
+      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
+    }
+  }
+
+  render() {
+    const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
+    const primary = `
+      clamp(
+        0%,
+        clamp(
+          var(--min),
+          ${this.position}% - var(--divider-width) / 2,
+          var(--max)
+        ),
+        calc(100% - var(--divider-width))
+      )
+    `;
+    const secondary = 'auto';
+
+    if (this.primary === 'end') {
+      this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+    } else {
+      this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+    }
+
+    return html`
+      <div part="panel start" class="start">
+        <slot name="start"></slot>
+      </div>
+
+      <div
+        part="divider"
+        class="divider"
+        tabindex=${ifDefined(this.disabled ? undefined : '0')}
+        role="separator"
+        aria-label=${this.localize.term('resize')}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleDrag}
+        @touchstart=${this.handleDrag}
+      >
+        <slot name="handle"></slot>
+      </div>
+
+      <div part="panel end" class="end">
+        <slot name="end"></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-split-panel': SlSplitPanel;
+  }
+}

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

@@ -0,0 +1,135 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --height: var(--sl-toggle-size);
+    --thumb-size: calc(var(--sl-toggle-size) + 4px);
+    --width: calc(var(--height) * 2);
+
+    display: inline-block;
+  }
+
+  .switch {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--sl-input-font-family);
+    font-size: var(--sl-input-font-size-medium);
+    font-weight: var(--sl-input-font-weight);
+    color: var(--sl-input-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .switch__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--width);
+    height: var(--height);
+    background-color: var(--sl-color-neutral-400);
+    border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
+    border-radius: var(--height);
+    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
+  }
+
+  .switch__control .switch__thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background-color: var(--sl-color-neutral-0);
+    border-radius: 50%;
+    border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
+    transform: translateX(calc((var(--width) - var(--height)) / -2));
+    transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;
+  }
+
+  .switch__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+    background-color: var(--sl-color-neutral-400);
+    border-color: var(--sl-color-neutral-400);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-neutral-400);
+  }
+
+  /* Focus */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input${focusVisibleSelector} ~ .switch__control {
+    background-color: var(--sl-color-neutral-400);
+    border-color: var(--sl-color-neutral-400);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled)
+    .switch__input${focusVisibleSelector}
+    ~ .switch__control
+    .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  /* Checked */
+  .switch--checked .switch__control {
+    background-color: var(--sl-color-primary-600);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  .switch--checked .switch__control .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    transform: translateX(calc((var(--width) - var(--height)) / 2));
+  }
+
+  /* Checked + hover */
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
+    background-color: var(--sl-color-primary-600);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  /* Checked + focus */
+  .switch.switch--checked:not(.switch--disabled) .switch__input${focusVisibleSelector} ~ .switch__control {
+    background-color: var(--sl-color-primary-600);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  .switch.switch--checked:not(.switch--disabled)
+    .switch__input${focusVisibleSelector}
+    ~ .switch__control
+    .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  /* Disabled */
+  .switch--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .switch__label {
+    line-height: var(--height);
+    margin-left: 0.5em;
+    user-select: none;
+  }
+`;

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

@@ -0,0 +1,64 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+
+import '../../../dist/shoelace.js';
+import type SlSwitch from './switch';
+
+describe('<sl-switch>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture<SlSwitch>(html` <sl-switch disabled></sl-switch> `);
+    const input = el.shadowRoot?.querySelector('input');
+
+    expect(input.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = await fixture<SlSwitch>(html` <sl-switch></sl-switch> `);
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should fire sl-change when clicked', async () => {
+    const el = await fixture<SlSwitch>(html` <sl-switch></sl-switch> `);
+    setTimeout(() => el.shadowRoot?.querySelector('input').click());
+    const event = await oneEvent(el, 'sl-change');
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled with spacebar', async () => {
+    const el = await fixture<SlSwitch>(html` <sl-switch></sl-switch> `);
+    el.focus();
+    setTimeout(() => sendKeys({ press: ' ' }));
+    const event = await oneEvent(el, 'sl-change');
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled with the right arrow', async () => {
+    const el = await fixture<SlSwitch>(html` <sl-switch></sl-switch> `);
+    el.focus();
+    setTimeout(() => sendKeys({ press: 'ArrowRight' }));
+    const event = await oneEvent(el, 'sl-change');
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled with the left arrow', async () => {
+    const el = await fixture<SlSwitch>(html` <sl-switch checked></sl-switch> `);
+    el.focus();
+    setTimeout(() => sendKeys({ press: 'ArrowLeft' }));
+    const event = await oneEvent(el, 'sl-change');
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.false;
+  });
+
+  it('should not fire sl-change when checked is set by javascript', async () => {
+    const el = await fixture<SlSwitch>(html` <sl-switch></sl-switch> `);
+    el.addEventListener('sl-change', () => expect.fail('event fired'));
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});