shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,331 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-import formControlStyles from '../../styles/form-control.styles';
-
-export default css`
-  ${componentStyles}
-  ${formControlStyles}
-
-  :host {
-    display: block;
-  }
-
-  .select {
-    display: block;
-  }
-
-  .select__control {
-    display: inline-flex;
-    align-items: center;
-    justify-content: start;
-    position: relative;
-    width: 100%;
-    font-family: var(--sl-input-font-family);
-    font-weight: var(--sl-input-font-weight);
-    letter-spacing: var(--sl-input-letter-spacing);
-    vertical-align: middle;
-    overflow: hidden;
-    transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
-    cursor: pointer;
-  }
-
-  .select__menu {
-    max-height: 50vh;
-    overflow: auto;
-  }
-
-  /* Standard selects */
-  .select--standard .select__control {
-    background-color: var(--sl-input-background-color);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
-    color: var(--sl-input-color);
-  }
-
-  .select--standard:not(.select--disabled) .select__control:hover {
-    background-color: var(--sl-input-background-color-hover);
-    border-color: var(--sl-input-border-color-hover);
-    color: var(--sl-input-color-hover);
-  }
-
-  .select--standard.select--focused:not(.select--disabled) .select__control {
-    background-color: var(--sl-input-background-color-focus);
-    border-color: var(--sl-input-border-color-focus);
-    box-shadow: var(--sl-focus-ring);
-    outline: none;
-    color: var(--sl-input-color-focus);
-  }
-
-  .select--standard.select--disabled .select__control {
-    background-color: var(--sl-input-background-color-disabled);
-    border-color: var(--sl-input-border-color-disabled);
-    color: var(--sl-input-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  /* Filled selects */
-  .select--filled .select__control {
-    border: none;
-    background-color: var(--sl-input-filled-background-color);
-    color: var(--sl-input-color);
-  }
-
-  .select--filled:hover:not(.select--disabled) .select__control {
-    background-color: var(--sl-input-filled-background-color-hover);
-  }
-
-  .select--filled.select--focused:not(.select--disabled) .select__control {
-    outline: none;
-    background-color: var(--sl-input-filled-background-color-focus);
-    box-shadow: var(--sl-focus-ring);
-  }
-
-  .select--filled.select--disabled .select__control {
-    background-color: var(--sl-input-filled-background-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .select--disabled .select__tags,
-  .select--disabled .select__clear {
-    pointer-events: none;
-  }
-
-  .select__prefix {
-    display: inline-flex;
-    align-items: center;
-    color: var(--sl-input-placeholder-color);
-  }
-
-  .select__label {
-    flex: 1 1 auto;
-    display: flex;
-    align-items: center;
-    user-select: none;
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
-
-    /* Hide scrollbar in Firefox */
-    scrollbar-width: none;
-  }
-
-  /* Hide scrollbar in Chrome/Safari */
-  .select__label::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .select__clear {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    width: 1.25em;
-    font-size: inherit;
-    color: var(--sl-input-icon-color);
-    border: none;
-    background: none;
-    padding: 0;
-    transition: var(--sl-transition-fast) color;
-    cursor: pointer;
-  }
-
-  .select__clear:hover {
-    color: var(--sl-input-icon-color-hover);
-  }
-
-  .select__suffix {
-    display: inline-flex;
-    align-items: center;
-    color: var(--sl-input-placeholder-color);
-  }
-
-  .select__icon {
-    flex: 0 0 auto;
-    display: inline-flex;
-    transition: var(--sl-transition-medium) transform ease;
-  }
-
-  .select--open .select__icon {
-    transform: rotate(-180deg);
-  }
-
-  /* Placeholder */
-  .select--placeholder-visible .select__label {
-    color: var(--sl-input-placeholder-color);
-  }
-
-  .select--disabled.select--placeholder-visible .select__label {
-    color: var(--sl-input-placeholder-color-disabled);
-  }
-
-  /* Tags */
-  .select__tags {
-    display: inline-flex;
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: left;
-    margin-left: var(--sl-spacing-2x-small);
-  }
-
-  /* Hidden input (for form control validation to show) */
-  .select__hidden-select {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  /* Small */
-  .select--small .select__control {
-    border-radius: var(--sl-input-border-radius-small);
-    font-size: var(--sl-input-font-size-small);
-    min-height: var(--sl-input-height-small);
-  }
-
-  .select--small .select__prefix ::slotted(*) {
-    margin-left: var(--sl-input-spacing-small);
-  }
-
-  .select--small .select__label {
-    margin: 0 var(--sl-input-spacing-small);
-  }
-
-  .select--small .select__clear {
-    margin-right: var(--sl-input-spacing-small);
-  }
-
-  .select--small .select__suffix ::slotted(*) {
-    margin-right: var(--sl-input-spacing-small);
-  }
-
-  .select--small .select__icon {
-    margin-right: var(--sl-input-spacing-small);
-  }
-
-  .select--small .select__tags {
-    padding-bottom: 2px;
-  }
-
-  .select--small .select__tags sl-tag {
-    padding-top: 2px;
-  }
-
-  .select--small .select__tags sl-tag:not(:last-of-type) {
-    margin-right: var(--sl-spacing-2x-small);
-  }
-
-  .select--small.select--has-tags .select__label {
-    margin-left: 0;
-  }
-
-  /* Medium */
-  .select--medium .select__control {
-    border-radius: var(--sl-input-border-radius-medium);
-    font-size: var(--sl-input-font-size-medium);
-    min-height: var(--sl-input-height-medium);
-  }
-
-  .select--medium .select__prefix ::slotted(*) {
-    margin-left: var(--sl-input-spacing-medium);
-  }
-
-  .select--medium .select__label {
-    margin: 0 var(--sl-input-spacing-medium);
-  }
-
-  .select--medium .select__clear {
-    margin-right: var(--sl-input-spacing-medium);
-  }
-
-  .select--medium .select__suffix ::slotted(*) {
-    margin-right: var(--sl-input-spacing-medium);
-  }
-
-  .select--medium .select__icon {
-    margin-right: var(--sl-input-spacing-medium);
-  }
-
-  .select--medium .select__tags {
-    padding-bottom: 3px;
-  }
-
-  .select--medium .select__tags sl-tag {
-    padding-top: 3px;
-  }
-
-  .select--medium .select__tags sl-tag:not(:last-of-type) {
-    margin-right: var(--sl-spacing-2x-small);
-  }
-
-  .select--medium.select--has-tags .select__label {
-    margin-left: 0;
-  }
-
-  /* Large */
-  .select--large .select__control {
-    border-radius: var(--sl-input-border-radius-large);
-    font-size: var(--sl-input-font-size-large);
-    min-height: var(--sl-input-height-large);
-  }
-
-  .select--large .select__prefix ::slotted(*) {
-    margin-left: var(--sl-input-spacing-large);
-  }
-
-  .select--large .select__label {
-    margin: 0 var(--sl-input-spacing-large);
-  }
-
-  .select--large .select__clear {
-    margin-right: var(--sl-input-spacing-large);
-  }
-
-  .select--large .select__suffix ::slotted(*) {
-    margin-right: var(--sl-input-spacing-large);
-  }
-
-  .select--large .select__icon {
-    margin-right: var(--sl-input-spacing-large);
-  }
-
-  .select--large .select__tags {
-    padding-bottom: 4px;
-  }
-  .select--large .select__tags sl-tag {
-    padding-top: 4px;
-  }
-
-  .select--large .select__tags sl-tag:not(:last-of-type) {
-    margin-right: var(--sl-spacing-2x-small);
-  }
-
-  .select--large.select--has-tags .select__label {
-    margin-left: 0;
-  }
-
-  /*
-   * Pill modifier
-   */
-  .select--pill.select--small .select__control {
-    border-radius: var(--sl-input-height-small);
-  }
-
-  .select--pill.select--medium .select__control {
-    border-radius: var(--sl-input-height-medium);
-  }
-
-  .select--pill.select--large .select__control {
-    border-radius: var(--sl-input-height-large);
-  }
-`;

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

@@ -1,56 +0,0 @@
-import { expect, fixture, html, waitUntil, aTimeout } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlSelect from './select';
-
-describe('<sl-select>', () => {
-  it('should emit sl-change when the value changes', async () => {
-    const el = await fixture<SlSelect>(html`
-      <sl-select>
-        <sl-menu-item value="option-1">Option 1</sl-menu-item>
-        <sl-menu-item value="option-2">Option 2</sl-menu-item>
-        <sl-menu-item value="option-3">Option 3</sl-menu-item>
-      </sl-select>
-    `);
-    const changeHandler = sinon.spy();
-
-    el.addEventListener('sl-change', changeHandler);
-    el.value = 'option-2';
-    await waitUntil(() => changeHandler.calledOnce);
-
-    expect(changeHandler).to.have.been.calledOnce;
-  });
-
-  it('should open the menu when any letter key is pressed with sl-select is on focus', async () => {
-    const el = (await fixture(html`
-      <sl-select>
-        <sl-menu-item value="option-1">Option 1</sl-menu-item>
-        <sl-menu-item value="option-2">Option 2</sl-menu-item>
-        <sl-menu-item value="option-3">Option 3</sl-menu-item>
-      </sl-select>
-    `)) as SlSelect;
-    const control = el.shadowRoot.querySelector('.select__control') as HTMLSelectElement;
-    control.focus();
-    const rKeyEvent = new KeyboardEvent('keydown', { key: 'r' });
-    control.dispatchEvent(rKeyEvent);
-    await aTimeout(100);
-    expect(control.getAttribute('aria-expanded')).to.equal('true');
-  });
-
-  it('should not open the menu when ctrl + R is pressed with sl-select is on focus', async () => {
-    const el = (await fixture(html`
-      <sl-select>
-        <sl-menu-item value="option-1">Option 1</sl-menu-item>
-        <sl-menu-item value="option-2">Option 2</sl-menu-item>
-        <sl-menu-item value="option-3">Option 3</sl-menu-item>
-      </sl-select>
-    `)) as SlSelect;
-    const control = el.shadowRoot.querySelector('.select__control') as HTMLSelectElement;
-    control.focus();
-    const rKeyEvent = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true });
-    control.dispatchEvent(rKeyEvent);
-    await aTimeout(100);
-    expect(control.getAttribute('aria-expanded')).to.equal('false');
-  });
-});