shoelace-rails-ui 0.1.0

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

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

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

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

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

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

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

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

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