shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,94 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: inline-flex;
-  }
-
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--sl-font-size-x-small);
-    font-weight: var(--sl-font-weight-semibold);
-    letter-spacing: var(--sl-letter-spacing-normal);
-    line-height: 1;
-    border-radius: var(--sl-border-radius-small);
-    border: solid 1px var(--sl-color-neutral-0);
-    white-space: nowrap;
-    padding: 3px 6px;
-    user-select: none;
-    cursor: inherit;
-  }
-
-  /* Variant modifiers */
-  .badge--primary {
-    background-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .badge--success {
-    background-color: var(--sl-color-success-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .badge--neutral {
-    background-color: var(--sl-color-neutral-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .badge--warning {
-    background-color: var(--sl-color-warning-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .badge--danger {
-    background-color: var(--sl-color-danger-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Pill modifier */
-  .badge--pill {
-    border-radius: var(--sl-border-radius-pill);
-  }
-
-  /* Pulse modifier */
-  .badge--pulse {
-    animation: pulse 1.5s infinite;
-  }
-
-  .badge--pulse.badge--primary {
-    --pulse-color: var(--sl-color-primary-600);
-  }
-
-  .badge--pulse.badge--success {
-    --pulse-color: var(--sl-color-success-600);
-  }
-
-  .badge--pulse.badge--neutral {
-    --pulse-color: var(--sl-color-neutral-600);
-  }
-
-  .badge--pulse.badge--warning {
-    --pulse-color: var(--sl-color-warning-600);
-  }
-
-  .badge--pulse.badge--danger {
-    --pulse-color: var(--sl-color-danger-600);
-  }
-
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 var(--pulse-color);
-    }
-    70% {
-      box-shadow: 0 0 0 0.5rem transparent;
-    }
-    100% {
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-`;

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

@@ -1,77 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-
-import '../../../dist/shoelace.js';
-import type SlBadge from './badge';
-
-describe('<sl-badge>', () => {
-  let el: SlBadge;
-
-  describe('when provided no parameters', async () => {
-    before(async () => {
-      el = await fixture<SlBadge>(html` <sl-badge>Badge</sl-badge> `);
-    });
-
-    it('should render a component that passes accessibility test, with a role of status on the base part.', async () => {
-      await expect(el).to.be.accessible();
-
-      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-      expect(part.getAttribute('role')).to.eq('status');
-    });
-
-    it('should render the child content provided', async () => {
-      expect(el.innerText).to.eq('Badge');
-    });
-
-    it('should default to square styling, with the primary color', async () => {
-      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-      expect(part.classList.value.trim()).to.eq('badge badge--primary');
-    });
-  });
-
-  describe('when provided a pill parameter', async () => {
-    before(async () => {
-      el = await fixture<SlBadge>(html` <sl-badge pill>Badge</sl-badge> `);
-    });
-
-    it('should render a component that passes accessibility test', async () => {
-      await expect(el).to.be.accessible();
-    });
-
-    it('should append the pill class to the classlist to render a pill', async () => {
-      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-      expect(part.classList.value.trim()).to.eq('badge badge--primary badge--pill');
-    });
-  });
-
-  describe('when provided a pulse parameter', async () => {
-    before(async () => {
-      el = await fixture<SlBadge>(html` <sl-badge pulse>Badge</sl-badge> `);
-    });
-
-    it('should render a component that passes accessibility test', async () => {
-      await expect(el).to.be.accessible();
-    });
-
-    it('should append the pulse class to the classlist to render a pulse', async () => {
-      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-      expect(part.classList.value.trim()).to.eq('badge badge--primary badge--pulse');
-    });
-  });
-
-  ['primary', 'success', 'neutral', 'warning', 'danger'].forEach(variant => {
-    describe(`when passed a variant attribute ${variant}`, () => {
-      before(async () => {
-        el = await fixture<SlBadge>(html`<sl-badge variant="${variant as any}">Badge</sl-badge>`);
-      });
-
-      it('should render a component that passes accessibility test', async () => {
-        await expect(el).to.be.accessible();
-      });
-
-      it('should default to square styling, with the primary color', async () => {
-        const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-        expect(part.classList.value.trim()).to.eq(`badge badge--${variant}`);
-      });
-    });
-  });
-});

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

@@ -1,53 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import styles from './badge.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - The badge's content.
- *
- * @csspart base - The base wrapper
- */
-@customElement('sl-badge')
-export default class SlBadge extends LitElement {
-  static styles = styles;
-
-  /** The badge's variant. */
-  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
-
-  /** Draws a pill-style badge with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
-
-  /** Makes the badge pulsate to draw attention. */
-  @property({ type: Boolean, reflect: true }) pulse = false;
-
-  render() {
-    return html`
-      <span
-        part="base"
-        class=${classMap({
-          badge: true,
-          'badge--primary': this.variant === 'primary',
-          'badge--success': this.variant === 'success',
-          'badge--neutral': this.variant === 'neutral',
-          'badge--warning': this.variant === 'warning',
-          'badge--danger': this.variant === 'danger',
-          'badge--pill': this.pill,
-          'badge--pulse': this.pulse
-        })}
-        role="status"
-      >
-        <slot></slot>
-      </span>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-badge': SlBadge;
-  }
-}

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

@@ -1,12 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  .breadcrumb {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-`;

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

@@ -1,104 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-
-import '../../../dist/shoelace.js';
-import type SlBreadcrumb from './breadcrumb';
-
-describe('<sl-breadcrumb>', () => {
-  let el: SlBreadcrumb;
-
-  describe('when provided a standard list of el-breadcrumb-item children and no parameters', async () => {
-    before(async () => {
-      el = await fixture<SlBreadcrumb>(html`
-        <sl-breadcrumb>
-          <sl-breadcrumb-item>Catalog</sl-breadcrumb-item>
-          <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
-          <sl-breadcrumb-item>Women's</sl-breadcrumb-item>
-          <sl-breadcrumb-item>Shirts &amp; Tops</sl-breadcrumb-item>
-        </sl-breadcrumb>
-      `);
-    });
-
-    it('should render a component that passes accessibility test', async () => {
-      await expect(el).to.be.accessible();
-    });
-
-    it('should render sl-icon as separator', async () => {
-      expect(el.querySelectorAll('sl-icon').length).to.eq(4);
-    });
-
-    it('should attach aria-current "page" on the last breadcrumb item.', async () => {
-      const breadcrumbItems = el.querySelectorAll('sl-breadcrumb-item');
-      const lastNode = breadcrumbItems[3];
-      expect(lastNode).attribute('aria-current', 'page');
-    });
-  });
-
-  describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "separator" to support Custom Separators', async () => {
-    before(async () => {
-      el = await fixture<SlBreadcrumb>(html`
-        <sl-breadcrumb>
-          <span class="replacement-separator" slot="separator">/</span>
-          <sl-breadcrumb-item>First</sl-breadcrumb-item>
-          <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-          <sl-breadcrumb-item>Third</sl-breadcrumb-item>
-        </sl-breadcrumb>
-      `);
-    });
-
-    it('should render a component that passes accessibility test', async () => {
-      await expect(el).to.be.accessible();
-    });
-
-    it('should accept "separator" as an assigned child in the shadow root', async () => {
-      const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=separator]');
-      const childNodes = slot.assignedNodes({ flatten: true });
-
-      expect(childNodes.length).to.eq(1);
-    });
-
-    it('should replace the sl-icon separator with the provided separator', async () => {
-      expect(el.querySelectorAll('.replacement-separator').length).to.eq(4);
-      expect(el.querySelectorAll('sl-icon').length).to.eq(0);
-    });
-  });
-
-  describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "prefix" to support prefix icons', async () => {
-    before(async () => {
-      el = await fixture<SlBreadcrumb>(html`
-        <sl-breadcrumb>
-          <sl-breadcrumb-item>
-            <span class="prefix-example" slot="prefix">/</span>
-            Home
-          </sl-breadcrumb-item>
-          <sl-breadcrumb-item>First</sl-breadcrumb-item>
-          <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-          <sl-breadcrumb-item>Third</sl-breadcrumb-item>
-        </sl-breadcrumb>
-      `);
-    });
-
-    it('should render a component that passes accessibility test', async () => {
-      await expect(el).to.be.accessible();
-    });
-  });
-
-  describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "suffix" to support suffix icons', async () => {
-    before(async () => {
-      el = await fixture<SlBreadcrumb>(html`
-        <sl-breadcrumb>
-          <sl-breadcrumb-item>First</sl-breadcrumb-item>
-          <sl-breadcrumb-item>Second</sl-breadcrumb-item>
-          <sl-breadcrumb-item>Third</sl-breadcrumb-item>
-          <sl-breadcrumb-item>
-            <span class="prefix-example" slot="suffix">/</span>
-            Security
-          </sl-breadcrumb-item>
-        </sl-breadcrumb>
-      `);
-    });
-
-    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/breadcrumb/breadcrumb.ts

@@ -1,82 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import styles from './breadcrumb.styles';
-import type SlBreadcrumbItem from '../breadcrumb-item/breadcrumb-item';
-
-import '../icon/icon';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - One or more breadcrumb items to display.
- * @slot separator - The separator to use between breadcrumb items.
- *
- * @dependency sl-icon
- *
- * @csspart base - The component's base wrapper.
- */
-@customElement('sl-breadcrumb')
-export default class SlBreadcrumb extends LitElement {
-  static styles = styles;
-
-  @query('slot') defaultSlot: HTMLSlotElement;
-  @query('slot[name="separator"]') separatorSlot: HTMLSlotElement;
-
-  /**
-   * The label to use for the breadcrumb control. This will not be shown, but it will be announced by screen readers and
-   * other assistive devices.
-   */
-  @property() label = 'Breadcrumb';
-
-  // Generates a clone of the separator element to use for each breadcrumb item
-  private getSeparator() {
-    const separator = this.separatorSlot.assignedElements({ flatten: true })[0] as HTMLElement;
-
-    // Clone it, remove ids, and slot it
-    const clone = separator.cloneNode(true) as HTMLElement;
-    [clone, ...clone.querySelectorAll('[id]')].map(el => el.removeAttribute('id'));
-    clone.slot = 'separator';
-
-    return clone;
-  }
-
-  handleSlotChange() {
-    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
-      item => item.tagName.toLowerCase() === 'sl-breadcrumb-item'
-    ) as SlBreadcrumbItem[];
-
-    items.map((item, index) => {
-      // Append separators to each item if they don't already have one
-      const separator = item.querySelector('[slot="separator"]') as HTMLElement;
-      if (!separator) {
-        item.append(this.getSeparator());
-      }
-
-      // The last breadcrumb item is the "current page"
-      if (index === items.length - 1) {
-        item.setAttribute('aria-current', 'page');
-      } else {
-        item.removeAttribute('aria-current');
-      }
-    });
-  }
-
-  render() {
-    return html`
-      <nav part="base" class="breadcrumb" aria-label=${this.label}>
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </nav>
-
-      <slot name="separator" hidden aria-hidden="true">
-        <sl-icon name="chevron-right" library="system"></sl-icon>
-      </slot>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-breadcrumb': SlBreadcrumb;
-  }
-}

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

@@ -1,85 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-import { focusVisibleSelector } from '../../internal/focus-visible';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: inline-flex;
-  }
-
-  .breadcrumb-item {
-    display: inline-flex;
-    align-items: center;
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-600);
-    line-height: var(--sl-line-height-normal);
-    white-space: nowrap;
-  }
-
-  .breadcrumb-item__label {
-    display: inline-block;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-decoration: none;
-    color: inherit;
-    background: none;
-    border: none;
-    border-radius: var(--sl-border-radius-medium);
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    transition: var(--sl-transition-fast) --color;
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label {
-    color: var(--sl-color-primary-600);
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
-    color: var(--sl-color-primary-500);
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
-    color: var(--sl-color-primary-600);
-  }
-
-  .breadcrumb-item__label${focusVisibleSelector} {
-    outline: none;
-    box-shadow: var(--sl-focus-ring);
-  }
-
-  .breadcrumb-item__prefix,
-  .breadcrumb-item__suffix {
-    display: none;
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
-    display: inline-flex;
-    margin-right: var(--sl-spacing-x-small);
-  }
-
-  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
-    display: inline-flex;
-    margin-left: var(--sl-spacing-x-small);
-  }
-
-  :host(:last-of-type) .breadcrumb-item__separator {
-    display: none;
-  }
-
-  .breadcrumb-item__separator {
-    display: inline-flex;
-    align-items: center;
-    margin: 0 var(--sl-spacing-x-small);
-    user-select: none;
-  }
-`;

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

@@ -1,160 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-
-import '../../../dist/shoelace.js';
-import type SlBreadcrumbItem from './breadcrumb-item';
-
-describe('<sl-breadcrumb-item>', () => {
-  let el: SlBreadcrumbItem;
-
-  describe('when not provided a href attribute', async () => {
-    before(async () => {
-      el = await fixture<SlBreadcrumbItem>(html` <sl-breadcrumb-item>Home</sl-breadcrumb-item> `);
-    });
-
-    it('should render a component that passes accessibility test', async () => {
-      await expect(el).to.be.accessible();
-    });
-
-    it('should hide the separator from screen readers', async () => {
-      const separator: HTMLSpanElement = el.shadowRoot.querySelector('[part="separator"]');
-      expect(separator).attribute('aria-hidden', 'true');
-    });
-
-    it('should render a HTMLButtonElement as the part "label", with a set type "button"', () => {
-      const button: HTMLButtonElement = el.shadowRoot.querySelector('[part="label"]');
-      expect(button).to.exist;
-      expect(button).attribute('type', 'button');
-    });
-  });
-
-  describe('when provided a href attribute', async () => {
-    describe('and no target', () => {
-      before(async () => {
-        el = await fixture<SlBreadcrumbItem>(html`
-          <sl-breadcrumb-item href="https://jsonplaceholder.typicode.com/">Home</sl-breadcrumb-item>
-        `);
-      });
-
-      it('should render a component that passes accessibility test', async () => {
-        await expect(el).to.be.accessible();
-      });
-
-      it('should render a HTMLAnchorElement as the part "label", with the supplied href value', () => {
-        const hyperlink: HTMLAnchorElement = el.shadowRoot.querySelector('[part="label"]');
-        expect(hyperlink).attribute('href', 'https://jsonplaceholder.typicode.com/');
-      });
-    });
-
-    describe('and target, without rel', () => {
-      before(async () => {
-        el = await fixture<SlBreadcrumbItem>(html`
-          <sl-breadcrumb-item href="https://jsonplaceholder.typicode.com/" target="_blank">Help</sl-breadcrumb-item>
-        `);
-      });
-
-      it('should render a component that passes accessibility test', async () => {
-        await expect(el).to.be.accessible();
-      });
-
-      describe('should render a HTMLAnchorElement as the part "label"', () => {
-        let hyperlink: HTMLAnchorElement;
-
-        before(() => {
-          hyperlink = el.shadowRoot.querySelector('[part="label"]');
-        });
-
-        it('should use the supplied href value, as the href attribute value', () => {
-          expect(hyperlink).attribute('href', 'https://jsonplaceholder.typicode.com/');
-        });
-
-        it('should default rel attribute to "noreferrer noopener"', () => {
-          expect(hyperlink).attribute('rel', 'noreferrer noopener');
-        });
-      });
-    });
-
-    describe('and target, with rel', () => {
-      before(async () => {
-        el = await fixture<SlBreadcrumbItem>(html`
-          <sl-breadcrumb-item href="https://jsonplaceholder.typicode.com/" target="_blank" rel="alternate"
-            >Help</sl-breadcrumb-item
-          >
-        `);
-      });
-
-      it('should render a component that passes accessibility test', async () => {
-        await expect(el).to.be.accessible();
-      });
-
-      describe('should render a HTMLAnchorElement', () => {
-        let hyperlink: HTMLAnchorElement;
-
-        before(() => {
-          hyperlink = el.shadowRoot.querySelector('a');
-        });
-
-        it('should use the supplied href value, as the href attribute value', () => {
-          expect(hyperlink).attribute('href', 'https://jsonplaceholder.typicode.com/');
-        });
-
-        it('should use the supplied rel value, as the rel attribute value', () => {
-          expect(hyperlink).attribute('rel', 'alternate');
-        });
-      });
-    });
-  });
-
-  describe('when provided an element in the slot "prefix" to support prefix icons', async () => {
-    before(async () => {
-      el = await fixture<SlBreadcrumbItem>(html`
-        <sl-breadcrumb-item>
-          <span class="prefix-example" slot="prefix">/</span>
-          Home
-        </sl-breadcrumb-item>
-      `);
-    });
-
-    it('should render a component that passes accessibility test', async () => {
-      await expect(el).to.be.accessible();
-    });
-
-    it('should accept as an assigned child in the shadow root', () => {
-      const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=prefix]');
-      const childNodes = slot.assignedNodes({ flatten: true });
-
-      expect(childNodes.length).to.eq(1);
-    });
-
-    it('should append class "breadcrumb-item--has-prefix" to "base" part', () => {
-      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-      expect(part.classList.value.trim()).to.equal('breadcrumb-item breadcrumb-item--has-prefix');
-    });
-  });
-
-  describe('when provided an element in the slot "suffix" to support suffix icons', async () => {
-    before(async () => {
-      el = await fixture<SlBreadcrumbItem>(html`
-        <sl-breadcrumb-item>
-          <span class="prefix-example" slot="suffix">/</span>
-          Security
-        </sl-breadcrumb-item>
-      `);
-    });
-
-    it('should render a component that passes accessibility test', async () => {
-      await expect(el).to.be.accessible();
-    });
-
-    it('should accept as an assigned child in the shadow root', () => {
-      const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=suffix]');
-      const childNodes = slot.assignedNodes({ flatten: true });
-
-      expect(childNodes.length).to.eq(1);
-    });
-
-    it('should append class "breadcrumb-item--has-suffix" to "base" part', () => {
-      const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-      expect(part.classList.value.trim()).to.equal('breadcrumb-item breadcrumb-item--has-suffix');
-    });
-  });
-});