shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,209 @@
+import { LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { html, literal } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { emit } from '../../internal/event';
+import { FormSubmitController } from '../../internal/form-control';
+import { HasSlotController } from '../../internal/slot';
+import styles from './button.styles';
+
+import '../spinner/spinner';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @dependency sl-spinner
+ *
+ * @event sl-blur - Emitted when the button loses focus.
+ * @event sl-focus - Emitted when the button gains focus.
+ *
+ * @slot - The button's label.
+ * @slot prefix - Used to prepend an icon or similar element to the button.
+ * @slot suffix - Used to append an icon or similar element to the button.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart prefix - The prefix container.
+ * @csspart label - The button's label.
+ * @csspart suffix - The suffix container.
+ * @csspart caret - The button's caret.
+ */
+@customElement('sl-button')
+export default class SlButton extends LitElement {
+  static styles = styles;
+
+  @query('.button') button: HTMLButtonElement | HTMLLinkElement;
+
+  private formSubmitController = new FormSubmitController(this);
+  private hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+
+  @state() private hasFocus = false;
+
+  /** The button's variant. */
+  @property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' =
+    'default';
+
+  /** The button's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Draws the button with a caret for use with dropdowns, popovers, etc. */
+  @property({ type: Boolean, reflect: true }) caret = false;
+
+  /** Disables the button. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Draws the button in a loading state. */
+  @property({ type: Boolean, reflect: true }) loading = false;
+
+  /** Draws an outlined button. */
+  @property({ type: Boolean, reflect: true }) outline = false;
+
+  /** Draws a pill-style button with rounded edges. */
+  @property({ type: Boolean, reflect: true }) pill = false;
+
+  /** Draws a circle button. */
+  @property({ type: Boolean, reflect: true }) circle = false;
+
+  /**
+   * The type of button. When the type is `submit`, the button will submit the surrounding form. Note that the default
+   * value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave.
+   */
+  @property() type: 'button' | 'submit' = 'button';
+
+  /** An optional name for the button. Ignored when `href` is set. */
+  @property() name: string;
+
+  /** An optional value for the button. Ignored when `href` is set. */
+  @property() value: string;
+
+  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+  @property() href: string;
+
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  @property() target: '_blank' | '_parent' | '_self' | '_top';
+
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
+  @property() download: string;
+
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+
+  /** Sets focus on the button. */
+  focus(options?: FocusOptions) {
+    this.button.focus(options);
+  }
+
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+
+  handleBlur() {
+    this.hasFocus = false;
+    emit(this, 'sl-blur');
+  }
+
+  handleFocus() {
+    this.hasFocus = true;
+    emit(this, 'sl-focus');
+  }
+
+  handleClick(event: MouseEvent) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    if (this.type === 'submit') {
+      this.formSubmitController.submit();
+    }
+  }
+
+  render() {
+    const isLink = this.href ? true : false;
+    const tag = isLink ? literal`a` : literal`button`;
+
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+          button: true,
+          'button--default': this.variant === 'default',
+          'button--primary': this.variant === 'primary',
+          'button--success': this.variant === 'success',
+          'button--neutral': this.variant === 'neutral',
+          'button--warning': this.variant === 'warning',
+          'button--danger': this.variant === 'danger',
+          'button--text': this.variant === 'text',
+          'button--small': this.size === 'small',
+          'button--medium': this.size === 'medium',
+          'button--large': this.size === 'large',
+          'button--caret': this.caret,
+          'button--circle': this.circle,
+          'button--disabled': this.disabled,
+          'button--focused': this.hasFocus,
+          'button--loading': this.loading,
+          'button--standard': !this.outline,
+          'button--outline': this.outline,
+          'button--pill': this.pill,
+          'button--has-label': this.hasSlotController.test('[default]'),
+          'button--has-prefix': this.hasSlotController.test('prefix'),
+          'button--has-suffix': this.hasSlotController.test('suffix')
+        })}
+        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
+        type=${this.type}
+        name=${ifDefined(isLink ? undefined : this.name)}
+        value=${ifDefined(isLink ? undefined : this.value)}
+        href=${ifDefined(this.href)}
+        target=${ifDefined(this.target)}
+        download=${ifDefined(this.download)}
+        rel=${ifDefined(this.target ? 'noreferrer noopener' : undefined)}
+        role="button"
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <span part="prefix" class="button__prefix">
+          <slot name="prefix"></slot>
+        </span>
+        <span part="label" class="button__label">
+          <slot></slot>
+        </span>
+        <span part="suffix" class="button__suffix">
+          <slot name="suffix"></slot>
+        </span>
+        ${
+          this.caret
+            ? html`
+                <span part="caret" class="button__caret">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                  </svg>
+                </span>
+              `
+            : ''
+        }
+        ${this.loading ? html`<sl-spinner></sl-spinner>` : ''}
+      </${tag}>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-button': SlButton;
+  }
+}

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

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+`;

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

@@ -0,0 +1,84 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import styles from './button-group.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - One or more `<sl-button>` elements to display in the button group.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+@customElement('sl-button-group')
+export default class SlButtonGroup extends LitElement {
+  static styles = styles;
+
+  @query('slot') defaultSlot: HTMLSlotElement;
+
+  /** A label to use for the button group's `aria-label` attribute. */
+  @property() label = '';
+
+  handleFocus(event: CustomEvent) {
+    const button = findButton(event.target as HTMLElement);
+    button?.classList.add('sl-button-group__button--focus');
+  }
+
+  handleBlur(event: CustomEvent) {
+    const button = findButton(event.target as HTMLElement);
+    button?.classList.remove('sl-button-group__button--focus');
+  }
+
+  handleMouseOver(event: CustomEvent) {
+    const button = findButton(event.target as HTMLElement);
+    button?.classList.add('sl-button-group__button--hover');
+  }
+
+  handleMouseOut(event: CustomEvent) {
+    const button = findButton(event.target as HTMLElement);
+    button?.classList.remove('sl-button-group__button--hover');
+  }
+
+  handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })] as HTMLElement[];
+
+    slottedElements.map(el => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+
+      if (button) {
+        button.classList.add('sl-button-group__button');
+        button.classList.toggle('sl-button-group__button--first', index === 0);
+        button.classList.toggle('sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle('sl-button-group__button--last', index === slottedElements.length - 1);
+      }
+    });
+  }
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class="button-group"
+        role="group"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+function findButton(el: HTMLElement) {
+  return el.tagName.toLowerCase() === 'sl-button' ? el : el.querySelector('sl-button');
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-button-group': SlButtonGroup;
+  }
+}

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

@@ -0,0 +1,62 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --border-color: var(--sl-color-neutral-200);
+    --border-radius: var(--sl-border-radius-medium);
+    --border-width: 1px;
+    --padding: var(--sl-spacing-large);
+
+    display: inline-block;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sl-panel-background-color);
+    box-shadow: var(--sl-shadow-x-small);
+    border: solid var(--border-width) var(--border-color);
+    border-radius: var(--border-radius);
+  }
+
+  .card__image {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+    margin: calc(-1 * var(--border-width));
+    overflow: hidden;
+  }
+
+  .card__image ::slotted(img) {
+    display: block;
+    width: 100%;
+  }
+
+  .card:not(.card--has-image) .card__image {
+    display: none;
+  }
+
+  .card__header {
+    border-bottom: solid var(--border-width) var(--border-color);
+    padding: calc(var(--padding) / 2) var(--padding);
+  }
+
+  .card:not(.card--has-header) .card__header {
+    display: none;
+  }
+
+  .card__body {
+    padding: var(--padding);
+  }
+
+  .card--has-footer .card__footer {
+    border-top: solid var(--border-width) var(--border-color);
+    padding: var(--padding);
+  }
+
+  .card:not(.card--has-footer) .card__footer {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,139 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import '../../../dist/shoelace.js';
+import type SlCard from './card';
+
+describe('<sl-card>', () => {
+  let el: SlCard;
+
+  describe('when provided no parameters', async () => {
+    before(async () => {
+      el = await fixture<SlCard>(
+        html` <sl-card>This is just a basic card. No image, no header, and no footer. Just your content.</sl-card> `
+      );
+    });
+
+    it('should render a component that passes accessibility test.', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('should render the child content provided.', async () => {
+      expect(el.innerText).to.eq('This is just a basic card. No image, no header, and no footer. Just your content.');
+    });
+
+    it('should contain the class card.', async () => {
+      const card = el.shadowRoot.querySelector('.card') as HTMLElement;
+      expect(card.classList.value.trim()).to.eq('card');
+    });
+  });
+
+  describe('when provided an element in the slot "header" to render a header', async () => {
+    before(async () => {
+      el = await fixture<SlCard>(
+        html`<sl-card>
+          <div slot="header">Header Title</div>
+          This card has a header. You can put all sorts of things in it!
+        </sl-card>`
+      );
+    });
+
+    it('should render a component that passes accessibility test.', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('should render the child content provided.', async () => {
+      expect(el.innerText).to.contain('This card has a header. You can put all sorts of things in it!');
+    });
+
+    it('render the header content provided.', async () => {
+      const header = <HTMLDivElement>el.querySelector('div[slot=header]');
+      expect(header.innerText).eq('Header Title');
+    });
+
+    it('accept "header" as an assigned child in the shadow root.', async () => {
+      const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=header]');
+      const childNodes = slot.assignedNodes({ flatten: true });
+
+      expect(childNodes.length).to.eq(1);
+    });
+
+    it('should contain the class card--has-header.', async () => {
+      const card = el.shadowRoot.querySelector('.card') as HTMLElement;
+      expect(card.classList.value.trim()).to.eq('card card--has-header');
+    });
+  });
+
+  describe('when provided an element in the slot "footer" to render a footer', async () => {
+    before(async () => {
+      el = await fixture<SlCard>(
+        html`<sl-card>
+          This card has a footer. You can put all sorts of things in it!
+
+          <div slot="footer">Footer Content</div>
+        </sl-card>`
+      );
+    });
+
+    it('should render a component that passes accessibility test.', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('should render the child content provided.', async () => {
+      expect(el.innerText).to.contain('This card has a footer. You can put all sorts of things in it!');
+    });
+
+    it('render the footer content provided.', async () => {
+      const footer = <HTMLDivElement>el.querySelector('div[slot=footer]');
+      expect(footer.innerText).eq('Footer Content');
+    });
+
+    it('accept "footer" as an assigned child in the shadow root.', async () => {
+      const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=footer]');
+      const childNodes = slot.assignedNodes({ flatten: true });
+
+      expect(childNodes.length).to.eq(1);
+    });
+
+    it('should contain the class card--has-footer.', async () => {
+      const card = el.shadowRoot.querySelector('.card') as HTMLElement;
+      expect(card.classList.value.trim()).to.eq('card card--has-footer');
+    });
+  });
+
+  describe('when provided an element in the slot "image" to render a image', async () => {
+    before(async () => {
+      el = await fixture<SlCard>(
+        html`<sl-card>
+          <img
+            slot="image"
+            src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
+            alt="A kitten walks towards camera on top of pallet."
+          />
+          This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+        </sl-card>`
+      );
+    });
+
+    it('should render a component that passes accessibility test.', async () => {
+      await expect(el).to.be.accessible();
+    });
+
+    it('should render the child content provided.', async () => {
+      expect(el.innerText).to.contain(
+        'This is a kitten, but not just any kitten. This kitten likes walking along pallets.'
+      );
+    });
+
+    it('accept "image" as an assigned child in the shadow root.', async () => {
+      const slot = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=image]');
+      const childNodes = slot.assignedNodes({ flatten: true });
+
+      expect(childNodes.length).to.eq(1);
+    });
+
+    it('should contain the class card--has-image.', async () => {
+      const card = el.shadowRoot.querySelector('.card') as HTMLElement;
+      expect(card.classList.value.trim()).to.eq('card card--has-image');
+    });
+  });
+});

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

@@ -0,0 +1,68 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController } from '../../internal/slot';
+import styles from './card.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - The card's body.
+ * @slot header - The card's header.
+ * @slot footer - The card's footer.
+ * @slot image - The card's image.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart image - The card's image, if present.
+ * @csspart header - The card's header, if present.
+ * @csspart body - The card's body.
+ * @csspart footer - The card's footer, if present.
+ *
+ * @cssproperty --border-color - The card's border color, including borders that occur inside the card.
+ * @cssproperty --border-radius - The border radius for card edges.
+ * @cssproperty --border-width - The width of card borders.
+ * @cssproperty --padding - The padding to use for card sections.*
+ */
+@customElement('sl-card')
+export default class SlCard extends LitElement {
+  static styles = styles;
+
+  private hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          card: true,
+          'card--has-footer': this.hasSlotController.test('footer'),
+          'card--has-image': this.hasSlotController.test('image'),
+          'card--has-header': this.hasSlotController.test('header')
+        })}
+      >
+        <div part="image" class="card__image">
+          <slot name="image"></slot>
+        </div>
+
+        <div part="header" class="card__header">
+          <slot name="header"></slot>
+        </div>
+
+        <div part="body" class="card__body">
+          <slot></slot>
+        </div>
+
+        <div part="footer" class="card__footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-card': SlCard;
+  }
+}

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

@@ -0,0 +1,108 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .checkbox {
+    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;
+  }
+
+  .checkbox__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: 2px;
+    background-color: var(--sl-input-background-color);
+    color: var(--sl-color-neutral-0);
+    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .checkbox__control .checkbox__icon {
+    display: inline-flex;
+    width: var(--sl-toggle-size);
+    height: var(--sl-toggle-size);
+  }
+
+  .checkbox__control .checkbox__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Hover */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--sl-input-border-color-hover);
+    background-color: var(--sl-input-background-color-hover);
+  }
+
+  /* Focus */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
+    .checkbox__input${focusVisibleSelector}
+    ~ .checkbox__control {
+    border-color: var(--sl-input-border-color-focus);
+    background-color: var(--sl-input-background-color-focus);
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox--checked .checkbox__control,
+  .checkbox--indeterminate .checkbox__control {
+    border-color: var(--sl-color-primary-600);
+    background-color: var(--sl-color-primary-600);
+  }
+
+  /* Checked/indeterminate + hover */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--sl-color-primary-500);
+    background-color: var(--sl-color-primary-500);
+  }
+
+  /* Checked/indeterminate + focus */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input${focusVisibleSelector} ~ .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
+    .checkbox__input${focusVisibleSelector}
+    ~ .checkbox__control {
+    border-color: var(--sl-color-primary-500);
+    background-color: var(--sl-color-primary-500);
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  /* Disabled */
+  .checkbox--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .checkbox__label {
+    line-height: var(--sl-toggle-size);
+    margin-left: 0.5em;
+    user-select: none;
+  }
+`;