@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/src/components/list/list-item.ts

@@ -0,0 +1,225 @@
+import {LitElement, html, css, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {resetStyles} from "../../styles/reset.js";
+import "../icon/icon.js";
+import "../avatar/avatar.js";
+
+/**
+ * A row inside `st-list`. It becomes a link when `href` is set, a button when `interactive`
+ * is set, and plain content otherwise.
+ *
+ * Slots: `leading` (icon, avatar, image), default (replaces heading/description), `meta`
+ * (right aligned details) and `actions` (buttons that stay clickable independently).
+ *
+ * Events: `st-item-click` (detail: `{ value, href }`) for links and interactive rows.
+ */
+@customElement("st-list-item")
+export class StListItem extends LitElement {
+  @property({type: String}) heading = "";
+  @property({type: String}) description = "";
+  /** Short right-aligned detail such as a date or status. */
+  @property({type: String}) meta = "";
+  /** Leading icon name. */
+  @property({type: String}) icon = "";
+  /** Leading avatar; shows initials derived from this name. */
+  @property({type: String}) avatar = "";
+  @property({type: String}) href?: string;
+  @property({type: String}) target: "_blank" | "_self" = "_self";
+  /** Renders the row as a button that emits `st-item-click`. */
+  @property({type: Boolean, reflect: true}) interactive = false;
+  /** Marks the row as the current item. */
+  @property({type: Boolean, reflect: true}) selected = false;
+  @property({type: Boolean, reflect: true}) disabled = false;
+  /** Identifier echoed back in `st-item-click`. */
+  @property({type: String}) value = "";
+
+  @state() private _hasLeadingSlot = false;
+  @state() private _hasActionsSlot = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        border-bottom: 1px solid var(--st-list-divider, var(--st-color-border));
+        color: var(--st-color-text);
+      }
+
+      :host(:last-child) {
+        border-bottom: 0;
+      }
+
+      .main {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        align-items: center;
+        gap: var(--st-spacing-md);
+        padding: var(--st-list-item-padding-y, var(--st-spacing-md)) var(--st-spacing-md);
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        text-decoration: none;
+      }
+
+      a.main,
+      button.main {
+        cursor: pointer;
+      }
+
+      a.main:hover,
+      button.main:hover {
+        background-color: var(--st-color-surface-hover);
+      }
+
+      .main:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+      }
+
+      :host([selected]) .main {
+        background-color: var(--st-color-primary-bg);
+        box-shadow: inset 3px 0 0 var(--st-color-primary);
+      }
+
+      :host([disabled]) .main {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      .leading {
+        display: inline-flex;
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
+      }
+
+      .body {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .heading {
+        font-weight: var(--st-font-weight-medium);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .description {
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .meta {
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .actions {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        padding-right: var(--st-spacing-md);
+      }
+
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
+  }
+
+  private _onSlotChange(e: Event, name: "leading" | "actions") {
+    const has = (e.target as HTMLSlotElement).assignedNodes().length > 0;
+    if (name === "leading") this._hasLeadingSlot = has;
+    else this._hasActionsSlot = has;
+  }
+
+  private _emitClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("st-item-click", {
+        detail: {value: this.value, href: this.href},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _renderContent() {
+    return html`
+      <span class="leading" ?hidden=${!this._hasLeadingSlot && !this.avatar && !this.icon}>
+        <slot name="leading" @slotchange=${(e: Event) => this._onSlotChange(e, "leading")}>
+          ${this.avatar
+            ? html`<st-avatar name=${this.avatar} size="sm"></st-avatar>`
+            : this.icon
+              ? html`<st-icon name=${this.icon} aria-hidden="true"></st-icon>`
+              : nothing}
+        </slot>
+      </span>
+      <span class="body">
+        <slot>
+          <span class="heading">${this.heading}</span>
+          ${this.description
+            ? html`<span class="description">${this.description}</span>`
+            : nothing}
+        </slot>
+      </span>
+      <span class="meta"><slot name="meta">${this.meta}</slot></span>
+    `;
+  }
+
+  render() {
+    const current = this.selected ? "true" : undefined;
+    const main = this.href
+      ? html`<a
+          class="main"
+          href=${this.href}
+          target=${this.target}
+          rel=${ifDefined(this.target === "_blank" ? "noopener noreferrer" : undefined)}
+          aria-current=${ifDefined(current)}
+          aria-disabled=${ifDefined(this.disabled ? "true" : undefined)}
+          tabindex=${ifDefined(this.disabled ? "-1" : undefined)}
+          @click=${this._emitClick}
+          >${this._renderContent()}</a
+        >`
+      : this.interactive
+        ? html`<button
+            class="main"
+            type="button"
+            aria-current=${ifDefined(current)}
+            ?disabled=${this.disabled}
+            @click=${this._emitClick}
+          >
+            ${this._renderContent()}
+          </button>`
+        : html`<div class="main" aria-current=${ifDefined(current)}>${this._renderContent()}</div>`;
+
+    return html`${main}
+      <div class="actions" ?hidden=${!this._hasActionsSlot}>
+        <slot name="actions" @slotchange=${(e: Event) => this._onSlotChange(e, "actions")}></slot>
+      </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-list-item": StListItem;
+  }
+}

package/src/components/list/list.ts

@@ -0,0 +1,157 @@
+import {LitElement, html, css, nothing, isServer} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {resetStyles} from "../../styles/reset.js";
+import "./list-item.js";
+import "../skeleton/skeleton.js";
+
+export interface ListItemData {
+  heading: string;
+  description?: string;
+  meta?: string;
+  icon?: string;
+  avatar?: string;
+  href?: string;
+  value?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  /** Overrides `clickable-items` for this row. */
+  interactive?: boolean;
+  [key: string]: unknown;
+}
+
+const SKELETON_ITEMS = 3;
+
+/**
+ * Vertical listing of rows with a heading, description, meta and optional leading visual.
+ * Give it `items` for data-driven lists, or slot your own `st-list-item` elements.
+ *
+ * Events: `st-item-click` (detail: `{ item, index, value, href }`; `item` and `index` are
+ * only present for rows created from `items`).
+ */
+@customElement("st-list")
+export class StList extends LitElement {
+  @property({type: Array}) items: ListItemData[] = [];
+  /** Accessible name for the list. */
+  @property({type: String}) label = "";
+  @property({type: Boolean, reflect: true}) dense = false;
+  /** Draws an outer border with rounded corners. */
+  @property({type: Boolean, reflect: true}) bordered = false;
+  @property({type: Boolean, reflect: true, attribute: "no-dividers"}) noDividers = false;
+  /** Rows from `items` without an `href` become buttons that emit `st-item-click`. */
+  @property({type: Boolean, attribute: "clickable-items"}) clickableItems = false;
+  @property({type: Boolean, reflect: true}) loading = false;
+  @property({type: String, attribute: "empty-text"}) emptyText = "Nothing to show.";
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        --st-list-divider: var(--st-color-border);
+      }
+
+      :host([dense]) {
+        --st-list-item-padding-y: var(--st-spacing-xs);
+      }
+
+      :host([no-dividers]) {
+        --st-list-divider: transparent;
+      }
+
+      :host([bordered]) {
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background-color: var(--st-color-surface);
+        overflow: hidden;
+      }
+
+      .empty {
+        padding: var(--st-spacing-xl);
+        text-align: center;
+        font-style: italic;
+        color: var(--st-color-text-muted);
+      }
+
+      .skeleton-row {
+        padding: var(--st-spacing-md);
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) this.setAttribute("role", "list");
+  }
+
+  updated() {
+    if (this.label) this.setAttribute("aria-label", this.label);
+    else this.removeAttribute("aria-label");
+    this.setAttribute("aria-busy", this.loading ? "true" : "false");
+  }
+
+  private _onItemClick(e: CustomEvent<{value: string; href?: string}>, item: ListItemData, index: number) {
+    // Re-emit with the source data so consumers don't have to map values back to rows.
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("st-item-click", {
+        detail: {item, index, value: e.detail.value, href: e.detail.href},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _renderItems() {
+    if (this.loading) {
+      return Array.from(
+        {length: SKELETON_ITEMS},
+        () => html`
+          <div role="listitem" class="skeleton-row">
+            <st-skeleton variant="text" width="50%"></st-skeleton>
+            <st-skeleton variant="text" width="80%"></st-skeleton>
+          </div>
+        `,
+      );
+    }
+    return this.items.map(
+      (item, index) => html`
+        <st-list-item
+          heading=${item.heading}
+          description=${ifDefined(item.description)}
+          meta=${ifDefined(item.meta)}
+          icon=${ifDefined(item.icon)}
+          avatar=${ifDefined(item.avatar)}
+          href=${ifDefined(item.href)}
+          value=${item.value ?? String(index)}
+          ?selected=${item.selected}
+          ?disabled=${item.disabled}
+          ?interactive=${item.interactive ?? (this.clickableItems && !item.href)}
+          @st-item-click=${(e: CustomEvent) => this._onItemClick(e, item, index)}
+        ></st-list-item>
+      `,
+    );
+  }
+
+  render() {
+    const showEmpty = !this.loading && this.items.length === 0;
+    return html`
+      ${this._renderItems()}
+      <slot @slotchange=${() => this.requestUpdate()}></slot>
+      ${showEmpty && !this._hasSlotted()
+        ? html`<div class="empty" role="listitem">${this.emptyText}</div>`
+        : nothing}
+    `;
+  }
+
+  private _hasSlotted() {
+    if (isServer) return true; // slotted items cannot be inspected while server rendering
+    return this.querySelector("st-list-item") !== null;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-list": StList;
+  }
+}

package/src/components/logo-cloud/logo-cloud.ts

@@ -0,0 +1,65 @@
+import {html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+
+/**
+ * A row of logos (customers, partners, technologies). Slot images, inline svgs or links wrapping
+ * them; each is sized to the same height and softened until hovered.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the logos. Give every logo
+ * meaningful `alt` text.
+ */
+@customElement("st-logo-cloud")
+export class StLogoCloud extends StSection {
+  constructor() {
+    super();
+    this.space = "sm";
+  }
+
+  static styles = [
+    ...StSection.styles,
+    css`
+      .logos {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--st-spacing-xl) var(--st-spacing-2xl);
+      }
+
+      .logos ::slotted(*) {
+        width: auto;
+        max-width: 9rem;
+        height: var(--st-logo-cloud-height, 2.25rem);
+        object-fit: contain;
+        opacity: 0.7;
+        filter: grayscale(1);
+        transition:
+          opacity 0.2s ease,
+          filter 0.2s ease;
+      }
+
+      .logos ::slotted(*:hover),
+      .logos ::slotted(*:focus-visible) {
+        opacity: 1;
+        filter: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .logos ::slotted(*) {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(html`<div class="logos"><slot></slot></div>`);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-logo-cloud": StLogoCloud;
+  }
+}

package/src/components/modal/modal.ts

@@ -1,6 +1,10 @@
 import {LitElement, html, css, PropertyValues, nothing} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
 import {resetStyles} from "../../styles/reset.js";
+import {resetFormState} from "../form/form-reset.js";
+
+/** Longest we wait for the close animation before closing anyway. */
+const CLOSE_FALLBACK_MS = 400;
 
 @customElement("st-modal")
 export class StModal extends LitElement {
@@ -8,6 +12,12 @@ export class StModal extends LitElement {
   @property({type: String}) heading = "";
   @property({type: String}) size: "sm" | "md" | "lg" | "xl" | "xxl" = "md";
   @property({type: Boolean}) static = false;
+  /**
+   * By default closing the modal resets what is inside it: forms and fields go back to their
+   * starting values, errors clear and multi-step forms return to step one, so it opens fresh next
+   * time. Set this to keep what was entered between openings.
+   */
+  @property({type: Boolean, attribute: "preserve-state"}) preserveState = false;
 
   @query("dialog") private dialogEl!: HTMLDialogElement;
 
@@ -23,16 +33,14 @@ export class StModal extends LitElement {
       dialog {
         padding: 0;
         border: 1px solid var(--st-color-border);
-        border-radius: var(--st-radius-lg, 0.5rem);
+        border-radius: var(--st-radius-lg);
         background-color: var(--st-color-surface);
         color: var(--st-color-text);
 
         width: calc(100% - 2rem);
         margin: auto;
 
-        box-shadow:
-          0 20px 25px -5px rgb(0 0 0 / 0.1),
-          0 8px 10px -6px rgb(0 0 0 / 0.1);
+        box-shadow: var(--st-shadow-xl);
         font-family: var(--st-font-family, inherit);
       }
 
@@ -53,7 +61,7 @@ export class StModal extends LitElement {
       }
 
       dialog::backdrop {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: var(--st-color-overlay);
         backdrop-filter: blur(2px);
       }
 
@@ -139,12 +147,12 @@ export class StModal extends LitElement {
 
       .close-btn:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-muted, #f1f5f9);
+        background-color: var(--st-color-surface-muted);
       }
 
       .modal-body {
         padding: var(--st-spacing-lg);
-        font-size: var(--st-font-size-sm, 0.875rem);
+        font-size: var(--st-font-size-sm);
         line-height: 1.5;
       }
 
@@ -155,7 +163,7 @@ export class StModal extends LitElement {
         gap: var(--st-spacing-sm);
         padding: var(--st-spacing-md) var(--st-spacing-lg);
         border-top: 1px solid var(--st-color-border);
-        background-color: var(--st-color-surface-muted, #f8fafc);
+        background-color: var(--st-color-surface-muted);
       }
     `,
   ];
@@ -182,16 +190,34 @@ export class StModal extends LitElement {
     this.isClosing = true;
     this.dialogEl.classList.add("closing");
 
-    const onAnimationEnd = () => {
+    let finished = false;
+    const finish = () => {
+      if (finished) return;
+      finished = true;
+      window.clearTimeout(fallback);
       this.dialogEl.classList.remove("closing");
       this.isClosing = false;
       if (!this.open) {
         this.dialogEl.close();
+        // Reset once it has faded out, so nothing visibly changes as it closes.
+        if (!this.preserveState) this.reset();
       }
     };
 
-    // 🚀 FIX: Prevent listener stacking on rapid toggles
-    this.dialogEl.addEventListener("animationend", onAnimationEnd, {once: true});
+    // The animation ending finishes the close; the timer covers it never firing (reduced motion).
+    const fallback = window.setTimeout(finish, CLOSE_FALLBACK_MS);
+    this.dialogEl.addEventListener("animationend", finish, {once: true});
+  }
+
+  /**
+   * Returns the content to its starting state: forms and fields are reset, errors cleared and the
+   * body scrolled back to the top. Happens automatically on close unless `preserve-state` is set.
+   * Fires `st-reset` afterwards so your own state (in a framework, say) can be cleared too.
+   */
+  reset() {
+    resetFormState(this);
+    this.renderRoot.querySelector(".modal-body")?.scrollTo({top: 0});
+    this.dispatchEvent(new CustomEvent("st-reset", {bubbles: true, composed: true}));
   }
 
   private handleClose() {

package/src/components/page-layout/page-layout.ts

@@ -152,9 +152,9 @@ export class StPageLayout extends LitElement {
       :host {
         display: block;
         box-sizing: border-box;
-        --layout-bg-color: var(--st-color-bg, #ffffff);
-        --layout-surface-color: var(--st-color-surface, #f8fafc);
-        --layout-border-color: var(--st-color-border, #e2e8f0);
+        --layout-bg-color: var(--st-color-bg);
+        --layout-surface-color: var(--st-color-surface);
+        --layout-border-color: var(--st-color-border);
         --layout-sidebar-width: 16rem;
         --layout-right-sidebar-width: 16rem;
         --layout-main-max-width: none;
@@ -176,7 +176,7 @@ export class StPageLayout extends LitElement {
         justify-content: center;
         background: transparent;
         border: 1px solid var(--layout-border-color);
-        border-radius: var(--st-radius-sm, 0.375rem);
+        border-radius: var(--st-radius-sm);
         width: 2.25rem;
         height: 2.25rem;
         cursor: pointer;
@@ -210,7 +210,7 @@ export class StPageLayout extends LitElement {
         left: 0;
         width: 100vw;
         height: 100vh;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: var(--st-color-overlay);
         backdrop-filter: blur(2px);
         z-index: 1000;
         display: none;
@@ -255,12 +255,12 @@ export class StPageLayout extends LitElement {
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: var(--st-radius-sm, 0.375rem);
+        border-radius: var(--st-radius-sm);
       }
 
       .mobile-close-btn:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-muted, #f1f5f9);
+        background-color: var(--st-color-surface-muted);
       }
 
       .mobile-close-btn svg {
@@ -537,7 +537,7 @@ export class StPageLayout extends LitElement {
           height: 100vh;
           background: var(--layout-bg-color);
           z-index: 1001;
-          box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+          box-shadow: var(--st-shadow-drawer);
           transform: translateX(-100%);
           transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
           display: flex !important;