@sondor-technology/sondor-components 1.0.7 → 1.0.9

package/src/components/time-picker/time-picker.ts

@@ -0,0 +1,286 @@
+import {LitElement, html, css, PropertyValues} 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 {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-time-picker")
+export class StTimePicker extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) label = "";
+
+  // Visually hide the label for screen-reader only accessibility
+  @property({type: Boolean, attribute: "hide-label"}) hideLabel = false;
+
+  // Time string in HH:mm format (e.g., "14:30")
+  @property({type: String}) value = "";
+
+  @property({type: String}) min = "";
+  @property({type: String}) max = "";
+  @property({type: Number}) step?: number;
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+
+  @state() private _touched = false;
+
+  @query(".native-input") private _inputEl!: HTMLInputElement;
+
+  private _labelId = `time-label-${Math.random().toString(36).substring(2, 9)}`;
+  private _defaultValue = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        font-family: inherit;
+      }
+
+      label {
+        display: block;
+        font-size: var(--st-font-size-sm);
+        font-weight: 500;
+        color: var(--st-color-text-muted);
+        margin-bottom: var(--st-spacing-xs);
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      .input-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        box-sizing: border-box;
+        transition:
+          border-color 0.2s,
+          box-shadow 0.2s,
+          background-color 0.2s;
+      }
+
+      /* Focus within ring */
+      .input-wrapper:focus-within {
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 2px var(--st-color-primary-muted, rgba(59, 130, 246, 0.25));
+      }
+
+      .input-wrapper.is-invalid {
+        border-color: var(--st-color-danger, #dc2626);
+      }
+
+      .input-wrapper.is-disabled {
+        background: var(--st-color-surface-muted, #f1f5f9);
+        cursor: not-allowed;
+        opacity: 0.7;
+      }
+
+      .native-input {
+        width: 100%;
+        min-height: 42px;
+        padding: var(--st-spacing-xs) var(--st-spacing-md);
+        background: transparent;
+        border: none;
+        color: var(--st-color-text);
+        font-family: inherit;
+        font-size: var(--st-font-size-base);
+        outline: none;
+        cursor: inherit;
+        appearance: none;
+        -webkit-appearance: none;
+      }
+
+      /* Style the native clock icon generated by WebKit/Blink */
+      .native-input::-webkit-calendar-picker-indicator {
+        cursor: pointer;
+        opacity: 0.6;
+        transition: opacity 0.2s;
+        filter: var(--st-icon-filter, none); /* Allows inverting for dark mode */
+      }
+
+      .native-input::-webkit-calendar-picker-indicator:hover {
+        opacity: 1;
+      }
+
+      .native-input:disabled {
+        color: var(--st-color-text-muted);
+      }
+    `,
+  ];
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._defaultValue = this.value;
+
+    // Sync initial validity state based on native input
+    this._syncValidity();
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("required") ||
+      changedProperties.has("min") ||
+      changedProperties.has("max")
+    ) {
+      this._internals.setFormValue(this.value || null);
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    if (!this._inputEl) return;
+
+    this.invalid = false;
+
+    // 🚀 FIX: Safari/WebKit poorly supports min/max on time inputs.
+    // We enforce these constraints manually using strict lexicographical comparison.
+    if (this.required && !this.value) {
+      this._internals.setValidity({valueMissing: true}, "Please select a time.");
+      if (this._touched) this.invalid = true;
+      return;
+    }
+
+    if (this.value && this.min && this.value < this.min) {
+      this._internals.setValidity({rangeUnderflow: true}, `Time must be ${this.min} or later.`);
+      if (this._touched) this.invalid = true;
+      return;
+    }
+
+    if (this.value && this.max && this.value > this.max) {
+      this._internals.setValidity({rangeOverflow: true}, `Time must be ${this.max} or earlier.`);
+      if (this._touched) this.invalid = true;
+      return;
+    }
+
+    // Fallback to native validation for things like 'step' bounds
+    const isValid = this._inputEl.checkValidity();
+
+    if (isValid) {
+      this._internals.setValidity({});
+      this.invalid = false;
+    } else {
+      this._internals.setValidity(
+        this._inputEl.validity,
+        this._inputEl.validationMessage,
+        this._inputEl,
+      );
+      if (this._touched) {
+        this.invalid = true;
+      }
+    }
+  }
+
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+  public reportValidity() {
+    this._touched = true;
+    this._syncValidity();
+    return this._internals.reportValidity();
+  }
+
+  formResetCallback() {
+    this.value = this._defaultValue;
+    this._touched = false;
+    this.invalid = false;
+    this._syncValidity();
+  }
+
+  public override focus(options?: FocusOptions) {
+    this._inputEl?.focus(options);
+  }
+
+  private _handleInput(e: Event) {
+    this.value = (e.target as HTMLInputElement).value;
+    this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
+    this.dispatchEvent(
+      new CustomEvent("st-input", {
+        bubbles: true,
+        composed: true,
+        detail: {name: this.name, value: this.value},
+      }),
+    );
+  }
+
+  private _handleChange(e: Event) {
+    this._touched = true;
+    this.value = (e.target as HTMLInputElement).value;
+    this._syncValidity();
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+    this.dispatchEvent(
+      new CustomEvent("st-change", {
+        bubbles: true,
+        composed: true,
+        detail: {name: this.name, value: this.value},
+      }),
+    );
+  }
+
+  private _handleBlur() {
+    this._touched = true;
+    this._syncValidity();
+  }
+
+  render() {
+    return html`
+      ${this.label
+        ? html`<label id=${this._labelId} class=${classMap({"sr-only": this.hideLabel})}
+            >${this.label}</label
+          >`
+        : ""}
+
+      <div
+        class=${classMap({
+          "input-wrapper": true,
+          "is-disabled": this.disabled,
+          "is-invalid": this.invalid,
+        })}
+      >
+        <input
+          class="native-input"
+          type="time"
+          name=${ifDefined(this.name || undefined)}
+          .value=${this.value}
+          min=${ifDefined(this.min || undefined)}
+          max=${ifDefined(this.max || undefined)}
+          step=${ifDefined(this.step)}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+          @blur=${this._handleBlur}
+        />
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-time-picker": StTimePicker;
+  }
+}

package/src/components/toggle-group/toggle-button.ts

@@ -0,0 +1,103 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+
+@customElement("st-toggle-button")
+export class StToggleButton extends LitElement {
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
+  @property({ type: String }) value = "";
+  @property({ type: Boolean, reflect: true }) selected = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        flex: 1; /* Ensures all buttons in a group stretch evenly */
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--st-spacing-xs);
+        width: 100%;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        background-color: var(--st-color-surface);
+        color: var(--st-color-text);
+        border: none;
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        white-space: nowrap;
+      }
+
+      button:hover:not(:disabled) {
+        background-color: var(--st-color-surface-hover, #f8fafc);
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+        z-index: 1; /* Brings the focus ring above siblings */
+      }
+
+      /* Active/Selected State */
+      :host([selected]) button {
+        background-color: var(--st-color-primary-light, #eff6ff);
+        color: var(--st-color-primary-dark, #1d4ed8);
+        font-weight: var(--st-font-weight-semibold);
+      }
+
+      /* Disabled State */
+      :host([disabled]) {
+        pointer-events: none;
+      }
+
+      :host([disabled]) button {
+        opacity: 0.5;
+        background-color: var(--st-color-surface-muted, #f1f5f9);
+        color: var(--st-color-text-muted);
+      }
+
+      ::slotted(svg) {
+        width: 1.125rem;
+        height: 1.125rem;
+        fill: currentColor;
+      }
+    `
+  ];
+
+  private _handleClick() {
+    if (this.disabled) return;
+    
+    // Dispatch an internal event for the group orchestrator to catch
+    this.dispatchEvent(new CustomEvent("st-toggle-action", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        aria-pressed=${this.selected ? "true" : "false"}
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-toggle-button": StToggleButton;
+  }
+}

package/src/components/toggle-group/toggle-group.ts

@@ -0,0 +1,264 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, queryAssignedElements, state, query} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {classMap} from "lit/directives/class-map.js";
+import {resetStyles} from "../../styles/reset.js";
+import type {StToggleButton} from "./toggle-button.js";
+import "./toggle-button.js";
+
+@customElement("st-toggle-group")
+export class StToggleGroup extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+  private _resizeObserver!: ResizeObserver;
+
+  @query(".group-container") private _container!: HTMLElement;
+
+  @queryAssignedElements({selector: "st-toggle-button"})
+  private _buttons!: StToggleButton[];
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) value = "";
+  @property({type: Boolean}) multiple = false;
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({attribute: "aria-label"}) ariaLabel = "";
+
+  // 🚀 NEW: State properties for dynamic shadows
+  @state() private _canScrollLeft = false;
+  @state() private _canScrollRight = false;
+
+  private _defaultValue = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.addEventListener("st-toggle-action", this._handleToggle as EventListener);
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      .scroll-wrapper {
+        position: relative;
+        display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      /* 🚀 FIX: Widened to 40px, boosted z-index to 10, and darkened the opacity */
+      .scroll-wrapper::before,
+      .scroll-wrapper::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 40px;
+        pointer-events: none;
+        z-index: 10;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      
+      .scroll-wrapper::before {
+        left: 0;
+        background: linear-gradient(
+          to right,
+          var(--st-color-scroll-shadow, rgba(0, 0, 0, 0.15)) 0%,
+          transparent 100%
+        );
+        border-top-left-radius: var(--st-radius-md);
+        border-bottom-left-radius: var(--st-radius-md);
+      }
+
+      .scroll-wrapper::after {
+        right: 0;
+        background: linear-gradient(
+          to left,
+          var(--st-color-scroll-shadow, rgba(0, 0, 0, 0.15)) 0%,
+          transparent 100%
+        );
+        border-top-right-radius: var(--st-radius-md);
+        border-bottom-right-radius: var(--st-radius-md);
+      }
+
+      .scroll-wrapper.can-scroll-left::before {
+        opacity: 1;
+      }
+
+      .scroll-wrapper.can-scroll-right::after {
+        opacity: 1;
+      }
+
+      /* 🚀 FIX: Dialed up to 0.5 for dark mode */
+      :host([data-theme="dark"]) .scroll-wrapper::before {
+        background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
+      }
+      :host([data-theme="dark"]) .scroll-wrapper::after {
+        background: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
+      }
+
+      .group-container {
+        display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
+        background-color: var(--st-color-border);
+        gap: 1px;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+
+      .group-container::-webkit-scrollbar {
+        display: none;
+      }
+
+      ::slotted(*) {
+        flex-shrink: 0;
+      }
+
+      :host([disabled]) .group-container {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    `,
+  ];
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._defaultValue = this.value;
+
+    // 🚀 NEW: Observe the container. If the user rotates their phone,
+    // we need to recalculate if shadows are still needed.
+    this._resizeObserver = new ResizeObserver(() => this._checkScroll());
+    if (this._container) {
+      this._resizeObserver.observe(this._container);
+    }
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+    }
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("value")) {
+      this._internals.setFormValue(this.value || null);
+      this._syncButtons();
+      this._syncValidity();
+    }
+
+    if (changedProperties.has("disabled")) {
+      this._buttons.forEach((btn) => (btn.disabled = this.disabled));
+    }
+  }
+
+  // 🚀 NEW: Mathematically determine if we are at the edges of the scroll box
+  private _checkScroll = () => {
+    if (!this._container) return;
+    const {scrollLeft, scrollWidth, clientWidth} = this._container;
+
+    // Use a 1px buffer to prevent fractional pixel rounding errors on high-DPI screens
+    this._canScrollLeft = scrollLeft > 1;
+    this._canScrollRight = Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1;
+  };
+
+  private _syncButtons() {
+    const values = this.multiple && this.value ? this.value.split(",") : [this.value];
+    this._buttons.forEach((btn) => {
+      btn.selected = values.includes(btn.value);
+    });
+  }
+
+  private _handleSlotChange() {
+    this._syncButtons();
+    if (this.disabled) {
+      this._buttons.forEach((btn) => (btn.disabled = true));
+    }
+    // Calculate shadows after slots render
+    setTimeout(() => this._checkScroll(), 50);
+  }
+
+  private _handleToggle(e: CustomEvent<{value: string}>) {
+    e.stopPropagation();
+    const toggledValue = e.detail.value;
+
+    if (this.multiple) {
+      let values = this.value ? this.value.split(",") : [];
+      if (values.includes(toggledValue)) {
+        values = values.filter((v) => v !== toggledValue);
+      } else {
+        values.push(toggledValue);
+      }
+      this.value = values.join(",");
+    } else {
+      if (this.value !== toggledValue) {
+        this.value = toggledValue;
+      }
+    }
+
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  formResetCallback() {
+    this.value = this._defaultValue;
+  }
+
+  private _syncValidity() {
+    if (this.required && !this.value) {
+      this._internals.setValidity({valueMissing: true}, "Please select an option.");
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+  public reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  render() {
+    const wrapperClasses = classMap({
+      "scroll-wrapper": true,
+      "can-scroll-left": this._canScrollLeft,
+      "can-scroll-right": this._canScrollRight,
+    });
+
+    return html`
+      <div class=${wrapperClasses}>
+        <div
+          class="group-container"
+          role="group"
+          aria-label=${ifDefined(this.ariaLabel || undefined)}
+          aria-required=${this.required ? "true" : "false"}
+          @scroll=${this._checkScroll}
+        >
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-toggle-group": StToggleGroup;
+  }
+}