shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,187 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { emit } from '../../internal/event';
+import { watch } from '../../internal/watch';
+import { FormSubmitController } from '../../internal/form-control';
+import styles from './switch.styles';
+
+let id = 0;
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - The switch's label.
+ *
+ * @event sl-blur - Emitted when the control loses focus.
+ * @event sl-change - Emitted when the control's checked state changes.
+ * @event sl-focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The switch control.
+ * @csspart thumb - The switch position indicator.
+ * @csspart label - The switch label.
+ *
+ * @cssproperty --width - The width of the switch.
+ * @cssproperty --height - The height of the switch.
+ * @cssproperty --thumb-size - The size of the thumb.
+ */
+@customElement('sl-switch')
+export default class SlSwitch extends LitElement {
+  static styles = styles;
+
+  @query('input[type="checkbox"]') input: HTMLInputElement;
+
+  // @ts-ignore
+  private formSubmitController = new FormSubmitController(this, {
+    value: (control: SlSwitch) => (control.checked ? control.value : undefined)
+  });
+  private switchId = `switch-${++id}`;
+  private labelId = `switch-label-${id}`;
+
+  @state() private hasFocus = false;
+
+  /** The switch's name attribute. */
+  @property() name: string;
+
+  /** The switch's value attribute. */
+  @property() value: string;
+
+  /** Disables the switch. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Makes the switch a required field. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /** Draws the switch in a checked state. */
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+  @property({ type: Boolean, reflect: true }) invalid = false;
+
+  firstUpdated() {
+    this.invalid = !this.input.checkValidity();
+  }
+
+  /** Simulates a click on the switch. */
+  click() {
+    this.input.click();
+  }
+
+  /** Sets focus on the switch. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Removes focus from the switch. */
+  blur() {
+    this.input.blur();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  setCustomValidity(message: string) {
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+
+  handleBlur() {
+    this.hasFocus = false;
+    emit(this, 'sl-blur');
+  }
+
+  @watch('checked')
+  handleCheckedChange() {
+    if (this.input) {
+      this.input.checked = this.checked;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
+  handleClick() {
+    this.checked = !this.checked;
+    emit(this, 'sl-change');
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
+  handleFocus() {
+    this.hasFocus = true;
+    emit(this, 'sl-focus');
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.checked = false;
+      emit(this, 'sl-change');
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.checked = true;
+      emit(this, 'sl-change');
+    }
+  }
+
+  render() {
+    return html`
+      <label
+        part="base"
+        for=${this.switchId}
+        class=${classMap({
+          switch: true,
+          'switch--checked': this.checked,
+          'switch--disabled': this.disabled,
+          'switch--focused': this.hasFocus
+        })}
+      >
+        <input
+          id=${this.switchId}
+          class="switch__input"
+          type="checkbox"
+          name=${ifDefined(this.name)}
+          value=${ifDefined(this.value)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          role="switch"
+          aria-checked=${this.checked ? 'true' : 'false'}
+          aria-labelledby=${this.labelId}
+          @click=${this.handleClick}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @keydown=${this.handleKeyDown}
+        />
+
+        <span part="control" class="switch__control">
+          <span part="thumb" class="switch__thumb"></span>
+        </span>
+
+        <span part="label" id=${this.labelId} class="switch__label">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-switch': SlSwitch;
+  }
+}

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

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-semibold);
+    border-radius: var(--sl-border-radius-medium);
+    color: var(--sl-color-neutral-600);
+    padding: var(--sl-spacing-medium) var(--sl-spacing-large);
+    white-space: nowrap;
+    user-select: none;
+    cursor: pointer;
+    transition: var(--transition-speed) box-shadow, var(--transition-speed) color;
+  }
+
+  .tab:hover:not(.tab--disabled) {
+    color: var(--sl-color-primary-600);
+  }
+
+  .tab:focus {
+    outline: none;
+  }
+
+  .tab${focusVisibleSelector}:not(.tab--disabled) {
+    color: var(--sl-color-primary-600);
+    box-shadow: inset var(--sl-focus-ring);
+  }
+
+  .tab.tab--active:not(.tab--disabled) {
+    color: var(--sl-color-primary-600);
+  }
+
+  .tab.tab--closable {
+    padding-right: var(--sl-spacing-small);
+  }
+
+  .tab.tab--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tab__close-button {
+    font-size: var(--sl-font-size-large);
+    margin-left: var(--sl-spacing-2x-small);
+  }
+
+  .tab__close-button::part(base) {
+    padding: var(--sl-spacing-3x-small);
+  }
+`;

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

@@ -0,0 +1,104 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { emit } from '../../internal/event';
+import { LocalizeController } from '../../utilities/localize';
+import styles from './tab.styles';
+
+import '../icon-button/icon-button';
+
+let id = 0;
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @dependency sl-icon-button
+ *
+ * @slot - The tab's label.
+ *
+ * @event sl-close - Emitted when the tab is closable and the close button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart close-button - The close button, which is the icon button's base wrapper.
+ */
+@customElement('sl-tab')
+export default class SlTab extends LitElement {
+  static styles = styles;
+  private localize = new LocalizeController(this);
+
+  @query('.tab') tab: HTMLElement;
+
+  private componentId = `sl-tab-${++id}`;
+
+  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
+  @property({ reflect: true }) panel = '';
+
+  /** Draws the tab in an active state. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  /** Makes the tab closable and shows a close icon. */
+  @property({ type: Boolean }) closable = false;
+
+  /** Draws the tab in a disabled state. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** The locale to render the component in. */
+  @property() lang: string;
+
+  /** Sets focus to the tab. */
+  focus(options?: FocusOptions) {
+    this.tab.focus(options);
+  }
+
+  /** Removes focus from the tab. */
+  blur() {
+    this.tab.blur();
+  }
+
+  handleCloseClick() {
+    emit(this, 'sl-close');
+  }
+
+  render() {
+    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    this.id = this.id || this.componentId;
+
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          tab: true,
+          'tab--active': this.active,
+          'tab--closable': this.closable,
+          'tab--disabled': this.disabled
+        })}
+        role="tab"
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-selected=${this.active ? 'true' : 'false'}
+        tabindex=${this.disabled || !this.active ? '-1' : '0'}
+      >
+        <slot></slot>
+        ${this.closable
+          ? html`
+              <sl-icon-button
+                name="x"
+                library="system"
+                label=${this.localize.term('close')}
+                exportparts="base:close-button"
+                class="tab__close-button"
+                @click=${this.handleCloseClick}
+                tabindex="-1"
+              ></sl-icon-button>
+            `
+          : ''}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tab': SlTab;
+  }
+}

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

@@ -0,0 +1,209 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --track-color: var(--sl-color-neutral-200);
+    --indicator-color: var(--sl-color-primary-600);
+
+    display: block;
+  }
+
+  .tab-group {
+    display: flex;
+    border: solid 1px transparent;
+    border-radius: 0;
+  }
+
+  .tab-group .tab-group__tabs {
+    display: flex;
+    position: relative;
+  }
+
+  .tab-group .tab-group__indicator {
+    position: absolute;
+    left: 0;
+    transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
+  }
+
+  .tab-group--has-scroll-controls .tab-group__nav-container {
+    position: relative;
+    padding: 0 var(--sl-spacing-x-large);
+  }
+
+  .tab-group__scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--sl-spacing-x-large);
+  }
+
+  .tab-group__scroll-button--start {
+    left: 0;
+  }
+
+  .tab-group__scroll-button--end {
+    right: 0;
+  }
+
+  /*
+   * Top
+   */
+
+  .tab-group--top {
+    flex-direction: column;
+  }
+
+  .tab-group--top .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--top .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--top .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--top .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-bottom: solid 2px var(--track-color);
+  }
+
+  .tab-group--top .tab-group__indicator {
+    bottom: -2px;
+    border-bottom: solid 2px var(--indicator-color);
+  }
+
+  .tab-group--top .tab-group__body {
+    order: 2;
+  }
+
+  .tab-group--top ::slotted(sl-tab-panel) {
+    --padding: var(--sl-spacing-medium) 0;
+  }
+
+  /*
+   * Bottom
+   */
+
+  .tab-group--bottom {
+    flex-direction: column;
+  }
+
+  .tab-group--bottom .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--bottom .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--bottom .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-top: solid 2px var(--track-color);
+  }
+
+  .tab-group--bottom .tab-group__indicator {
+    top: calc(-1 * 2px);
+    border-top: solid 2px var(--indicator-color);
+  }
+
+  .tab-group--bottom .tab-group__body {
+    order: 1;
+  }
+
+  .tab-group--bottom ::slotted(sl-tab-panel) {
+    --padding: var(--sl-spacing-medium) 0;
+  }
+
+  /*
+   * Start
+   */
+
+  .tab-group--start {
+    flex-direction: row;
+  }
+
+  .tab-group--start .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--start .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-right: solid 2px var(--track-color);
+  }
+
+  .tab-group--start .tab-group__indicator {
+    right: calc(-1 * 2px);
+    border-right: solid 2px var(--indicator-color);
+  }
+
+  .tab-group--start .tab-group__body {
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  .tab-group--start ::slotted(sl-tab-panel) {
+    --padding: 0 var(--sl-spacing-medium);
+  }
+
+  /*
+   * End
+   */
+
+  .tab-group--end {
+    flex-direction: row;
+  }
+
+  .tab-group--end .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--end .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-left: solid 2px var(--track-color);
+  }
+
+  .tab-group--end .tab-group__indicator {
+    left: calc(-1 * 2px);
+    border-left: solid 2px var(--indicator-color);
+  }
+
+  .tab-group--end .tab-group__body {
+    flex: 1 1 auto;
+    order: 1;
+  }
+
+  .tab-group--end ::slotted(sl-tab-panel) {
+    --padding: 0 var(--sl-spacing-medium);
+  }
+`;