@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "",
-  "main": "src/index.js",
+  "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc && esbuild ./src/styles/index.css --bundle --outfile=dist/styles/index.css",
@@ -15,7 +15,6 @@
     },
     "./button": {
       "types": "./dist/components/button/button.d.ts",
-      "development": "./src/components/button/button.ts",
       "default": "./dist/components/button/button.js"
     },
     "./styles.css": {
@@ -50,10 +49,6 @@
       "types": "./dist/components/switch/switch.d.ts",
       "default": "./dist/components/switch/switch.js"
     },
-    "./card": {
-      "types": "./dist/components/card/card.d.ts",
-      "default": "./dist/components/card/card.js"
-    },
     "./alert": {
       "types": "./dist/components/alert/alert.d.ts",
       "default": "./dist/components/alert/alert.js"
@@ -178,6 +173,10 @@
       "types": "./dist/components/toggle-group/toggle-group.d.ts",
       "default": "./dist/components/toggle-group/toggle-group.js"
     },
+    "./toggle-button": {
+      "types": "./dist/components/toggle-group/toggle-button.d.ts",
+      "default": "./dist/components/toggle-group/toggle-button.js"
+    },
     "./calendar": {
       "types": "./dist/components/calendar/calendar.d.ts",
       "default": "./dist/components/calendar/calendar.js"
@@ -201,6 +200,214 @@
     "./popover": {
       "types": "./dist/components/popover/popover.d.ts",
       "default": "./dist/components/popover/popover.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/spinner/spinner.d.ts",
+      "default": "./dist/components/spinner/spinner.js"
+    },
+    "./progress": {
+      "types": "./dist/components/progress/progress.d.ts",
+      "default": "./dist/components/progress/progress.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/avatar/avatar.d.ts",
+      "default": "./dist/components/avatar/avatar.js"
+    },
+    "./pagination": {
+      "types": "./dist/components/pagination/pagination.d.ts",
+      "default": "./dist/components/pagination/pagination.js"
+    },
+    "./accordion": {
+      "types": "./dist/components/accordion/accordion.d.ts",
+      "default": "./dist/components/accordion/accordion.js"
+    },
+    "./toast": {
+      "types": "./dist/components/toast/toast.d.ts",
+      "default": "./dist/components/toast/toast.js"
+    },
+    "./line-chart": {
+      "types": "./dist/components/line-chart/line-chart.d.ts",
+      "default": "./dist/components/line-chart/line-chart.js"
+    },
+    "./bar-chart": {
+      "types": "./dist/components/bar-chart/bar-chart.d.ts",
+      "default": "./dist/components/bar-chart/bar-chart.js"
+    },
+    "./pie-chart": {
+      "types": "./dist/components/pie-chart/pie-chart.d.ts",
+      "default": "./dist/components/pie-chart/pie-chart.js"
+    },
+    "./heat-map": {
+      "types": "./dist/components/heat-map/heat-map.d.ts",
+      "default": "./dist/components/heat-map/heat-map.js"
+    },
+    "./sparkline": {
+      "types": "./dist/components/sparkline/sparkline.d.ts",
+      "default": "./dist/components/sparkline/sparkline.js"
+    },
+    "./stat-card": {
+      "types": "./dist/components/stat-card/stat-card.d.ts",
+      "default": "./dist/components/stat-card/stat-card.js"
+    },
+    "./chart-utils": {
+      "types": "./dist/components/chart/chart.utils.d.ts",
+      "default": "./dist/components/chart/chart.utils.js"
+    },
+    "./list": {
+      "types": "./dist/components/list/list.d.ts",
+      "default": "./dist/components/list/list.js"
+    },
+    "./list-item": {
+      "types": "./dist/components/list/list-item.d.ts",
+      "default": "./dist/components/list/list-item.js"
+    },
+    "./context-menu": {
+      "types": "./dist/components/context-menu/context-menu.d.ts",
+      "default": "./dist/components/context-menu/context-menu.js"
+    },
+    "./data-table-utils": {
+      "types": "./dist/components/table/data-table.utils.d.ts",
+      "default": "./dist/components/table/data-table.utils.js"
+    },
+    "./reveal": {
+      "types": "./dist/components/reveal/reveal.d.ts",
+      "default": "./dist/components/reveal/reveal.js"
+    },
+    "./lazy": {
+      "types": "./dist/components/lazy/lazy.d.ts",
+      "default": "./dist/components/lazy/lazy.js"
+    },
+    "./image": {
+      "types": "./dist/components/image/image.d.ts",
+      "default": "./dist/components/image/image.js"
+    },
+    "./video-embed": {
+      "types": "./dist/components/video-embed/video-embed.d.ts",
+      "default": "./dist/components/video-embed/video-embed.js"
+    },
+    "./container": {
+      "types": "./dist/components/container/container.d.ts",
+      "default": "./dist/components/container/container.js"
+    },
+    "./section": {
+      "types": "./dist/components/section/section.d.ts",
+      "default": "./dist/components/section/section.js"
+    },
+    "./stack": {
+      "types": "./dist/components/stack/stack.d.ts",
+      "default": "./dist/components/stack/stack.js"
+    },
+    "./scroll-progress": {
+      "types": "./dist/components/scroll-progress/scroll-progress.d.ts",
+      "default": "./dist/components/scroll-progress/scroll-progress.js"
+    },
+    "./back-to-top": {
+      "types": "./dist/components/back-to-top/back-to-top.d.ts",
+      "default": "./dist/components/back-to-top/back-to-top.js"
+    },
+    "./consent": {
+      "types": "./dist/components/consent/consent.d.ts",
+      "default": "./dist/components/consent/consent.js"
+    },
+    "./site-header": {
+      "types": "./dist/components/site-header/site-header.d.ts",
+      "default": "./dist/components/site-header/site-header.js"
+    },
+    "./hero": {
+      "types": "./dist/components/hero/hero.d.ts",
+      "default": "./dist/components/hero/hero.js"
+    },
+    "./feature-grid": {
+      "types": "./dist/components/feature-grid/feature-grid.d.ts",
+      "default": "./dist/components/feature-grid/feature-grid.js"
+    },
+    "./feature": {
+      "types": "./dist/components/feature-grid/feature.d.ts",
+      "default": "./dist/components/feature-grid/feature.js"
+    },
+    "./split": {
+      "types": "./dist/components/split/split.d.ts",
+      "default": "./dist/components/split/split.js"
+    },
+    "./cta": {
+      "types": "./dist/components/cta/cta.d.ts",
+      "default": "./dist/components/cta/cta.js"
+    },
+    "./stats": {
+      "types": "./dist/components/stats/stats.d.ts",
+      "default": "./dist/components/stats/stats.js"
+    },
+    "./stat": {
+      "types": "./dist/components/stats/stat.d.ts",
+      "default": "./dist/components/stats/stat.js"
+    },
+    "./timeline": {
+      "types": "./dist/components/timeline/timeline.d.ts",
+      "default": "./dist/components/timeline/timeline.js"
+    },
+    "./timeline-item": {
+      "types": "./dist/components/timeline/timeline-item.d.ts",
+      "default": "./dist/components/timeline/timeline-item.js"
+    },
+    "./testimonials": {
+      "types": "./dist/components/testimonials/testimonials.d.ts",
+      "default": "./dist/components/testimonials/testimonials.js"
+    },
+    "./testimonial": {
+      "types": "./dist/components/testimonials/testimonial.d.ts",
+      "default": "./dist/components/testimonials/testimonial.js"
+    },
+    "./faq": {
+      "types": "./dist/components/faq/faq.d.ts",
+      "default": "./dist/components/faq/faq.js"
+    },
+    "./faq-item": {
+      "types": "./dist/components/faq/faq-item.d.ts",
+      "default": "./dist/components/faq/faq-item.js"
+    },
+    "./logo-cloud": {
+      "types": "./dist/components/logo-cloud/logo-cloud.d.ts",
+      "default": "./dist/components/logo-cloud/logo-cloud.js"
+    },
+    "./pricing": {
+      "types": "./dist/components/pricing/pricing.d.ts",
+      "default": "./dist/components/pricing/pricing.js"
+    },
+    "./pricing-tier": {
+      "types": "./dist/components/pricing/pricing-tier.d.ts",
+      "default": "./dist/components/pricing/pricing-tier.js"
+    },
+    "./team": {
+      "types": "./dist/components/team/team.d.ts",
+      "default": "./dist/components/team/team.js"
+    },
+    "./person": {
+      "types": "./dist/components/team/person.d.ts",
+      "default": "./dist/components/team/person.js"
+    },
+    "./contact": {
+      "types": "./dist/components/contact/contact.d.ts",
+      "default": "./dist/components/contact/contact.js"
+    },
+    "./post-list": {
+      "types": "./dist/components/post-list/post-list.d.ts",
+      "default": "./dist/components/post-list/post-list.js"
+    },
+    "./post-card": {
+      "types": "./dist/components/post-list/post-card.d.ts",
+      "default": "./dist/components/post-list/post-card.js"
+    },
+    "./project-grid": {
+      "types": "./dist/components/project-grid/project-grid.d.ts",
+      "default": "./dist/components/project-grid/project-grid.js"
+    },
+    "./project-card": {
+      "types": "./dist/components/project-grid/project-card.d.ts",
+      "default": "./dist/components/project-grid/project-card.js"
+    },
+    "./series-nav": {
+      "types": "./dist/components/series-nav/series-nav.d.ts",
+      "default": "./dist/components/series-nav/series-nav.js"
     }
   },
   "sideEffects": [

package/src/components/accordion/accordion.constants.ts

@@ -0,0 +1,5 @@
+export const accordionColors = ["default", "primary", "info", "success", "warning", "error"] as const;
+export type AccordionColor = (typeof accordionColors)[number];
+
+export const accordionVariants = ["soft", "solid", "outline"] as const;
+export type AccordionVariant = (typeof accordionVariants)[number];

package/src/components/accordion/accordion.ts

@@ -0,0 +1,209 @@
+import {LitElement, html, css, nothing, PropertyValues} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {AccordionColor, AccordionVariant} from "./accordion.constants.js";
+import "../icon/icon.js";
+
+let nextId = 0;
+
+/**
+ * Collapsible section. The header is a disclosure button and the content is a labelled region
+ * that animates open and closed (respecting `prefers-reduced-motion`).
+ */
+@customElement("st-accordion")
+export class StAccordion extends LitElement {
+  @property({type: String}) heading = "";
+  @property({type: Boolean, reflect: true}) open = false;
+  /** Accordions sharing the same `group` close each other. */
+  @property({type: String}) group = "";
+  /** Optional icon name shown before the heading. */
+  @property({type: String}) icon = "";
+  @property({type: String, reflect: true}) color: AccordionColor = "default";
+  @property({type: String, reflect: true}) variant: AccordionVariant = "soft";
+
+  private readonly _id = `st-accordion-${nextId++}`;
+  private _hasUpdated = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        overflow: hidden;
+        border: 1px solid var(--_accent);
+        border-radius: var(--st-radius-md);
+        background: var(--st-color-bg);
+
+        /* Default (neutral) palette */
+        --_accent: var(--st-color-border);
+        --_accent-text: var(--st-color-text);
+        --_soft-bg: var(--st-color-surface-muted);
+        --_on-accent: var(--st-color-text);
+      }
+      :host([color="primary"]) {
+        --_accent: var(--st-color-primary);
+        --_accent-text: var(--st-color-primary-text);
+        --_soft-bg: var(--st-color-primary-bg);
+        --_on-accent: var(--st-color-on-primary);
+      }
+      :host([color="info"]) {
+        --_accent: var(--st-color-info);
+        --_accent-text: var(--st-color-info-text);
+        --_soft-bg: var(--st-color-info-bg);
+        --_on-accent: var(--st-color-on-info);
+      }
+      :host([color="success"]) {
+        --_accent: var(--st-color-success);
+        --_accent-text: var(--st-color-success);
+        --_soft-bg: var(--st-color-success-bg);
+        --_on-accent: var(--st-color-on-success);
+      }
+      :host([color="warning"]) {
+        --_accent: var(--st-color-warning);
+        --_accent-text: var(--st-color-warning);
+        --_soft-bg: var(--st-color-warning-bg);
+        --_on-accent: var(--st-color-on-warning);
+      }
+      :host([color="error"]) {
+        --_accent: var(--st-color-error);
+        --_accent-text: var(--st-color-error-text);
+        --_soft-bg: var(--st-color-error-bg);
+        --_on-accent: var(--st-color-on-danger);
+      }
+
+      /* Header colors per variant */
+      .header {
+        --_header-bg: var(--_soft-bg);
+        --_header-text: var(--_accent-text);
+      }
+      :host([variant="solid"]) .header {
+        --_header-bg: var(--_accent);
+        --_header-text: var(--_on-accent);
+      }
+      :host([variant="solid"][color="default"]) .header {
+        --_header-bg: var(--st-color-surface-hover);
+        --_header-text: var(--st-color-text);
+      }
+      :host([variant="outline"]) .header {
+        --_header-bg: transparent;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        width: 100%;
+        padding: var(--st-spacing-md);
+        border: 0;
+        background: var(--_header-bg);
+        color: var(--_header-text);
+        font-weight: var(--st-font-weight-medium);
+        text-align: left;
+        cursor: pointer;
+      }
+      .header:hover {
+        filter: brightness(var(--st-hover-brightness));
+      }
+      .header:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+      }
+      .title {
+        flex: 1;
+      }
+      .chevron {
+        transition: transform 0.25s ease;
+      }
+      :host([open]) .chevron {
+        transform: rotate(180deg);
+      }
+
+      /* Animated panel: grid rows animate 0fr -> 1fr without measuring heights in JS */
+      .panel {
+        display: grid;
+        grid-template-rows: 0fr;
+        visibility: hidden;
+        transition:
+          grid-template-rows 0.25s ease,
+          visibility 0s linear 0.25s;
+      }
+      :host([open]) .panel {
+        grid-template-rows: 1fr;
+        visibility: visible;
+        transition:
+          grid-template-rows 0.25s ease,
+          visibility 0s;
+      }
+      .panel-inner {
+        min-height: 0;
+        overflow: hidden;
+      }
+      /* Distinct content surface so it never blends with the header */
+      .content {
+        padding: var(--st-spacing-md);
+        background: var(--st-color-bg);
+        color: var(--st-color-text);
+        border-top: 1px solid var(--_accent);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .chevron,
+        .panel,
+        :host([open]) .panel {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  protected updated(changed: PropertyValues<this>) {
+    if (changed.has("open") && this._hasUpdated) {
+      this.dispatchEvent(
+        new CustomEvent("st-toggle", {detail: {open: this.open}, bubbles: true, composed: true}),
+      );
+      if (this.open && this.group) this._closeGroupSiblings();
+    }
+    this._hasUpdated = true;
+  }
+
+  private _closeGroupSiblings() {
+    const root = this.getRootNode() as Document | ShadowRoot;
+    root
+      .querySelectorAll<StAccordion>(`st-accordion[group="${CSS.escape(this.group)}"]`)
+      .forEach((el) => {
+        if (el !== this) el.open = false;
+      });
+  }
+
+  render() {
+    const headerId = `${this._id}-header`;
+    const panelId = `${this._id}-panel`;
+    return html`
+      <button
+        class="header"
+        id=${headerId}
+        type="button"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${panelId}
+        @click=${() => (this.open = !this.open)}
+      >
+        ${this.icon
+          ? html`<st-icon name=${this.icon} size="sm" aria-hidden="true"></st-icon>`
+          : nothing}
+        <span class="title">${this.heading}</span>
+        <st-icon class="chevron" name="angle-down" size="sm" aria-hidden="true"></st-icon>
+      </button>
+      <div class="panel" id=${panelId} role="region" aria-labelledby=${headerId}>
+        <div class="panel-inner">
+          <div class="content"><slot></slot></div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-accordion": StAccordion;
+  }
+}

package/src/components/alert/alert.constants.ts

@@ -1,2 +1,5 @@
 export const alertColors = ["info", "success", "warning", "error"] as const;
 export type AlertColor = typeof alertColors[number];
+
+/** Why an alert closed, reported in `st-close`. */
+export type AlertCloseReason = "dismiss" | "timeout" | "api";