shoelace-rails-ui 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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