@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.15

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

@@ -12,10 +12,6 @@ export class StButtonGroup extends LitElement {
         align-items: center;
       }
 
-      .group {
-        display: inline-flex;
-      }
-
       /* 1. Flatten all corners by default */
       ::slotted(st-button) {
         --btn-radius-tl: 0px;
@@ -37,32 +33,32 @@ export class StButtonGroup extends LitElement {
         --btn-radius-br: var(--st-radius-md, 0.5rem);
       }
 
-      /* 4. Collapse borders by hiding the left border of adjacent default buttons */
-      ::slotted(st-button[color="default"]:not(:first-child)) {
+      /* 4. Collapse borders by pulling adjacent buttons left */
+      ::slotted(st-button:not(:first-child)) {
         margin-left: -1px;
       }
 
-      /* 5. Prevent Primary buttons from overlapping at all, use box-shadow for the divider */
-      ::slotted(st-button[color="primary"]:not(:first-child)) {
-        --btn-divider: inset 1px 0 0 0 rgba(255, 255, 255, 0.3);
-        margin-left: 0; /* Override any inherited negative margins */
-      }
-
-      /* 6. Pull active/hovered default buttons forward so their full border shows */
-      ::slotted(st-button[color="default"]:hover),
-      ::slotted(st-button[color="default"]:focus-within),
-      ::slotted(st-button[color="default"]:active) {
+      /* 5. Pull active/hovered buttons forward so their full border shows */
+      ::slotted(st-button:hover),
+      ::slotted(st-button:focus-within),
+      ::slotted(st-button:active),
+      ::slotted(st-button[active]) {
         z-index: 1;
       }
     `,
   ];
 
+  connectedCallback() {
+    super.connectedCallback();
+    // Automatically apply the semantic role to the host if the developer omits it.
+    // This allows them to just write: <st-button-group aria-label="Pagination">
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "group");
+    }
+  }
+
   render() {
-    return html`
-      <div class="group" role="group" aria-label="button group">
-        <slot></slot>
-      </div>
-    `;
+    return html`<slot></slot>`;
   }
 }
 
@@ -70,4 +66,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-button-group": StButtonGroup;
   }
-}
+}

package/src/components/calendar/calendar.ts

@@ -0,0 +1,444 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import "../select/select.js"; // Ensure this path matches your project structure
+
+const MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+const DAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+const parseIsoLocal = (iso: string): Date | null => {
+  if (!iso) return null;
+  const [y, m, d] = iso.split(/\D/).map(Number);
+  if (!y || !m || !d) return null;
+  return new Date(y, m - 1, d);
+};
+
+const formatIsoLocal = (date: Date): string => {
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+};
+
+@customElement("st-calendar")
+export class StCalendar extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) value = "";
+  @property({type: String}) min = "";
+  @property({type: String}) max = "";
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+
+  @state() private _viewMonth = new Date().getMonth();
+  @state() private _viewYear = new Date().getFullYear();
+
+  private _defaultValue = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+        width: 320px;
+        background-color: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        padding: var(--st-spacing-md);
+        box-sizing: border-box;
+      }
+
+      :host([disabled]) {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      :host([invalid]) {
+        border-color: var(--st-color-error, #dc2626);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--st-spacing-md);
+        gap: var(--st-spacing-xs);
+      }
+
+      .header-controls {
+        display: flex;
+        gap: var(--st-spacing-xs);
+        flex: 1;
+        justify-content: center;
+      }
+
+      /* Shape the custom selects to fit side-by-side in the header */
+      .header-controls st-select:first-child {
+        width: 120px;
+      }
+
+      .header-controls st-select:last-child {
+        width: 90px;
+      }
+
+      .nav-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 42px; /* Matches the 42px min-height of your st-select combobox */
+        border: none;
+        background: transparent;
+        border-radius: var(--st-radius-sm);
+        color: var(--st-color-text-muted);
+        cursor: pointer;
+        transition: background-color 0.2s;
+        flex-shrink: 0;
+      }
+
+      .nav-button:hover {
+        background-color: var(--st-color-surface-hover, #f1f5f9);
+        color: var(--st-color-text);
+      }
+
+      .nav-button svg {
+        width: 20px;
+        height: 20px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 4px;
+        text-align: center;
+      }
+
+      .grid-row {
+        display: contents;
+      }
+
+      .day-name {
+        font-size: var(--st-font-size-xs);
+        font-weight: var(--st-font-weight-semibold);
+        color: var(--st-color-text-muted);
+        padding-bottom: var(--st-spacing-xs);
+      }
+
+      .day {
+        aspect-ratio: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background: transparent;
+        border-radius: 50%;
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-sm);
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .day:hover:not(:disabled):not(.empty) {
+        background-color: var(--st-color-surface-hover, #f1f5f9);
+      }
+
+      .day:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+      }
+
+      .day:disabled {
+        color: var(--st-color-text-muted);
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+
+      .day.empty {
+        cursor: default;
+        pointer-events: none;
+      }
+
+      .day[aria-current="date"] {
+        font-weight: var(--st-font-weight-bold);
+        color: var(--st-color-primary);
+        background-color: var(--st-color-primary-light, #eff6ff);
+      }
+
+      .day[aria-selected="true"] {
+        background-color: var(--st-color-primary);
+        color: var(--st-color-on-primary, var(--st-color-bg, #ffffff));
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      .day[aria-selected="true"]:hover {
+        background-color: var(--st-color-primary-dark, #1d4ed8);
+      }
+    `,
+  ];
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._defaultValue = this.value;
+
+    if (this.value) {
+      const initDate = parseIsoLocal(this.value);
+      if (initDate) {
+        this._viewMonth = initDate.getMonth();
+        this._viewYear = initDate.getFullYear();
+      }
+    }
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("value")) {
+      this._internals.setFormValue(this.value || null);
+      this._syncValidity();
+    }
+  }
+
+  private get _yearRange(): number[] {
+    const currentYear = new Date().getFullYear();
+    let minYear = currentYear - 50;
+    let maxYear = currentYear + 50;
+
+    if (this.min) {
+      const minDate = parseIsoLocal(this.min);
+      if (minDate) minYear = minDate.getFullYear();
+    }
+    if (this.max) {
+      const maxDate = parseIsoLocal(this.max);
+      if (maxDate) maxYear = maxDate.getFullYear();
+    }
+
+    const years = [];
+    for (let y = minYear; y <= maxYear; y++) {
+      years.push(y);
+    }
+    return years;
+  }
+
+  private _syncValidity() {
+    this.invalid = false;
+
+    if (this.required && !this.value) {
+      this._internals.setValidity({valueMissing: true}, "Please select a date.");
+      this.invalid = true;
+      return;
+    }
+
+    if (this.value) {
+      const minDate = parseIsoLocal(this.min);
+      const maxDate = parseIsoLocal(this.max);
+      const valDate = parseIsoLocal(this.value);
+
+      if (valDate && minDate && valDate < minDate) {
+        this._internals.setValidity({rangeUnderflow: true}, `Date must be after ${this.min}.`);
+        this.invalid = true;
+        return;
+      }
+      if (valDate && maxDate && valDate > maxDate) {
+        this._internals.setValidity({rangeOverflow: true}, `Date must be before ${this.max}.`);
+        this.invalid = true;
+        return;
+      }
+    }
+
+    this._internals.setValidity({});
+  }
+
+  formResetCallback() {
+    this.value = this._defaultValue;
+    if (this.value) {
+      const initDate = parseIsoLocal(this.value);
+      if (initDate) {
+        this._viewMonth = initDate.getMonth();
+        this._viewYear = initDate.getFullYear();
+      }
+    }
+  }
+
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+  public reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  private _prevMonth() {
+    if (this._viewMonth === 0) {
+      this._viewMonth = 11;
+      this._viewYear--;
+    } else {
+      this._viewMonth--;
+    }
+  }
+
+  private _nextMonth() {
+    if (this._viewMonth === 11) {
+      this._viewMonth = 0;
+      this._viewYear++;
+    } else {
+      this._viewMonth++;
+    }
+  }
+
+  private _selectDate(day: number) {
+    const selected = new Date(this._viewYear, this._viewMonth, day);
+    this.value = formatIsoLocal(selected);
+
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+    this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
+  }
+
+  private _isDateDisabled(year: number, month: number, day: number): boolean {
+    if (this.disabled) return true;
+
+    const date = new Date(year, month, day);
+    const minDate = parseIsoLocal(this.min);
+    const maxDate = parseIsoLocal(this.max);
+
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+
+    return false;
+  }
+
+  render() {
+    const today = new Date();
+    const isToday = (day: number) =>
+      today.getDate() === day &&
+      today.getMonth() === this._viewMonth &&
+      today.getFullYear() === this._viewYear;
+
+    const selectedDate = parseIsoLocal(this.value);
+    const isSelected = (day: number) =>
+      selectedDate !== null &&
+      selectedDate.getDate() === day &&
+      selectedDate.getMonth() === this._viewMonth &&
+      selectedDate.getFullYear() === this._viewYear;
+
+    const firstDayOfMonth = new Date(this._viewYear, this._viewMonth, 1).getDay();
+    const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();
+
+    const blanks = Array.from({length: firstDayOfMonth}, (_, i) => i);
+    const days = Array.from({length: daysInMonth}, (_, i) => i + 1);
+
+    const allCells = [
+      ...blanks.map(() => html`<div class="day empty" role="gridcell"></div>`),
+      ...days.map((day) => {
+        const disabled = this._isDateDisabled(this._viewYear, this._viewMonth, day);
+        return html`
+          <button
+            class="day"
+            role="gridcell"
+            type="button"
+            ?disabled=${disabled}
+            aria-label=${`${MONTH_NAMES[this._viewMonth]} ${day}, ${this._viewYear}`}
+            aria-current=${isToday(day) ? "date" : "false"}
+            aria-selected=${isSelected(day) ? "true" : "false"}
+            @click=${() => this._selectDate(day)}
+          >
+            ${day}
+          </button>
+        `;
+      }),
+    ];
+
+    const weeks = [];
+    for (let i = 0; i < allCells.length; i += 7) {
+      weeks.push(allCells.slice(i, i + 7));
+    }
+
+    // 🚀 FIX: Generate the option array objects as required by your st-select API
+    const monthOptions = MONTH_NAMES.map((name, i) => ({label: name, value: String(i)}));
+    const yearOptions = this._yearRange.map((year) => ({label: String(year), value: String(year)}));
+
+    return html`
+      <div class="header">
+        <button
+          class="nav-button"
+          type="button"
+          aria-label="Previous Month"
+          @click=${this._prevMonth}
+          ?disabled=${this.disabled}
+        >
+          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"></path></svg>
+        </button>
+
+        <div class="header-controls">
+          <st-select
+            label="Month"
+            hide-label
+            .options=${monthOptions}
+            .value=${String(this._viewMonth)}
+            ?disabled=${this.disabled}
+            @change=${(e: any) => (this._viewMonth = Number(e.target.value))}
+          ></st-select>
+
+          <st-select
+            label="Year"
+            hide-label
+            .options=${yearOptions}
+            .value=${String(this._viewYear)}
+            ?disabled=${this.disabled}
+            @change=${(e: any) => (this._viewYear = Number(e.target.value))}
+          ></st-select>
+        </div>
+
+        <button
+          class="nav-button"
+          type="button"
+          aria-label="Next Month"
+          @click=${this._nextMonth}
+          ?disabled=${this.disabled}
+        >
+          <svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"></path></svg>
+        </button>
+      </div>
+
+      <div class="grid" role="grid" aria-label="Calendar">
+        <div class="grid-row" role="row">
+          ${DAY_NAMES.map(
+            (name) => html`
+              <div class="day-name" role="columnheader" aria-label=${name}>${name}</div>
+            `,
+          )}
+        </div>
+        ${weeks.map((week) => html` <div class="grid-row" role="row">${week}</div> `)}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-calendar": StCalendar;
+  }
+}

package/src/components/checkbox/checkbox.constants.ts

@@ -0,0 +1,2 @@
+export const checkboxSizes = ["sm", "md", "lg"] as const;
+export type CheckboxSize = (typeof checkboxSizes)[number];

package/src/components/checkbox/checkbox.ts

@@ -1,6 +1,7 @@
 import {LitElement, html, css, PropertyValues} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
 import {resetStyles} from "../../styles/reset.js";
+import {CheckboxSize} from "./checkbox.constants.js";
 
 @customElement("st-checkbox")
 export class StCheckbox extends LitElement {
@@ -9,7 +10,7 @@ export class StCheckbox extends LitElement {
 
   @query("input") private _inputEl!: HTMLInputElement;
 
-  @property({type: String, reflect: true}) size: "sm" | "md" | "lg" = "md";
+  @property({type: String, reflect: true}) size: CheckboxSize = "md";
   @property({type: String, reflect: true}) name = "";
   @property({type: String}) value = "on";
 
@@ -27,11 +28,11 @@ export class StCheckbox extends LitElement {
     super();
     this._internals = this.attachInternals();
 
-    this.addEventListener('focusout', () => {
+    this.addEventListener("focusout", () => {
       this.invalid = !this.checkValidity();
     });
 
-    this.addEventListener('invalid', () => {
+    this.addEventListener("invalid", () => {
       this.invalid = !this.checkValidity();
     });
   }
@@ -150,7 +151,11 @@ export class StCheckbox extends LitElement {
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has("checked") || changedProperties.has("value") || changedProperties.has("errorMessage")) {
+    if (
+      changedProperties.has("checked") ||
+      changedProperties.has("value") ||
+      changedProperties.has("errorMessage")
+    ) {
       this._internals.setFormValue(this.checked ? this.value : null);
       this._syncValidity();
     }
@@ -164,12 +169,11 @@ export class StCheckbox extends LitElement {
     if (!this._inputEl) return;
 
     if (this.required && !this.checked) {
-      const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
-      this._internals.setValidity(
-        {valueMissing: true},
-        message,
-        this._inputEl,
-      );
+      const message =
+        this.errorMessage ||
+        this._inputEl.validationMessage ||
+        "Please check this box if you want to proceed.";
+      this._internals.setValidity({valueMissing: true}, message, this._inputEl);
     } else {
       this._internals.setValidity(
         this._inputEl.validity,
@@ -183,12 +187,11 @@ export class StCheckbox extends LitElement {
     if (!this._inputEl) return true;
 
     if (this.required && !this.checked) {
-      const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
-      this._internals.setValidity(
-        {valueMissing: true},
-        message,
-        this._inputEl,
-      );
+      const message =
+        this.errorMessage ||
+        this._inputEl.validationMessage ||
+        "Please check this box if you want to proceed.";
+      this._internals.setValidity({valueMissing: true}, message, this._inputEl);
       this.invalid = true;
       return false;
     }
@@ -206,6 +209,18 @@ export class StCheckbox extends LitElement {
     return isValid;
   }
 
+  public get validity(): ValidityState {
+    return this._internals.validity;
+  }
+
+  public get validationMessage(): string {
+    return this._internals.validationMessage;
+  }
+
+  public get willValidate(): boolean {
+    return this._internals.willValidate;
+  }
+
   formResetCallback() {
     this.checked = false;
     this.indeterminate = false;
@@ -224,7 +239,7 @@ export class StCheckbox extends LitElement {
     }
 
     this.checked = this._inputEl.checked;
-    
+
     if (this.checkValidity()) {
       this.invalid = false;
     }
@@ -263,4 +278,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-checkbox": StCheckbox;
   }
-}
+}