@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/dist/components/testimonials/testimonials.js

@@ -0,0 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { StSection } from "../section/section.js";
+import "./testimonial.js";
+/**
+ * A row of customer quotes as `st-testimonial` cards. They sit in columns that wrap on narrow
+ * screens.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-testimonial` items.
+ */
+let StTestimonials = class StTestimonials extends StSection {
+    render() {
+        return this.frame(html `<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`, { animated: false });
+    }
+};
+StTestimonials.styles = [
+    ...StSection.styles,
+    css `
+      .items {
+        display: grid;
+        gap: var(--st-spacing-lg);
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+      }
+    `,
+];
+StTestimonials = __decorate([
+    customElement("st-testimonials")
+], StTestimonials);
+export { StTestimonials };
+//# sourceMappingURL=testimonials.js.map

package/dist/components/testimonials/testimonials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testimonials.js","sourceRoot":"","sources":["../../../src/components/testimonials/testimonials.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,kBAAkB,CAAC;AAE1B;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,SAAS;IAY3C,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CACf,IAAI,CAAA,wCAAwC,IAAI,CAAC,cAAc,gBAAgB,EAC/E,EAAC,QAAQ,EAAE,KAAK,EAAC,CAClB,CAAC;IACJ,CAAC;CACF,CAAA;AAjBQ,qBAAM,GAAG;IACd,GAAG,SAAS,CAAC,MAAM;IACnB,GAAG,CAAA;;;;;;KAMF;CACF,AATY,CASX;AAVS,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAkB1B"}

package/dist/components/textarea/textarea.js

@@ -193,15 +193,15 @@ StTextarea.styles = [
 
       /* Validation States */
       :host([invalid]) textarea {
-        border-color: var(--st-color-error, #dc2626);
+        border-color: var(--st-color-error);
       }
 
       :host([invalid]) textarea:focus {
-        box-shadow: 0 0 0 1px var(--st-color-error, #dc2626);
+        box-shadow: 0 0 0 1px var(--st-color-error);
       }
 
       :host([invalid]) .help-text {
-        color: var(--st-color-error, #dc2626);
+        color: var(--st-color-error);
       }
 
       /* Disabled & Readonly */

package/dist/components/theme-toggle/theme-toggle.js

@@ -130,7 +130,7 @@ StThemeToggle.styles = [
       button[aria-pressed="true"] {
         background-color: var(--st-color-bg);
         color: var(--st-color-primary);
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--st-shadow-sm);
       }
 
       svg {

package/dist/components/time-picker/time-picker.js

@@ -202,15 +202,15 @@ StTimePicker.styles = [
       /* 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));
+        box-shadow: 0 0 0 2px var(--st-color-primary-muted);
       }
 
       .input-wrapper.is-invalid {
-        border-color: var(--st-color-danger, #dc2626);
+        border-color: var(--st-color-danger);
       }
 
       .input-wrapper.is-disabled {
-        background: var(--st-color-surface-muted, #f1f5f9);
+        background: var(--st-color-surface-muted);
         cursor: not-allowed;
         opacity: 0.7;
       }

package/dist/components/timeline/timeline-item.d.ts

@@ -0,0 +1,18 @@
+import { StRowItem } from "../section/row-item.js";
+/**
+ * One moment on a `st-timeline`.
+ *
+ * Slots: `date` (such as `2024` or `March 2025`), `title` (a real heading such as `<h3>`) and the
+ * default slot for the description.
+ */
+export declare class StTimelineItem extends StRowItem {
+    connectedCallback(): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-timeline-item": StTimelineItem;
+    }
+}
+//# sourceMappingURL=timeline-item.d.ts.map

package/dist/components/timeline/timeline-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAEjD;;;;;GAKG;AACH,qBACa,cAAe,SAAQ,SAAS;IAC3C,iBAAiB,SAGhB;IAED,MAAM,CAAC,MAAM,4BA+DX;IAEF,MAAM,yCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/timeline/timeline-item.js

@@ -0,0 +1,102 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import { StRowItem } from "../section/row-item.js";
+/**
+ * One moment on a `st-timeline`.
+ *
+ * Slots: `date` (such as `2024` or `March 2025`), `title` (a real heading such as `<h3>`) and the
+ * default slot for the description.
+ */
+let StTimelineItem = class StTimelineItem extends StRowItem {
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "listitem");
+    }
+    render() {
+        return html `
+      <span class="marker" aria-hidden="true"></span>
+      ${this.frame(html `
+        <slot name="date"></slot>
+        <slot name="title"></slot>
+        <div class="body"><slot></slot></div>
+      `)}
+    `;
+    }
+};
+StTimelineItem.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        position: relative;
+        padding-left: var(--st-spacing-2xl);
+        padding-bottom: var(--st-spacing-2xl);
+      }
+
+      :host(:last-child) {
+        padding-bottom: 0;
+      }
+
+      /* The line joining the markers. */
+      :host::before {
+        content: "";
+        position: absolute;
+        left: 0.4375rem;
+        top: 1.25rem;
+        bottom: -0.25rem;
+        width: 2px;
+        background: var(--st-color-border);
+      }
+
+      :host(:last-child)::before {
+        display: none;
+      }
+
+      /* The marker. */
+      .marker {
+        position: absolute;
+        left: 0;
+        top: 0.3rem;
+        width: 1rem;
+        height: 1rem;
+        border: 3px solid var(--st-color-primary);
+        border-radius: 50%;
+        background: var(--st-color-bg);
+      }
+
+      ::slotted([slot="date"]) {
+        display: block;
+        margin: 0 0 var(--st-spacing-xs);
+        color: var(--st-color-primary-text);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-bold);
+        letter-spacing: 0.04em;
+      }
+
+      ::slotted([slot="title"]) {
+        margin: 0 0 var(--st-spacing-xs) !important;
+        font-size: var(--st-font-size-xl) !important;
+      }
+
+      .body {
+        color: var(--st-color-text-muted);
+      }
+
+      .body ::slotted(*) {
+        margin: 0;
+      }
+    `,
+];
+StTimelineItem = __decorate([
+    customElement("st-timeline-item")
+], StTimelineItem);
+export { StTimelineItem };
+//# sourceMappingURL=timeline-item.js.map

package/dist/components/timeline/timeline-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.js","sourceRoot":"","sources":["../../../src/components/timeline/timeline-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAEjD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,SAAS;IAC3C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxE,CAAC;IAmED,MAAM;QACJ,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;;;;OAIhB,CAAC;KACH,CAAC;IACJ,CAAC;CACF,CAAA;AA3EQ,qBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DF;CACF,AA/DY,CA+DX;AArES,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAiF1B"}

package/dist/components/timeline/timeline.d.ts

@@ -0,0 +1,18 @@
+import { StSection } from "../section/section.js";
+import "./timeline-item.js";
+/**
+ * A vertical timeline: milestones in order, each a `st-timeline-item`. Use it for a company
+ * history, a roadmap or career experience. Items are exposed to assistive technology as a list.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-timeline-item` items.
+ */
+export declare class StTimeline extends StSection {
+    constructor();
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-timeline": StTimeline;
+    }
+}
+//# sourceMappingURL=timeline.d.ts.map

package/dist/components/timeline/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAE5B;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,cAGC;IAED,MAAM,sCAKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/timeline/timeline.js

@@ -0,0 +1,30 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { StSection } from "../section/section.js";
+import "./timeline-item.js";
+/**
+ * A vertical timeline: milestones in order, each a `st-timeline-item`. Use it for a company
+ * history, a roadmap or career experience. Items are exposed to assistive technology as a list.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-timeline-item` items.
+ */
+let StTimeline = class StTimeline extends StSection {
+    constructor() {
+        super();
+        this.width = "md";
+    }
+    render() {
+        return this.frame(html `<div class="items" role="list"><slot @slotchange=${this._onItemsChange}></slot></div>`, { animated: false });
+    }
+};
+StTimeline = __decorate([
+    customElement("st-timeline")
+], StTimeline);
+export { StTimeline };
+//# sourceMappingURL=timeline.js.map

package/dist/components/timeline/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../src/components/timeline/timeline.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAE5B;;;;;GAKG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,SAAS;IACvC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CACf,IAAI,CAAA,oDAAoD,IAAI,CAAC,cAAc,gBAAgB,EAC3F,EAAC,QAAQ,EAAE,KAAK,EAAC,CAClB,CAAC;IACJ,CAAC;CACF,CAAA;AAZY,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAYtB"}

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+import "../icon/icon.js";
+export type ToastVariant = "info" | "success" | "warning" | "error";
+/**
+ * Toast stack rendered in a polite live region. Use `showToast()` for a shared instance,
+ * or place an `<st-toast>` yourself and call its `show()` method.
+ */
+export declare class StToast extends LitElement {
+    position: "top-right" | "bottom-right" | "bottom-left";
+    private _toasts;
+    private _nextId;
+    private _timers;
+    static styles: import("lit").CSSResult[];
+    disconnectedCallback(): void;
+    /** Adds a toast; a `duration` of 0 keeps it until dismissed. Returns its id. */
+    show(message: string, options?: {
+        variant?: ToastVariant;
+        duration?: number;
+    }): number;
+    dismiss(id: number): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/** Shows a toast using a shared `<st-toast>` host appended to document.body. */
+export declare function showToast(message: string, options?: {
+    variant?: ToastVariant;
+    duration?: number;
+}): number;
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-toast": StToast;
+    }
+}
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAepE;;;GAGG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACI,QAAQ,EAAE,WAAW,GAAG,cAAc,GAAG,aAAa,CAC9E;IACR,OAAO,CAAC,OAAO,CAAmB;IAE3C,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,OAAO,CAAoD;IAEnE,MAAM,CAAC,MAAM,4BAiEX;IAEF,oBAAoB,SAInB;IAED,gFAAgF;IAChF,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE;QAAC,OAAO,CAAC,EAAE,YAAY,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAM,UAM9E;IAED,OAAO,CAAC,EAAE,EAAE,MAAM,QAIjB;IAED,MAAM,yCAcL;CACF;AAED,gFAAgF;AAChF,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAC,UAO/F;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/toast/toast.js

@@ -0,0 +1,147 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import "../icon/icon.js";
+const variantIcons = {
+    info: "circle-info",
+    success: "circle-check",
+    warning: "triangle-exclamation",
+    error: "circle-cross",
+};
+/**
+ * Toast stack rendered in a polite live region. Use `showToast()` for a shared instance,
+ * or place an `<st-toast>` yourself and call its `show()` method.
+ */
+let StToast = class StToast extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.position = "bottom-right";
+        this._toasts = [];
+        this._nextId = 0;
+        this._timers = new Map();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._timers.forEach(clearTimeout);
+        this._timers.clear();
+    }
+    /** Adds a toast; a `duration` of 0 keeps it until dismissed. Returns its id. */
+    show(message, options = {}) {
+        const { variant = "info", duration = 5000 } = options;
+        const id = this._nextId++;
+        this._toasts = [...this._toasts, { id, message, variant }];
+        if (duration > 0)
+            this._timers.set(id, setTimeout(() => this.dismiss(id), duration));
+        return id;
+    }
+    dismiss(id) {
+        clearTimeout(this._timers.get(id));
+        this._timers.delete(id);
+        this._toasts = this._toasts.filter((t) => t.id !== id);
+    }
+    render() {
+        return html `
+      ${this._toasts.map((t) => html `
+          <div class="toast ${t.variant}" role=${t.variant === "error" ? "alert" : "status"}>
+            <st-icon name=${variantIcons[t.variant]} size="sm" aria-hidden="true"></st-icon>
+            <span class="msg">${t.message}</span>
+            <button type="button" aria-label="Dismiss notification" @click=${() => this.dismiss(t.id)}>
+              <st-icon name="x" size="sm" aria-hidden="true"></st-icon>
+            </button>
+          </div>
+        `)}
+    `;
+    }
+};
+StToast.styles = [
+    resetStyles,
+    css `
+      :host {
+        position: fixed;
+        z-index: 1000;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        max-width: min(24rem, calc(100vw - 2rem));
+        pointer-events: none;
+        right: 1rem;
+        bottom: 1rem;
+      }
+      :host([position="top-right"]) {
+        top: 1rem;
+        bottom: auto;
+      }
+      :host([position="bottom-left"]) {
+        left: 1rem;
+        right: auto;
+      }
+      .toast {
+        pointer-events: auto;
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        padding: 0.75rem 1rem;
+        border-radius: 0.5rem;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-left: 4px solid var(--_accent);
+        color: var(--st-color-text);
+        box-shadow: var(--st-shadow-lg);
+      }
+      .info {
+        --_accent: var(--st-color-info);
+      }
+      .success {
+        --_accent: var(--st-color-success);
+      }
+      .warning {
+        --_accent: var(--st-color-warning);
+      }
+      .error {
+        --_accent: var(--st-color-error);
+      }
+      .toast > st-icon {
+        color: var(--_accent);
+      }
+      .msg {
+        flex: 1;
+      }
+      button {
+        display: inline-flex;
+        background: none;
+        border: 0;
+        color: var(--st-color-text-muted);
+        cursor: pointer;
+        border-radius: 0.25rem;
+      }
+      button:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StToast.prototype, "position", void 0);
+__decorate([
+    state()
+], StToast.prototype, "_toasts", void 0);
+StToast = __decorate([
+    customElement("st-toast")
+], StToast);
+export { StToast };
+/** Shows a toast using a shared `<st-toast>` host appended to document.body. */
+export function showToast(message, options) {
+    let host = document.querySelector("st-toast");
+    if (!host) {
+        host = document.createElement("st-toast");
+        document.body.appendChild(host);
+    }
+    return host.show(message, options);
+}
+//# sourceMappingURL=toast.js.map

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"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"}

package/dist/components/toggle-group/toggle-button.d.ts

@@ -11,6 +11,8 @@ export declare class StToggleButton extends LitElement {
     value: string;
     selected: boolean;
     disabled: boolean;
+    /** Accessible name. Required when the content is only an icon. Also shown as a tooltip. */
+    label: string;
     static styles: import("lit").CSSResult[];
     private _handleClick;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/toggle-group/toggle-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAEzD,KAAK,SAAM;IACK,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAE7D,MAAM,CAAC,MAAM,4BA2DX;IAEF,OAAO,CAAC,YAAY;IAWpB,MAAM,yCAWL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAEzD,KAAK,SAAM;IACK,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAC7D,2FAA2F;IAC/D,KAAK,SAAM;IAEvC,MAAM,CAAC,MAAM,4BA2DX;IAEF,OAAO,CAAC,YAAY;IAWpB,MAAM,yCAaL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/toggle-group/toggle-button.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { resetStyles } from "../../styles/reset.js";
 let StToggleButton = class StToggleButton extends LitElement {
     constructor() {
@@ -13,6 +14,8 @@ let StToggleButton = class StToggleButton extends LitElement {
         this.value = "";
         this.selected = false;
         this.disabled = false;
+        /** Accessible name. Required when the content is only an icon. Also shown as a tooltip. */
+        this.label = "";
     }
     _handleClick() {
         if (this.disabled)
@@ -29,6 +32,8 @@ let StToggleButton = class StToggleButton extends LitElement {
       <button
         type="button"
         aria-pressed=${this.selected ? "true" : "false"}
+        aria-label=${ifDefined(this.label || undefined)}
+        title=${ifDefined(this.label || undefined)}
         ?disabled=${this.disabled}
         @click=${this._handleClick}
       >
@@ -64,7 +69,7 @@ StToggleButton.styles = [
       }
 
       button:hover:not(:disabled) {
-        background-color: var(--st-color-surface-hover, #f8fafc);
+        background-color: var(--st-color-surface-hover);
       }
 
       button:focus-visible {
@@ -75,8 +80,8 @@ StToggleButton.styles = [
 
       /* Active/Selected State */
       :host([selected]) button {
-        background-color: var(--st-color-primary-light, #eff6ff);
-        color: var(--st-color-primary-dark, #1d4ed8);
+        background-color: var(--st-color-primary-light);
+        color: var(--st-color-primary-dark);
         font-weight: var(--st-font-weight-semibold);
       }
 
@@ -87,7 +92,7 @@ StToggleButton.styles = [
 
       :host([disabled]) button {
         opacity: 0.5;
-        background-color: var(--st-color-surface-muted, #f1f5f9);
+        background-color: var(--st-color-surface-muted);
         color: var(--st-color-text-muted);
       }
 
@@ -107,6 +112,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StToggleButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], StToggleButton.prototype, "label", void 0);
 StToggleButton = __decorate([
     customElement("st-toggle-button")
 ], StToggleButton);

package/dist/components/toggle-group/toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAG7C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAGuB,UAAK,GAAG,EAAE,CAAC;QACK,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;IAsF/D,CAAC;IAvBS,YAAY;QAClB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,iEAAiE;QACjE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACrD,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;uBAGQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACnC,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,YAAY;;;;KAI7B,CAAC;IACJ,CAAC;CACF,CAAA;AA1FQ,gCAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5D,CAA6D;AAM9E,qBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwDF;CACF,AA3DY,CA2DX;AA/D0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAY;AACK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AALlD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA2F1B"}
+{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAG7C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAGuB,UAAK,GAAG,EAAE,CAAC;QACK,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAC7D,2FAA2F;QAC/D,UAAK,GAAG,EAAE,CAAC;IAwFzC,CAAC;IAzBS,YAAY;QAClB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,iEAAiE;QACjE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACrD,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;uBAGQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;qBAClC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC;gBACvC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,YAAY;;;;KAI7B,CAAC;IACJ,CAAC;CACF,CAAA;AA9FQ,gCAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5D,CAA6D;AAQ9E,qBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwDF;CACF,AA3DY,CA2DX;AAjE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAY;AACK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAEjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAY;AAP5B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA+F1B"}

package/dist/components/toggle-group/toggle-group.js

@@ -169,7 +169,7 @@ StToggleGroup.styles = [
         left: 0;
         background: linear-gradient(
           to right,
-          var(--st-color-scroll-shadow, rgba(0, 0, 0, 0.15)) 0%,
+          var(--st-color-scroll-shadow) 0%,
           transparent 100%
         );
         border-top-left-radius: var(--st-radius-md);
@@ -180,7 +180,7 @@ StToggleGroup.styles = [
         right: 0;
         background: linear-gradient(
           to left,
-          var(--st-color-scroll-shadow, rgba(0, 0, 0, 0.15)) 0%,
+          var(--st-color-scroll-shadow) 0%,
           transparent 100%
         );
         border-top-right-radius: var(--st-radius-md);
@@ -197,10 +197,10 @@ StToggleGroup.styles = [
 
       /* 🚀 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%);
+        background: linear-gradient(to right, var(--st-color-overlay) 0%, transparent 100%);
       }
       :host([data-theme="dark"]) .scroll-wrapper::after {
-        background: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
+        background: linear-gradient(to left, var(--st-color-overlay) 0%, transparent 100%);
       }
 
       .group-container {