shoelace-rails-ui 0.1.0 → 0.1.1

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

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

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

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

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

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

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

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

@@ -1,64 +0,0 @@
-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;
-  });
-});