@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/src/components/cta/cta.ts

@@ -0,0 +1,64 @@
+import {html, css} from "lit";
+import {customElement, state} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+
+/**
+ * A closing call to action: one clear message and the buttons that act on it. Highlighted in the
+ * accent colour by default; set `tone` to change that.
+ *
+ * Slots: `eyebrow`, `title`, `lead`, `actions` (buttons) and the default slot for a short note
+ * under the buttons.
+ */
+@customElement("st-cta")
+export class StCta extends StSection {
+  @state() private _hasActions = false;
+
+  constructor() {
+    super();
+    this.tone = "accent";
+    this.width = "md";
+  }
+
+  static styles = [
+    ...StSection.styles,
+    css`
+      .header {
+        margin-bottom: var(--st-spacing-lg);
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--st-spacing-md);
+        justify-content: center;
+      }
+
+      .note {
+        margin-top: var(--st-spacing-md);
+        text-align: center;
+        font-size: var(--st-font-size-sm);
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(
+      html`
+        <div class="actions" ?hidden=${!this._hasActions}>
+          <slot
+            name="actions"
+            @slotchange=${(e: Event) =>
+              (this._hasActions = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+          ></slot>
+        </div>
+        <div class="note"><slot></slot></div>
+      `,
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-cta": StCta;
+  }
+}

package/src/components/drawer/drawer.ts

@@ -37,7 +37,7 @@ export class StDrawer 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: flex;
@@ -62,7 +62,7 @@ export class StDrawer extends LitElement {
         bottom: 0;
         width: var(--st-drawer-width, 320px);
         max-width: 90vw;
-        background-color: var(--st-color-surface, #ffffff);
+        background-color: var(--st-color-surface);
         display: flex;
         flex-direction: column;
         z-index: 1001;
@@ -79,7 +79,7 @@ export class StDrawer extends LitElement {
 
       :host([open]) .panel {
         visibility: visible;
-        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+        box-shadow: var(--st-shadow-drawer);
       }
 
       /* Slide from Left */
@@ -105,7 +105,7 @@ export class StDrawer extends LitElement {
         align-items: center;
         justify-content: space-between;
         padding: var(--st-spacing-md) var(--st-spacing-lg);
-        border-bottom: 1px solid var(--st-color-border, #e2e8f0);
+        border-bottom: 1px solid var(--st-color-border);
       }
 
       .title {
@@ -125,12 +125,12 @@ export class StDrawer extends LitElement {
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: var(--st-radius-sm, 0.375rem);
+        border-radius: var(--st-radius-sm);
       }
 
       .close-btn:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-muted, #f1f5f9);
+        background-color: var(--st-color-surface-muted);
       }
 
       .close-btn svg {

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

@@ -0,0 +1,110 @@
+import {html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {StRowItem} from "../section/row-item.js";
+import "../icon/icon.js";
+
+/**
+ * One question and answer inside `st-faq`. It is a native disclosure (`details`), so it works
+ * without JavaScript, is announced correctly by screen readers, and the answer stays in the page
+ * for search engines even while closed.
+ *
+ * Slots: `question` (a real heading such as `<h3>` is best) and the default slot for the answer.
+ */
+@customElement("st-faq-item")
+export class StFaqItem extends StRowItem {
+  /** Whether the answer is showing. */
+  @property({type: Boolean, reflect: true}) open = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      details {
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background: var(--st-row-card-bg, var(--st-color-surface));
+      }
+
+      summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--st-spacing-md);
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-radius: var(--st-radius-md);
+        cursor: pointer;
+        list-style: none;
+      }
+
+      summary::-webkit-details-marker {
+        display: none;
+      }
+
+      summary:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+
+      summary st-icon {
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
+      }
+
+      details[open] summary st-icon {
+        transform: rotate(180deg);
+      }
+
+      ::slotted([slot="question"]) {
+        margin: 0 !important;
+        font-size: var(--st-font-size-lg) !important;
+      }
+
+      /* Closed details already hide this natively; saying so keeps every browser consistent. */
+      details:not([open]) .answer {
+        display: none;
+      }
+
+      .answer {
+        padding: 0 var(--st-spacing-lg) var(--st-spacing-lg);
+        color: var(--st-color-text-muted);
+      }
+
+      .answer ::slotted(*) {
+        margin: 0 0 var(--st-spacing-sm);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        summary st-icon {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  private _onToggle = (e: Event) => {
+    const open = (e.target as HTMLDetailsElement).open;
+    if (open !== this.open) this.open = open;
+  };
+
+  render() {
+    return this.frame(html`
+      <details ?open=${this.open} @toggle=${this._onToggle}>
+        <summary>
+          <slot name="question"></slot>
+          <st-icon name="chevron-down" aria-hidden="true"></st-icon>
+        </summary>
+        <div class="answer"><slot></slot></div>
+      </details>
+    `);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-faq-item": StFaqItem;
+  }
+}

package/src/components/faq/faq.ts

@@ -0,0 +1,40 @@
+import {html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+import "./faq-item.js";
+
+/**
+ * Frequently asked questions: a header and a stack of `st-faq-item` disclosures.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-faq-item` items.
+ */
+@customElement("st-faq")
+export class StFaq extends StSection {
+  constructor() {
+    super();
+    this.width = "md";
+  }
+
+  static styles = [
+    ...StSection.styles,
+    css`
+      .items {
+        display: grid;
+        gap: var(--st-spacing-md);
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(
+      html`<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`,
+      {animated: false},
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-faq": StFaq;
+  }
+}

package/src/components/feature-grid/feature-grid.ts

@@ -0,0 +1,52 @@
+import {html, css, PropertyValues} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+import "./feature.js";
+
+/**
+ * A row of features: a header and a grid of `st-feature` cards. The grid fits as many columns as
+ * the screen allows, up to `columns`, and each card animates in after the one before it.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-feature` items.
+ */
+@customElement("st-feature-grid")
+export class StFeatureGrid extends StSection {
+  /** The most columns to use on wide screens (fewer fit on narrow ones). */
+  @property({type: Number}) columns = 3;
+
+  static styles = [
+    ...StSection.styles,
+    css`
+      .items {
+        --_columns: 3;
+        --_gap: var(--st-spacing-lg);
+        display: grid;
+        gap: var(--_gap);
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(max(14rem, calc((100% - (var(--_columns) - 1) * var(--_gap)) / var(--_columns))), 1fr)
+        );
+      }
+    `,
+  ];
+
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    this.renderRoot
+      .querySelector<HTMLElement>(".items")
+      ?.style.setProperty("--_columns", String(Math.max(1, this.columns)));
+  }
+
+  render() {
+    return this.frame(
+      html`<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`,
+      {animated: false},
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-feature-grid": StFeatureGrid;
+  }
+}

package/src/components/feature-grid/feature.ts

@@ -0,0 +1,84 @@
+import {html, css} from "lit";
+import {customElement, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {StRowItem} from "../section/row-item.js";
+
+/**
+ * One feature inside `st-feature-grid`: an icon, a title and a short description.
+ *
+ * Slots: `icon` (an `st-icon` or an inline svg), `title` (a real heading such as `<h3>`) and the
+ * default slot for the description.
+ */
+@customElement("st-feature")
+export class StFeature extends StRowItem {
+  @state() private _hasIcon = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .card {
+        display: grid;
+        align-content: start;
+        gap: var(--st-spacing-sm);
+        height: 100%;
+        padding: var(--st-spacing-lg);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background: var(--st-row-card-bg, var(--st-color-surface));
+      }
+
+      .icon {
+        display: inline-flex;
+        width: 2.75rem;
+        height: 2.75rem;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--st-radius-md);
+        background: var(--st-color-primary-bg);
+        color: var(--st-color-primary-text);
+      }
+
+      .icon[hidden] {
+        display: none;
+      }
+
+      ::slotted([slot="title"]) {
+        margin: 0 !important;
+        font-size: var(--st-font-size-xl) !important;
+      }
+
+      .body {
+        color: var(--st-color-text-muted);
+      }
+
+      .body ::slotted(*) {
+        margin: 0;
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(html`
+      <div class="card">
+        <div class="icon" ?hidden=${!this._hasIcon}>
+          <slot
+            name="icon"
+            @slotchange=${(e: Event) => (this._hasIcon = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+          ></slot>
+        </div>
+        <slot name="title"></slot>
+        <div class="body"><slot></slot></div>
+      </div>
+    `);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-feature": StFeature;
+  }
+}

package/src/components/field/field.ts

@@ -10,9 +10,9 @@ export class StField extends LitElement {
       :host {
         display: flex;
         flex-direction: column;
-        gap: var(--st-spacing-xs, 0.25rem);
+        gap: var(--st-spacing-xs);
         width: 100%;
-        margin-bottom: var(--st-spacing-md, 1rem);
+        margin-bottom: var(--st-spacing-md);
       }
     `,
   ];

package/src/components/footer/footer.ts

@@ -13,7 +13,7 @@ export class StFooter extends LitElement {
         display: block;
         border-top: 1px solid var(--st-color-border);
         background-color: var(--st-color-surface);
-        padding: var(--st-spacing-lg, 2rem) 0;
+        padding: var(--st-spacing-lg) 0;
         margin-top: auto;
       }
 
@@ -22,17 +22,17 @@ export class StFooter extends LitElement {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: var(--st-spacing-md, 1rem);
+        gap: var(--st-spacing-md);
         max-width: 1200px;
         margin: 0 auto;
-        padding: 0 var(--st-spacing-md, 1rem);
+        padding: 0 var(--st-spacing-md);
         color: var(--st-color-text-muted);
         font-size: 0.875rem;
       }
 
       .links {
         display: flex;
-        gap: var(--st-spacing-md, 1rem);
+        gap: var(--st-spacing-md);
         flex-wrap: wrap;
         justify-content: center;
       }

package/src/components/form/form-reset.ts

@@ -0,0 +1,45 @@
+type Resettable = HTMLElement & {
+  formResetCallback?: () => void;
+  reset?: () => void;
+  invalid?: boolean;
+  error?: unknown;
+};
+
+/** Clears a field's error state: resetting its value should not leave it looking wrong. */
+function clearValidation(el: Resettable) {
+  if (typeof el.invalid === "boolean") el.invalid = false;
+  if (typeof el.error === "string") el.error = "";
+}
+
+/** Puts a plain HTML control back to the value written in the markup. */
+function resetNative(el: Element) {
+  if (el instanceof HTMLInputElement) {
+    if (el.type === "checkbox" || el.type === "radio") el.checked = el.defaultChecked;
+    else if (el.type === "file") el.value = "";
+    else el.value = el.defaultValue;
+  } else if (el instanceof HTMLTextAreaElement) {
+    el.value = el.defaultValue;
+  } else if (el instanceof HTMLSelectElement) {
+    Array.from(el.options).forEach((option) => (option.selected = option.defaultSelected));
+  }
+}
+
+/**
+ * Returns every form and field inside `root` to its starting state: values go back to what the
+ * markup says, errors are cleared, and `st-form`s return to their first step. Works on Sondor
+ * fields, plain HTML controls and forms, so a modal or panel can be wiped before it is used again.
+ */
+export function resetFormState(root: ParentNode): void {
+  for (const el of Array.from(root.querySelectorAll<Resettable>("*"))) {
+    if (el instanceof HTMLFormElement) {
+      el.reset();
+    } else if (el.localName === "st-form") {
+      el.reset?.();
+    } else if (typeof el.formResetCallback === "function") {
+      el.formResetCallback();
+      clearValidation(el);
+    } else {
+      resetNative(el);
+    }
+  }
+}

package/src/components/form/form.ts

@@ -1,7 +1,8 @@
-import {LitElement, html, css, PropertyValues} from "lit";
+import {LitElement, html, css, PropertyValues, isServer} from "lit";
 import {customElement, property, state, query} from "lit/decorators.js";
 import {resetStyles} from "../../styles/reset.js";
 import type {StFormStep} from "./form-step.js";
+import {resetFormState} from "./form-reset.js";
 
 export type FormLayout = "vertical" | "horizontal" | "inline";
 
@@ -20,6 +21,7 @@ export class StForm extends LitElement {
   private _modalSubmitBtn: HTMLElement | null = null;
 
   private get _steps(): StFormStep[] {
+    if (isServer) return []; // light DOM is not queryable while server rendering
     return Array.from(this.querySelectorAll("st-form-step"));
   }
 
@@ -137,7 +139,7 @@ export class StForm extends LitElement {
       .loading-overlay {
         position: absolute;
         inset: 0;
-        background: rgba(var(--st-color-bg-rgb, 255, 255, 255), 0.7);
+        background: rgb(var(--st-color-bg-rgb) / 0.7);
         backdrop-filter: blur(2px);
         display: flex;
         align-items: center;
@@ -262,6 +264,18 @@ export class StForm extends LitElement {
     }
   }
 
+  /**
+   * Clears everything entered: fields return to their starting values, errors are cleared, the
+   * form goes back to its first step and stops loading.
+   */
+  reset() {
+    resetFormState(this);
+    this.error = "";
+    this.loading = false;
+    this._currentStepIndex = 0;
+    this._updateStepVisibility();
+  }
+
   private _handleSlotChange() {
     this._updateStepVisibility();
     this._updateModalFooter();
@@ -426,7 +440,7 @@ export class StForm extends LitElement {
   render() {
     const steps = this._steps;
     const hasSteps = steps.length > 0;
-    const isInModal = !!this.closest("st-modal");
+    const isInModal = !isServer && !!this.closest("st-modal");
 
     return html`
       <div class="${hasSteps ? "has-steps" : ""}" aria-busy=${this.loading}>

package/src/components/grid/grid.ts

@@ -4,17 +4,62 @@ import { resetStyles } from '../../styles/reset.js';
 
 @customElement('st-grid')
 export class StGrid extends LitElement {
-  // Centralized gap control
   @property({ type: String }) gap = 'var(--st-spacing-md)';
 
+  // Responsive width properties for container control
+  @property({ type: String, attribute: 'xs-width' }) xsWidth = '100%';
+  @property({ type: String, attribute: 'sm-width' }) smWidth?: string;
+  @property({ type: String, attribute: 'md-width' }) mdWidth?: string;
+  @property({ type: String, attribute: 'lg-width' }) lgWidth?: string;
+  @property({ type: String, attribute: 'xl-width' }) xlWidth?: string;
+
   static styles = [
     resetStyles,
     css`
       :host {
         display: grid;
-        grid-template-columns: 1fr; /* Stacks the rows vertically */
+        grid-template-columns: 1fr;
         gap: var(--grid-gap, var(--st-spacing-md));
-        width: 100%;
+        
+        /* Applies the responsive width and automatically centers it */
+        width: var(--_width, 100%);
+        margin: 0 auto; 
+      }
+
+      /* Mobile First (xs) */
+      :host {
+        --_width: var(--grid-w-xs, 100%);
+      }
+
+      /* Small (sm: >= 640px) */
+      @media (min-width: 640px) {
+        :host {
+          --_width: var(--grid-w-sm, var(--grid-w-xs, 100%));
+        }
+      }
+
+      /* Medium (md: >= 768px) */
+      @media (min-width: 768px) {
+        :host {
+          --_width: var(--grid-w-md, var(--grid-w-sm, var(--grid-w-xs, 100%)));
+        }
+      }
+
+      /* Large (lg: >= 1024px) */
+      @media (min-width: 1024px) {
+        :host {
+          --_width: var(--grid-w-lg, var(--grid-w-md, var(--grid-w-sm, var(--grid-w-xs, 100%))));
+        }
+      }
+
+      /* Extra Large (xl: >= 1280px) */
+      @media (min-width: 1280px) {
+        :host {
+          --_width: var(
+            --grid-w-xl,
+            var(--grid-w-lg, var(--grid-w-md, var(--grid-w-sm, var(--grid-w-xs, 100%))))
+          );
+        }
       }
     `
   ];
@@ -22,10 +67,34 @@ export class StGrid extends LitElement {
   updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
     
-    // Performance optimization: Only touch the DOM if the gap property actually changed
     if (changedProperties.has('gap')) {
       this.style.setProperty('--grid-gap', this.gap);
     }
+
+    // Evaluate and apply responsive widths
+    if (changedProperties.has('xsWidth')) {
+      this.style.setProperty("--grid-w-xs", this.xsWidth);
+    }
+    
+    if (changedProperties.has('smWidth')) {
+      if (this.smWidth) this.style.setProperty("--grid-w-sm", this.smWidth);
+      else this.style.removeProperty("--grid-w-sm");
+    }
+
+    if (changedProperties.has('mdWidth')) {
+      if (this.mdWidth) this.style.setProperty("--grid-w-md", this.mdWidth);
+      else this.style.removeProperty("--grid-w-md");
+    }
+
+    if (changedProperties.has('lgWidth')) {
+      if (this.lgWidth) this.style.setProperty("--grid-w-lg", this.lgWidth);
+      else this.style.removeProperty("--grid-w-lg");
+    }
+
+    if (changedProperties.has('xlWidth')) {
+      if (this.xlWidth) this.style.setProperty("--grid-w-xl", this.xlWidth);
+      else this.style.removeProperty("--grid-w-xl");
+    }
   }
 
   render() {