shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,68 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import '../../../dist/shoelace.js';
+import type SlProgressRing from './progress-ring';
+
+describe('<sl-progress-ring>', () => {
+  let el: SlProgressRing;
+
+  describe('when provided just a value parameter', async () => {
+    before(async () => {
+      el = await fixture<SlProgressRing>(html`<sl-progress-ring value="25"></sl-progress-ring>`);
+    });
+
+    it('should render a component that passes accessibility test.', async () => {
+      await expect(el).to.be.accessible();
+    });
+  });
+
+  describe('when provided a title, and value parameter', async () => {
+    let base: HTMLDivElement;
+
+    before(async () => {
+      el = await fixture<SlProgressRing>(
+        html`<sl-progress-ring title="Titled Progress Ring" value="25"></sl-progress-ring>`
+      );
+      base = el.shadowRoot?.querySelector('[part="base"]') as HTMLDivElement;
+    });
+
+    it('should render a component that passes accessibility test.', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('uses the value parameter on the base, as aria-valuenow', async () => {
+      expect(base).attribute('aria-valuenow', '25');
+    });
+
+    it('translates the value parameter to a percentage, and uses translation on the base, as percentage css variable', async () => {
+      expect(base).attribute('style', '--percentage: 0.25');
+    });
+  });
+
+  describe('when provided a ariaLabel, and value parameter', async () => {
+    before(async () => {
+      el = await fixture<SlProgressRing>(
+        html`<sl-progress-ring ariaLabel="Labelled Progress Ring" value="25"></sl-progress-ring>`
+      );
+    });
+
+    it('should render a component that passes accessibility test.', async () => {
+      await expect(el).to.be.accessible();
+    });
+  });
+
+  describe('when provided a ariaLabelledBy, and value parameter', async () => {
+    before(async () => {
+      el = await fixture<SlProgressRing>(
+        html`
+          <label id="labelledby">Progress Ring Label</label>
+          <sl-progress-ring ariaLabelledBy="labelledby" value="25"></sl-progress-ring>
+        `
+      );
+    });
+
+    it('should render a component that passes accessibility test.', async () => {
+      await expect(el).to.be.accessible();
+    });
+  });
+});

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

@@ -0,0 +1,84 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { LocalizeController } from '../../utilities/localize';
+import styles from './progress-ring.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - A label to show inside the ring.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The progress ring label.
+ *
+ * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --track-color - The color of the track.
+ * @cssproperty --indicator-color - The indicator color.
+ */
+@customElement('sl-progress-ring')
+export default class SlProgressRing extends LitElement {
+  static styles = styles;
+  private localize = new LocalizeController(this);
+
+  @query('.progress-ring__indicator') indicator: SVGCircleElement;
+
+  @state() indicatorOffset: string;
+
+  /** The current progress, 0 to 100. */
+  @property({ type: Number, reflect: true }) value = 0;
+
+  /** A custom label for the progress ring's aria label. */
+  @property() label: string;
+
+  /** The locale to render the component in. */
+  @property() lang: string;
+
+  updated(changedProps: Map<string, any>) {
+    super.updated(changedProps);
+
+    //
+    // This block is only required for Safari because it doesn't transition the circle when the custom properties
+    // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,
+    // but I couldn't pinpoint it so this works around the problem.
+    //
+    if (changedProps.has('percentage')) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - (this.value / 100) * circumference;
+
+      this.indicatorOffset = String(offset) + 'px';
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label || this.localize.term('progress')}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style="--percentage: ${this.value / 100}"
+      >
+        <svg class="progress-ring__image">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        </svg>
+
+        <span part="label" class="progress-ring__label">
+          <slot></slot>
+        </span>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-progress-ring': SlProgressRing;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .qr-code {
+    position: relative;
+  }
+
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+`;

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

@@ -0,0 +1,90 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { watch } from '../../internal/watch';
+import QrCreator from 'qr-creator';
+import styles from './qr-code.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @csspart base - The component's base wrapper.
+ */
+@customElement('sl-qr-code')
+export default class SlQrCode extends LitElement {
+  static styles = styles;
+
+  @query('canvas') canvas: HTMLElement;
+
+  /** The QR code's value. */
+  @property() value = '';
+
+  /** The label used when screen readers announce the code. If unspecified, the value will be used. */
+  @property() label = '';
+
+  /** The size of the code's overall square in pixels. */
+  @property({ type: Number }) size = 128;
+
+  /** The fill color. This can be any valid CSS color, but not a CSS custom property. */
+  @property() fill = '#000';
+
+  /** The background color. This can be any valid CSS color or `transparent`, but not a CSS custom property. */
+  @property() background = '#fff';
+
+  /** The edge radius of each module. Must be between 0 and 0.5. */
+  @property({ type: Number }) radius = 0;
+
+  /** The level of error correction to use. */
+  @property({ attribute: 'error-correction' }) errorCorrection: 'L' | 'M' | 'Q' | 'H' = 'H';
+
+  firstUpdated() {
+    this.generate();
+  }
+
+  @watch('background')
+  @watch('errorCorrection')
+  @watch('fill')
+  @watch('radius')
+  @watch('size')
+  @watch('value')
+  generate() {
+    if (!this.hasUpdated) {
+      return;
+    }
+
+    QrCreator.render(
+      {
+        text: this.value,
+        radius: this.radius,
+        ecLevel: this.errorCorrection,
+        fill: this.fill,
+        background: this.background === 'transparent' ? null : this.background,
+        // We draw the canvas larger and scale its container down to avoid blurring on high-density displays
+        size: this.size * 2
+      },
+      this.canvas
+    );
+  }
+
+  render() {
+    return html`
+      <div
+        class="qr-code"
+        part="base"
+        style=${styleMap({
+          width: `${this.size}px`,
+          height: `${this.size}px`
+        })}
+      >
+        <canvas role="img" aria-label=${this.label || this.value}></canvas>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-qr-code': SlQrCode;
+  }
+}

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

@@ -0,0 +1,107 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .radio {
+    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;
+  }
+
+  .radio__icon {
+    display: inline-flex;
+    width: var(--sl-toggle-size);
+    height: var(--sl-toggle-size);
+  }
+
+  .radio__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .radio__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--sl-toggle-size);
+    height: var(--sl-toggle-size);
+    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    border-radius: 50%;
+    background-color: var(--sl-input-background-color);
+    color: transparent;
+    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
+  }
+
+  .radio__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+    border-color: var(--sl-input-border-color-hover);
+    background-color: var(--sl-input-background-color-hover);
+  }
+
+  /* Focus */
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
+    border-color: var(--sl-input-border-color-focus);
+    background-color: var(--sl-input-background-color-focus);
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  /* Checked */
+  .radio--checked .radio__control {
+    color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    background-color: var(--sl-color-primary-600);
+  }
+
+  /* Checked + hover */
+  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
+    border-color: var(--sl-color-primary-500);
+    background-color: var(--sl-color-primary-500);
+  }
+
+  /* Checked + focus */
+  .radio.radio--checked:not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
+    border-color: var(--sl-color-primary-500);
+    background-color: var(--sl-color-primary-500);
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  /* Disabled */
+  .radio--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
+  .radio:not(.radio--checked) svg circle {
+    opacity: 0;
+  }
+
+  .radio__label {
+    line-height: var(--sl-toggle-size);
+    margin-left: 0.5em;
+    user-select: none;
+  }
+`;

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

@@ -0,0 +1,65 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+
+import '../../../dist/shoelace.js';
+import type SlRadio from './radio';
+import type SlRadioGroup from '../radio-group/radio-group';
+
+describe('<sl-radio>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture<SlRadio>(html` <sl-radio disabled></sl-radio> `);
+    const radio = el.shadowRoot?.querySelector('input');
+
+    expect(radio.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should fire sl-change when clicked', async () => {
+    const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
+    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 via keyboard - space', async () => {
+    const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
+    const input = el.shadowRoot?.querySelector('input');
+    input.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 via keyboard - arrow key', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group>
+        <sl-radio id="radio-1"></sl-radio>
+        <sl-radio id="radio-2"></sl-radio>
+      </sl-radio-group>
+    `);
+    const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
+    const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
+    const input1 = radio1.shadowRoot?.querySelector('input');
+    input1.focus();
+    setTimeout(() => sendKeys({ press: 'ArrowRight' }));
+    const event = await oneEvent(radio2, 'sl-change');
+    expect(event.target).to.equal(radio2);
+    expect(radio2.checked).to.be.true;
+  });
+
+  it('should not fire sl-change when checked is set by javascript', async () => {
+    const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
+    el.addEventListener('sl-change', () => expect.fail('event fired'));
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});

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

@@ -0,0 +1,226 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { emit } from '../../internal/event';
+import { watch } from '../../internal/watch';
+import { FormSubmitController } from '../../internal/form-control';
+import styles from './radio.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - The radio's label.
+ *
+ * @event sl-blur - Emitted when the control loses focus.
+ * @event sl-change - Emitted when the control's checked state changes.
+ * @event sl-focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The radio control.
+ * @csspart checked-icon - The container the wraps the checked icon.
+ * @csspart label - The radio label.
+ */
+@customElement('sl-radio')
+export default class SlRadio extends LitElement {
+  static styles = styles;
+
+  @query('input[type="radio"]') input: HTMLInputElement;
+
+  // @ts-ignore
+  private formSubmitController = new FormSubmitController(this, {
+    value: (control: SlRadio) => (control.checked ? control.value : undefined)
+  });
+
+  @state() private hasFocus = false;
+
+  /** The radio's name attribute. */
+  @property() name: string;
+
+  /** The radio's value attribute. */
+  @property() value: string;
+
+  /** Disables the radio. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Draws the radio in a checked state. */
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  /**
+   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
+   * provided by the `setCustomValidity` method.
+   */
+  @property({ type: Boolean, reflect: true }) invalid = false;
+
+  firstUpdated() {
+    const radios = this.getAllRadios();
+    const checkedRadio = radios.find(radio => radio.checked);
+
+    radios.map(radio => {
+      if (radio.input) {
+        radio.input.tabIndex = -1;
+      }
+    });
+
+    if (checkedRadio) {
+      checkedRadio.input.tabIndex = 0;
+    } else if (radios.length) {
+      radios[0].input.tabIndex = 0;
+    }
+  }
+
+  /** Simulates a click on the radio. */
+  click() {
+    this.input.click();
+  }
+
+  /** Sets focus on the radio. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Removes focus from the radio. */
+  blur() {
+    this.input.blur();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  setCustomValidity(message: string) {
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+
+  getAllRadios() {
+    const radioGroup = this.closest('sl-radio-group');
+
+    // Radios must be part of a radio group
+    if (!radioGroup) {
+      return [this];
+    }
+
+    return [...radioGroup.querySelectorAll('sl-radio')].filter((radio: this) => radio.name === this.name) as this[];
+  }
+
+  getSiblingRadios() {
+    return this.getAllRadios().filter(radio => radio !== this) as this[];
+  }
+
+  handleBlur() {
+    this.hasFocus = false;
+    emit(this, 'sl-blur');
+  }
+
+  @watch('checked', { waitUntilFirstUpdate: true })
+  handleCheckedChange() {
+    if (this.checked) {
+      this.input.tabIndex = 0;
+
+      this.getSiblingRadios().map(radio => {
+        radio.input.tabIndex = -1;
+        radio.checked = false;
+      });
+    }
+  }
+
+  handleClick() {
+    this.checked = true;
+    emit(this, 'sl-change');
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
+  handleFocus() {
+    this.hasFocus = true;
+    emit(this, 'sl-focus');
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      const radios = this.getAllRadios().filter(radio => !radio.disabled);
+      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
+      let index = radios.indexOf(this) + incr;
+      if (index < 0) index = radios.length - 1;
+      if (index > radios.length - 1) index = 0;
+
+      this.getAllRadios().map(radio => {
+        radio.checked = false;
+        radio.input.tabIndex = -1;
+      });
+
+      radios[index].focus();
+      radios[index].checked = true;
+      radios[index].input.tabIndex = 0;
+
+      emit(radios[index], 'sl-change');
+
+      event.preventDefault();
+    }
+  }
+
+  render() {
+    this.setAttribute('role', 'radio');
+    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+
+    return html`
+      <label
+        part="base"
+        class=${classMap({
+          radio: true,
+          'radio--checked': this.checked,
+          'radio--disabled': this.disabled,
+          'radio--focused': this.hasFocus
+        })}
+        @keydown=${this.handleKeyDown}
+      >
+        <input
+          class="radio__input"
+          type="radio"
+          name=${ifDefined(this.name)}
+          value=${ifDefined(this.value)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          aria-hidden="true"
+          @click=${this.handleClick}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+        />
+        <span part="control" class="radio__control">
+          <span part="checked-icon" class="radio__icon">
+            <svg viewBox="0 0 16 16">
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g fill="currentColor">
+                  <circle cx="8" cy="8" r="3.42857143"></circle>
+                </g>
+              </g>
+            </svg>
+          </span>
+        </span>
+
+        <span part="label" class="radio__label">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-radio': SlRadio;
+  }
+}