shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+  }
+
+  .radio-group {
+    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
+    border-radius: var(--sl-border-radius-medium);
+    padding: var(--sl-spacing-large);
+    padding-top: var(--sl-spacing-x-small);
+  }
+
+  .radio-group .radio-group__label {
+    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);
+    padding: 0 var(--sl-spacing-2x-small);
+  }
+
+  ::slotted(sl-radio:not(:last-of-type)) {
+    display: block;
+    margin-bottom: var(--sl-spacing-2x-small);
+  }
+
+  .radio-group:not(.radio-group--has-fieldset) {
+    border: none;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+  }
+
+  .radio-group:not(.radio-group--has-fieldset) .radio-group__label {
+    position: absolute;
+    width: 0;
+    height: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`;

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

@@ -0,0 +1,66 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import type SlRadio from '../radio/radio';
+import styles from './radio-group.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - The default slot where radio controls are placed.
+ * @slot label - The radio group label. Required for proper accessibility. Alternatively, you can use the label prop.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The radio group label.
+ */
+@customElement('sl-radio-group')
+export default class SlRadioGroup extends LitElement {
+  static styles = styles;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  /** The radio group label. Required for proper accessibility. Alternatively, you can use the label slot. */
+  @property() label = '';
+
+  /** Shows the fieldset and legend that surrounds the radio group. */
+  @property({ type: Boolean, attribute: 'fieldset' }) fieldset = false;
+
+  handleFocusIn() {
+    // When tabbing into the fieldset, make sure it lands on the checked radio
+    requestAnimationFrame(() => {
+      const checkedRadio = [...this.defaultSlot.assignedElements({ flatten: true })].find(
+        el => el.tagName.toLowerCase() === 'sl-radio' && (el as SlRadio).checked
+      ) as SlRadio;
+
+      if (checkedRadio) {
+        checkedRadio.focus();
+      }
+    });
+  }
+
+  render() {
+    return html`
+      <fieldset
+        part="base"
+        class=${classMap({
+          'radio-group': true,
+          'radio-group--has-fieldset': this.fieldset
+        })}
+        role="radiogroup"
+        @focusin=${this.handleFocusIn}
+      >
+        <legend part="label" class="radio-group__label">
+          <slot name="label">${this.label}</slot>
+        </legend>
+        <slot></slot>
+      </fieldset>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-radio-group': SlRadioGroup;
+  }
+}

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

@@ -0,0 +1,192 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import formControlStyles from '../../styles/form-control.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+  ${formControlStyles}
+
+  :host {
+    --thumb-size: 20px;
+    --tooltip-offset: 10px;
+    --track-color-active: var(--sl-color-neutral-200);
+    --track-color-inactive: var(--sl-color-neutral-200);
+    --track-height: 6px;
+
+    display: block;
+  }
+
+  .range {
+    position: relative;
+  }
+
+  .range__control {
+    -webkit-appearance: none;
+    border-radius: 3px;
+    width: 100%;
+    height: var(--track-height);
+    background: transparent;
+    line-height: var(--sl-input-height-medium);
+    vertical-align: middle;
+  }
+
+  /* Webkit */
+  .range__control::-webkit-slider-runnable-track {
+    width: 100%;
+    height: var(--track-height);
+    border-radius: 3px;
+    border: none;
+  }
+
+  .range__control::-webkit-slider-thumb {
+    border: none;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: 50%;
+    background-color: var(--sl-color-primary-600);
+    border: solid var(--sl-input-border-width) var(--sl-color-primary-600);
+    -webkit-appearance: none;
+    margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
+    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
+    cursor: pointer;
+  }
+
+  .range__control:enabled::-webkit-slider-thumb:hover {
+    background-color: var(--sl-color-primary-500);
+    border-color: var(--sl-color-primary-500);
+  }
+
+  .range__control:enabled${focusVisibleSelector}::-webkit-slider-thumb {
+    background-color: var(--sl-color-primary-500);
+    border-color: var(--sl-color-primary-500);
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  .range__control:enabled::-webkit-slider-thumb:active {
+    background-color: var(--sl-color-primary-500);
+    border-color: var(--sl-color-primary-500);
+    cursor: grabbing;
+  }
+
+  /* Firefox */
+  .range__control::-moz-focus-outer {
+    border: 0;
+  }
+
+  .range__control::-moz-range-progress {
+    background-color: var(--track-color-active);
+    border-radius: 3px;
+    height: var(--track-height);
+  }
+
+  .range__control::-moz-range-track {
+    width: 100%;
+    height: var(--track-height);
+    background-color: var(--track-color-inactive);
+    border-radius: 3px;
+    border: none;
+  }
+
+  .range__control::-moz-range-thumb {
+    border: none;
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    border-radius: 50%;
+    background-color: var(--sl-color-primary-600);
+    border-color: var(--sl-color-primary-600);
+    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
+    cursor: pointer;
+  }
+
+  .range__control:enabled::-moz-range-thumb:hover {
+    background-color: var(--sl-color-primary-500);
+    border-color: var(--sl-color-primary-500);
+  }
+
+  .range__control:enabled${focusVisibleSelector}::-moz-range-thumb {
+    background-color: var(--sl-color-primary-500);
+    border-color: var(--sl-color-primary-500);
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  .range__control:enabled::-moz-range-thumb:active {
+    background-color: var(--sl-color-primary-500);
+    border-color: var(--sl-color-primary-500);
+    cursor: grabbing;
+  }
+
+  /* States */
+  .range__control${focusVisibleSelector} {
+    outline: none;
+  }
+
+  .range__control:disabled {
+    opacity: 0.5;
+  }
+
+  .range__control:disabled::-webkit-slider-thumb {
+    cursor: not-allowed;
+  }
+
+  .range__control:disabled::-moz-range-thumb {
+    cursor: not-allowed;
+  }
+
+  /* Tooltip output */
+  .range__tooltip {
+    position: absolute;
+    z-index: var(--sl-z-index-tooltip);
+    left: 1px;
+    border-radius: var(--sl-tooltip-border-radius);
+    background-color: var(--sl-tooltip-background-color);
+    font-family: var(--sl-tooltip-font-family);
+    font-size: var(--sl-tooltip-font-size);
+    font-weight: var(--sl-tooltip-font-weight);
+    line-height: var(--sl-tooltip-line-height);
+    color: var(--sl-tooltip-color);
+    opacity: 0;
+    padding: var(--sl-tooltip-padding);
+    transition: var(--sl-transition-fast) opacity;
+    pointer-events: none;
+  }
+
+  .range__tooltip:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 50%;
+    margin-left: calc(-1 * var(--sl-tooltip-arrow-size));
+  }
+
+  .range--tooltip-visible .range__tooltip {
+    opacity: 1;
+  }
+
+  /* Tooltip on top */
+  .range--tooltip-top .range__tooltip {
+    top: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
+  }
+
+  .range--tooltip-top .range__tooltip:after {
+    border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
+    border-left: var(--sl-tooltip-arrow-size) solid transparent;
+    border-right: var(--sl-tooltip-arrow-size) solid transparent;
+    top: 100%;
+  }
+
+  /* Tooltip on bottom */
+  .range--tooltip-bottom .range__tooltip {
+    bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
+  }
+
+  .range--tooltip-bottom .range__tooltip:after {
+    border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
+    border-left: var(--sl-tooltip-arrow-size) solid transparent;
+    border-right: var(--sl-tooltip-arrow-size) solid transparent;
+    bottom: 100%;
+  }
+`;

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

@@ -0,0 +1,273 @@
+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 { emit } from '../../internal/event';
+import { live } from 'lit/directives/live.js';
+import { watch } from '../../internal/watch';
+import { getLabelledBy, renderFormControl } from '../../internal/form-control';
+import { FormSubmitController } from '../../internal/form-control';
+import { HasSlotController } from '../../internal/slot';
+import styles from './range.styles';
+
+let id = 0;
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot label - The input's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
+ *
+ * @event sl-change - Emitted when the control's value changes.
+ * @event sl-blur - Emitted when the control loses focus.
+ * @event sl-focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart input - The native range input.
+ * @csspart tooltip - The range tooltip.
+ *
+ * @cssproperty --thumb-size - The size of the thumb.
+ * @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the track.
+ * @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
+ * @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
+ * @cssproperty --track-height - The height of the track.
+ */
+@customElement('sl-range')
+export default class SlRange extends LitElement {
+  static styles = styles;
+
+  @query('.range__control') input: HTMLInputElement;
+  @query('.range__tooltip') output: HTMLOutputElement;
+
+  // @ts-ignore
+  private formSubmitController = new FormSubmitController(this);
+  private hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private inputId = `input-${++id}`;
+  private helpTextId = `input-help-text-${id}`;
+  private labelId = `input-label-${id}`;
+  private resizeObserver: ResizeObserver;
+
+  @state() private hasFocus = false;
+  @state() private hasTooltip = false;
+
+  /** The input's name attribute. */
+  @property() name = '';
+
+  /** The input's value attribute. */
+  @property({ type: Number }) value = 0;
+
+  /** The range's label. Alternatively, you can use the label slot. */
+  @property() label = '';
+
+  /** The range's help text. Alternatively, you can use the help-text slot. */
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  /** Disables the input. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
+   * provided by the `setCustomValidity` method.
+   */
+  @property({ type: Boolean, reflect: true }) invalid = false;
+
+  /** The input's min attribute. */
+  @property({ type: Number }) min = 0;
+
+  /** The input's max attribute. */
+  @property({ type: Number }) max = 100;
+
+  /** The input's step attribute. */
+  @property({ type: Number }) step = 1;
+
+  /** The preferred placement of the tooltip. */
+  @property() tooltip: 'top' | 'bottom' | 'none' = 'top';
+
+  /** A function used to format the tooltip's value. */
+  @property({ attribute: false }) tooltipFormatter: (value: number) => string = (value: number) => value.toString();
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => this.syncRange());
+
+    if (this.value === undefined || this.value === null) this.value = this.min;
+    if (this.value < this.min) this.value = this.min;
+    if (this.value > this.max) this.value = this.max;
+
+    this.updateComplete.then(() => {
+      this.syncRange();
+      this.resizeObserver.observe(this.input);
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this.input);
+  }
+
+  /** Sets focus on the input. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Removes focus from the input. */
+  blur() {
+    this.input.blur();
+  }
+
+  /** 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();
+  }
+
+  handleInput() {
+    this.value = Number(this.input.value);
+    emit(this, 'sl-change');
+
+    this.syncRange();
+  }
+
+  handleBlur() {
+    this.hasFocus = false;
+    this.hasTooltip = false;
+    emit(this, 'sl-blur');
+  }
+
+  @watch('value', { waitUntilFirstUpdate: true })
+  handleValueChange() {
+    this.value = Number(this.value);
+
+    if (this.input) {
+      this.invalid = !this.input.checkValidity();
+    }
+
+    this.syncRange();
+  }
+
+  @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;
+    this.hasTooltip = true;
+    emit(this, 'sl-focus');
+  }
+
+  handleThumbDragStart() {
+    this.hasTooltip = true;
+  }
+
+  handleThumbDragEnd() {
+    this.hasTooltip = false;
+  }
+
+  syncRange() {
+    const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
+
+    this.syncProgress(percent);
+
+    if (this.tooltip !== 'none') {
+      this.syncTooltip(percent);
+    }
+  }
+
+  syncProgress(percent: number) {
+    this.input.style.background = `linear-gradient(to right, var(--track-color-active) 0%, var(--track-color-active) ${
+      percent * 100
+    }%, var(--track-color-inactive) ${percent * 100}%, var(--track-color-inactive) 100%)`;
+  }
+
+  syncTooltip(percent: number) {
+    if (this.output) {
+      const inputWidth = this.input.offsetWidth;
+      const tooltipWidth = this.output.offsetWidth;
+      const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
+      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
+
+      this.output.style.transform = `translateX(${x})`;
+      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
+    }
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+
+    // NOTE - always bind value after min/max, otherwise it will be clamped
+    return renderFormControl(
+      {
+        inputId: this.inputId,
+        label: this.label,
+        labelId: this.labelId,
+        hasLabelSlot,
+        helpTextId: this.helpTextId,
+        helpText: this.helpText,
+        hasHelpTextSlot,
+        size: 'medium'
+      },
+      html`
+        <div
+          part="base"
+          class=${classMap({
+            range: true,
+            'range--disabled': this.disabled,
+            'range--focused': this.hasFocus,
+            'range--tooltip-visible': this.hasTooltip,
+            'range--tooltip-top': this.tooltip === 'top',
+            'range--tooltip-bottom': this.tooltip === 'bottom'
+          })}
+          @mousedown=${this.handleThumbDragStart}
+          @mouseup=${this.handleThumbDragEnd}
+          @touchstart=${this.handleThumbDragStart}
+          @touchend=${this.handleThumbDragEnd}
+        >
+          <input
+            part="input"
+            type="range"
+            class="range__control"
+            name=${ifDefined(this.name)}
+            ?disabled=${this.disabled}
+            min=${ifDefined(this.min)}
+            max=${ifDefined(this.max)}
+            step=${ifDefined(this.step)}
+            .value=${live(String(this.value))}
+            aria-labelledby=${ifDefined(
+              getLabelledBy({
+                label: this.label,
+                labelId: this.labelId,
+                hasLabelSlot,
+                helpText: this.helpText,
+                helpTextId: this.helpTextId,
+                hasHelpTextSlot
+              })
+            )}
+            @input=${this.handleInput}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+          />
+          ${this.tooltip !== 'none' && !this.disabled
+            ? html`
+                <output part="tooltip" class="range__tooltip">
+                  ${typeof this.tooltipFormatter === 'function' ? this.tooltipFormatter(this.value) : this.value}
+                </output>
+              `
+            : ''}
+        </div>
+      `
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-range': SlRange;
+  }
+}

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

@@ -0,0 +1,79 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --symbol-color: var(--sl-color-neutral-300);
+    --symbol-color-active: var(--sl-color-amber-500);
+    --symbol-size: 1.2rem;
+    --symbol-spacing: var(--sl-spacing-3x-small);
+
+    display: inline-flex;
+  }
+
+  .rating {
+    position: relative;
+    display: inline-flex;
+    border-radius: var(--sl-border-radius-medium);
+    vertical-align: middle;
+  }
+
+  .rating:focus {
+    outline: none;
+  }
+
+  .rating${focusVisibleSelector} {
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  .rating__symbols {
+    display: inline-flex;
+    position: relative;
+    font-size: var(--symbol-size);
+    line-height: 0;
+    color: var(--symbol-color);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .rating__symbols > * {
+    padding: var(--symbol-spacing);
+  }
+
+  .rating__symbols--indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: var(--symbol-color-active);
+    pointer-events: none;
+  }
+
+  .rating__symbol {
+    transition: var(--sl-transition-fast) transform;
+  }
+
+  .rating__symbol--hover {
+    transform: scale(1.2);
+  }
+
+  .rating--disabled .rating__symbols,
+  .rating--readonly .rating__symbols {
+    cursor: default;
+  }
+
+  .rating--disabled .rating__symbol--hover,
+  .rating--readonly .rating__symbol--hover {
+    transform: none;
+  }
+
+  .rating--disabled {
+    opacity: 0.5;
+  }
+
+  .rating--disabled .rating__symbols {
+    cursor: not-allowed;
+  }
+`;