shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,84 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-import { focusVisibleSelector } from '../../internal/focus-visible';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: block;
-  }
-
-  .menu-item {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    line-height: var(--sl-line-height-normal);
-    letter-spacing: var(--sl-letter-spacing-normal);
-    text-align: left;
-    color: var(--sl-color-neutral-700);
-    padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-large);
-    transition: var(--sl-transition-fast) fill;
-    user-select: none;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-
-  .menu-item.menu-item--disabled {
-    outline: none;
-    color: var(--sl-color-neutral-400);
-    cursor: not-allowed;
-  }
-
-  .menu-item .menu-item__label {
-    flex: 1 1 auto;
-  }
-
-  .menu-item .menu-item__prefix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .menu-item .menu-item__prefix ::slotted(*) {
-    margin-right: var(--sl-spacing-x-small);
-  }
-
-  .menu-item .menu-item__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .menu-item .menu-item__suffix ::slotted(*) {
-    margin-left: var(--sl-spacing-x-small);
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  :host(:hover:not([aria-disabled='true'])) .menu-item,
-  :host(${focusVisibleSelector}:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item {
-    outline: none;
-    background-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .menu-item .menu-item__check {
-    display: flex;
-    position: absolute;
-    left: 0.5em;
-    top: calc(50% - 0.5em);
-    visibility: hidden;
-    align-items: center;
-    font-size: inherit;
-  }
-
-  .menu-item--checked .menu-item__check {
-    visibility: visible;
-  }
-`;

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

@@ -1,92 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { watch } from '../../internal/watch';
-import styles from './menu-item.styles';
-
-import '../icon/icon';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @dependency sl-icon
- *
- * @slot - The menu item's label.
- * @slot prefix - Used to prepend an icon or similar element to the menu item.
- * @slot suffix - Used to append an icon or similar element to the menu item.
- *
- * @csspart base - The component's base wrapper.
- * @csspart checked-icon - The container that wraps the checked icon.
- * @csspart prefix - The prefix container.
- * @csspart label - The menu item label.
- * @csspart suffix - The suffix container.
- */
-@customElement('sl-menu-item')
-export default class SlMenuItem extends LitElement {
-  static styles = styles;
-
-  @query('.menu-item') menuItem: HTMLElement;
-
-  /** Draws the item in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = false;
-
-  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
-  @property() value = '';
-
-  /** Draws the menu item in a disabled state. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  firstUpdated() {
-    this.setAttribute('role', 'menuitem');
-  }
-
-  @watch('checked')
-  handleCheckedChange() {
-    this.setAttribute('aria-checked', String(this.checked));
-  }
-
-  @watch('disabled')
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', String(this.disabled));
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          'menu-item': true,
-          'menu-item--checked': this.checked,
-          'menu-item--disabled': this.disabled
-        })}
-      >
-        <sl-icon
-          part="checked-icon"
-          class="menu-item__check"
-          name="check"
-          library="system"
-          aria-hidden="true"
-        ></sl-icon>
-
-        <span part="prefix" class="menu-item__prefix">
-          <slot name="prefix"></slot>
-        </span>
-
-        <span part="label" class="menu-item__label">
-          <slot></slot>
-        </span>
-
-        <span part="suffix" class="menu-item__suffix">
-          <slot name="suffix"></slot>
-        </span>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-menu-item': SlMenuItem;
-  }
-}

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

@@ -1,21 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: block;
-  }
-
-  .menu-label {
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-semibold);
-    line-height: var(--sl-line-height-normal);
-    letter-spacing: var(--sl-letter-spacing-normal);
-    color: var(--sl-color-neutral-500);
-    padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-large);
-    user-select: none;
-  }
-`;

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

@@ -1,30 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import styles from './menu-label.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - The menu label's content.
- *
- * @csspart base - The component's base wrapper.
- */
-@customElement('sl-menu-label')
-export default class SlMenuLabel extends LitElement {
-  static styles = styles;
-
-  render() {
-    return html`
-      <div part="base" class="menu-label">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-menu-label': SlMenuLabel;
-  }
-}

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

@@ -1,10 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: contents;
-  }
-`;

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

@@ -1,13 +0,0 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-// import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlMutationObserver from './mutation-observer';
-
-describe('<sl-mutation-observer>', () => {
-  it('should render a component', async () => {
-    const el = await fixture(html` <sl-mutation-observer></sl-mutation-observer> `);
-
-    expect(el).to.exist;
-  });
-});

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

@@ -1,118 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { emit } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import styles from './mutation-observer.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @event sl-mutation - Emitted when a mutation occurs.
- *
- * @slot - The content to watch for mutations.
- */
-@customElement('sl-mutation-observer')
-export default class SlMutationObserver extends LitElement {
-  static styles = styles;
-
-  private mutationObserver: MutationObserver;
-
-  /**
-   * Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
-   * `class id title`. To watch all attributes, use `*`.
-   */
-  @property({ reflect: true }) attr: string;
-
-  /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
-  @property({ attribute: 'attr-old-value', type: Boolean, reflect: true }) attrOldValue = false;
-
-  /** Watches for changes to the character data contained within the node. */
-  @property({ attribute: 'char-data', type: Boolean, reflect: true }) charData = false;
-
-  /** Indicates whether or not the previous value of the node's text should be recorded. */
-  @property({ attribute: 'char-data-old-value', type: Boolean, reflect: true }) charDataOldValue = false;
-
-  /** Watches for the addition or removal of new child nodes. */
-  @property({ attribute: 'child-list', type: Boolean, reflect: true }) childList = false;
-
-  /** Disables the observer. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleMutation = this.handleMutation.bind(this);
-
-    this.mutationObserver = new MutationObserver(this.handleMutation);
-
-    if (!this.disabled) {
-      this.startObserver();
-    }
-  }
-
-  disconnectedCallback() {
-    this.stopObserver();
-  }
-
-  @watch('disabled')
-  handleDisabledChange() {
-    if (this.disabled) {
-      this.stopObserver();
-    } else {
-      this.startObserver();
-    }
-  }
-
-  @watch('attr', { waitUntilFirstUpdate: true })
-  @watch('attr-old-value', { waitUntilFirstUpdate: true })
-  @watch('char-data', { waitUntilFirstUpdate: true })
-  @watch('char-data-old-value', { waitUntilFirstUpdate: true })
-  @watch('childList', { waitUntilFirstUpdate: true })
-  handleChange() {
-    this.stopObserver();
-    this.startObserver();
-  }
-
-  handleMutation(mutationList: MutationRecord[]) {
-    emit(this, 'sl-mutation', {
-      detail: { mutationList }
-    });
-  }
-
-  startObserver() {
-    const observeAttributes = typeof this.attr === 'string' && this.attr.length > 0;
-    const attributeFilter = observeAttributes && this.attr !== '*' ? this.attr.split(' ') : undefined;
-
-    try {
-      this.mutationObserver.observe(this, {
-        subtree: true,
-        childList: this.childList,
-        attributes: observeAttributes,
-        attributeFilter,
-        attributeOldValue: this.attrOldValue,
-        characterData: this.charData,
-        characterDataOldValue: this.charDataOldValue
-      });
-    } catch {
-      //
-      // A mutation observer was created without one of the required attributes: attr, char-data, or child-list. The
-      // browser will normally throw an error, but we'll suppress that so it doesn't appear as attributes are added
-      // and removed.
-      //
-    }
-  }
-
-  stopObserver() {
-    this.mutationObserver.disconnect();
-  }
-
-  render() {
-    return html` <slot></slot> `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-mutation-observer': SlMutationObserver;
-  }
-}

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

@@ -1,57 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    --height: 1rem;
-    --track-color: var(--sl-color-neutral-200);
-    --indicator-color: var(--sl-color-primary-600);
-    --label-color: var(--sl-color-neutral-0);
-
-    display: block;
-  }
-
-  .progress-bar {
-    position: relative;
-    background-color: var(--track-color);
-    height: var(--height);
-    border-radius: var(--sl-border-radius-pill);
-    box-shadow: inset var(--sl-shadow-small);
-    overflow: hidden;
-  }
-
-  .progress-bar__indicator {
-    height: 100%;
-    font-family: var(--sl-font-sans);
-    font-size: 12px;
-    font-weight: var(--sl-font-weight-normal);
-    background-color: var(--indicator-color);
-    color: var(--label-color);
-    text-align: center;
-    line-height: var(--height);
-    white-space: nowrap;
-    overflow: hidden;
-    transition: 400ms width, 400ms background-color;
-    user-select: none;
-  }
-
-  /* Indeterminate */
-  .progress-bar--indeterminate .progress-bar__indicator {
-    position: absolute;
-    animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
-  }
-
-  @keyframes indeterminate {
-    0% {
-      left: -50%;
-      width: 50%;
-    }
-    75%,
-    100% {
-      left: 100%;
-      width: 50%;
-    }
-  }
-`;

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

@@ -1,89 +0,0 @@
-import { expect, fixture, html } from '@open-wc/testing';
-
-import '../../../dist/shoelace.js';
-import type SlProgressBar from './progress-bar';
-
-describe('<sl-progress-bar>', () => {
-  let el: SlProgressBar;
-
-  describe('when provided just a value parameter', async () => {
-    before(async () => {
-      el = await fixture<SlProgressBar>(html`<sl-progress-bar value="25"></sl-progress-bar>`);
-    });
-
-    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;
-    let indicator: HTMLDivElement;
-
-    before(async () => {
-      el = await fixture<SlProgressBar>(
-        html`<sl-progress-bar title="Titled Progress Ring" value="25"></sl-progress-bar>`
-      );
-      base = el.shadowRoot?.querySelector('[part="base"]') as HTMLDivElement;
-      indicator = el.shadowRoot?.querySelector('[part="indicator"]') 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('appends a % to the value, and uses it as the  the value parameter to determine the width on the "indicator" part', async () => {
-      expect(indicator).attribute('style', 'width:25%;');
-    });
-  });
-
-  describe('when provided an indeterminate parameter', async () => {
-    let base: HTMLDivElement;
-
-    before(async () => {
-      el = await fixture<SlProgressBar>(
-        html`<sl-progress-bar title="Titled Progress Ring" indeterminate></sl-progress-bar>`
-      );
-      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('should append a progress-bar--indeterminate class to the "base" part.', async () => {
-      expect(base.classList.value.trim()).to.eq('progress-bar progress-bar--indeterminate');
-    });
-  });
-
-  describe('when provided a ariaLabel, and value parameter', async () => {
-    before(async () => {
-      el = await fixture<SlProgressBar>(
-        html`<sl-progress-bar ariaLabel="Labelled Progress Ring" value="25"></sl-progress-bar>`
-      );
-    });
-
-    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<SlProgressBar>(
-        html`
-          <label id="labelledby">Progress Ring Label</label>
-          <sl-progress-bar ariaLabelledBy="labelledby" value="25"></sl-progress-bar>
-        `
-      );
-    });
-
-    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-bar/progress-bar.ts

@@ -1,74 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { LocalizeController } from '../../utilities/localize';
-import styles from './progress-bar.styles';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - A label to show inside the indicator.
- *
- * @csspart base - The component's base wrapper.
- * @csspart indicator - The progress bar indicator.
- * @csspart label - The progress bar label.
- *
- * @cssproperty --height - The progress bar's height.
- * @cssproperty --track-color - The track color.
- * @cssproperty --indicator-color - The indicator color.
- * @cssproperty --label-color - The label color.
- */
-@customElement('sl-progress-bar')
-export default class SlProgressBar extends LitElement {
-  static styles = styles;
-  private localize = new LocalizeController(this);
-
-  /** The current progress, 0 to 100. */
-  @property({ type: Number, reflect: true }) value = 0;
-
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  @property({ type: Boolean, reflect: true }) indeterminate = false;
-
-  /** A custom label for the progress bar's aria label. */
-  @property() label: string;
-
-  /** The locale to render the component in. */
-  @property() lang: string;
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          'progress-bar': true,
-          'progress-bar--indeterminate': this.indeterminate
-        })}
-        role="progressbar"
-        title=${ifDefined(this.title)}
-        aria-label=${this.label || this.localize.term('progress')}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow=${this.indeterminate ? 0 : this.value}
-      >
-        <div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: this.value + '%' })}>
-          ${!this.indeterminate
-            ? html`
-                <span part="label" class="progress-bar__label">
-                  <slot></slot>
-                </span>
-              `
-            : ''}
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-progress-bar': SlProgressBar;
-  }
-}

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

@@ -1,66 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    --size: 128px;
-    --track-width: 4px;
-    --track-color: var(--sl-color-neutral-200);
-    --indicator-color: var(--sl-color-primary-600);
-
-    display: inline-flex;
-  }
-
-  .progress-ring {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-  }
-
-  .progress-ring__image {
-    width: var(--size);
-    height: var(--size);
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-  }
-
-  .progress-ring__track,
-  .progress-ring__indicator {
-    --radius: calc(var(--size) / 2 - var(--track-width) * 2);
-    --circumference: calc(var(--radius) * 2 * 3.141592654);
-
-    fill: none;
-    stroke-width: var(--track-width);
-    r: var(--radius);
-    cx: calc(var(--size) / 2);
-    cy: calc(var(--size) / 2);
-  }
-
-  .progress-ring__track {
-    stroke: var(--track-color);
-  }
-
-  .progress-ring__indicator {
-    stroke: var(--indicator-color);
-    stroke-linecap: round;
-    transition: 0.35s stroke-dashoffset;
-    stroke-dasharray: var(--circumference) var(--circumference);
-    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
-  }
-
-  .progress-ring__label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    user-select: none;
-  }
-`;