shoelace-rails-ui 0.1.0 → 0.1.1

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

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

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

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

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

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

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

@@ -1,108 +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-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;
-  }
-`;