@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.2

package/README.md

@@ -0,0 +1,8 @@
+# Sondor Components
+The Sondor Copmonnents is a simple, light weight web-component library. All components follow industry standards, building on top of native
+functionality while providing an out of the box professional modern look.
+
+## Documentation
+For detailed documentation on each component within the library, visit the docs site here:
+
+[Sondor Components Documentation](https://docs.sondor-technology.dev)

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export type AlertColor = 'info' | 'success' | 'warning' | 'error';
+export declare class StAlert extends LitElement {
+    color: AlertColor;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-alert': StAlert;
+    }
+}
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE,qBACa,OAAQ,SAAQ,UAAU;IACM,KAAK,EAAE,UAAU,CAAU;IAEtE,MAAM,CAAC,MAAM,4BAwEX;IAEF,MAAM,yCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/alert/alert.js

@@ -0,0 +1,105 @@
+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 } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StAlert = class StAlert extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = 'info';
+    }
+    render() {
+        return html `
+      <div class="icon-container">
+        <slot name="icon"></slot>
+      </div>
+      <div class="content">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+StAlert.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: flex;
+        gap: var(--st-spacing-md);
+        padding: var(--st-spacing-md);
+        border-radius: 6px;
+        border: 1px solid transparent;
+        font-size: var(--st-font-size-base);
+        line-height: 1.5;
+        
+        /* Default Palette */
+        --_alert-bg: var(--st-color-info-bg);
+        --_alert-border: var(--st-color-info);
+        --_alert-text: var(--st-color-text);
+        --_alert-icon: var(--st-color-info);
+      }
+
+      /* State Modifiers */
+      :host([color="error"]) {
+        --_alert-bg: var(--st-color-error-bg);
+        --_alert-border: var(--st-color-error);
+        --_alert-icon: var(--st-color-error);
+      }
+
+      :host([color="success"]) {
+        --_alert-bg: var(--st-color-success-bg);
+        --_alert-border: var(--st-color-success);
+        --_alert-icon: var(--st-color-success);
+      }
+
+      :host([color="warning"]) {
+        --_alert-bg: var(--st-color-warning-bg);
+        --_alert-border: var(--st-color-warning);
+        --_alert-icon: var(--st-color-warning);
+        /* Amber backgrounds often need forced dark text in light mode, but your tokens handle this */
+      }
+
+      /* Apply the variables */
+      :host {
+        background-color: var(--_alert-bg);
+        border-color: var(--_alert-border);
+        color: var(--_alert-text);
+      }
+
+      /* Icon Slot */
+      .icon-container {
+        display: flex;
+        flex-shrink: 0;
+        color: var(--_alert-icon);
+        /* Align icon with the first line of text */
+        margin-top: 2px; 
+      }
+
+      ::slotted([slot="icon"]) {
+        width: 1.25rem;
+        height: 1.25rem;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StAlert.prototype, "color", void 0);
+StAlert = __decorate([
+    customElement('st-alert')
+], StAlert);
+export { StAlert };

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export type BadgeColor = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+export declare class StBadge extends LitElement {
+    color: BadgeColor;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-badge': StBadge;
+    }
+}
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAE1F,qBACa,OAAQ,SAAQ,UAAU;IACM,KAAK,EAAE,UAAU,CAAa;IAEzE,MAAM,CAAC,MAAM,4BAwEX;IAEF,MAAM,yCAKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/badge/badge.js

@@ -0,0 +1,101 @@
+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 } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StBadge = class StBadge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = 'neutral';
+    }
+    render() {
+        return html `
+      <slot name="icon"></slot>
+      <slot></slot>
+    `;
+    }
+};
+StBadge.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.125rem 0.5rem; /* 2px 8px */
+        font-size: var(--st-font-size-xs);
+        font-weight: var(--st-font-weight-medium);
+        border-radius: 999px; /* Pill shape */
+        line-height: 1.25;
+        white-space: nowrap;
+        
+        /* Base / Neutral Palette */
+        --_badge-bg: var(--st-color-surface);
+        --_badge-text: var(--st-color-text-muted);
+        --_badge-border: var(--st-color-border);
+      }
+
+      /* Base Application */
+      :host {
+        background-color: var(--_badge-bg);
+        color: var(--_badge-text);
+        border: 1px solid var(--_badge-border);
+      }
+
+      /* ==========================================================
+         Soft Semantic Variants
+         ========================================================== */
+      :host([color="primary"]) {
+        --_badge-bg: var(--st-color-primary);
+        --_badge-text: var(--st-white);
+        --_badge-border: transparent;
+      }
+
+      :host([color="success"]) {
+        --_badge-bg: var(--st-color-success-bg);
+        --_badge-text: var(--st-color-success);
+        --_badge-border: transparent;
+      }
+
+      :host([color="warning"]) {
+        --_badge-bg: var(--st-color-warning-bg);
+        --_badge-text: var(--st-color-warning);
+        --_badge-border: transparent;
+      }
+
+      :host([color="error"]) {
+        --_badge-bg: var(--st-color-error-bg);
+        --_badge-text: var(--st-color-error);
+        --_badge-border: transparent;
+      }
+
+      :host([color="info"]) {
+        --_badge-bg: var(--st-color-info-bg);
+        --_badge-text: var(--st-color-info);
+        --_badge-border: transparent;
+      }
+
+      /* Optional icon support inside the badge */
+      ::slotted(svg) {
+        width: 0.75rem;
+        height: 0.75rem;
+        margin-right: 0.25rem;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    `
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StBadge.prototype, "color", void 0);
+StBadge = __decorate([
+    customElement('st-badge')
+], StBadge);
+export { StBadge };

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export declare class StBreadcrumb extends LitElement {
+    /**
+     * Array of breadcrumb items defining the navigation path.
+     */
+    items: BreadcrumbItem[];
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-breadcrumb': StBreadcrumb;
+    }
+}
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,YAAa,SAAQ,UAAU;IAC1C;;OAEG;IACwB,KAAK,EAAE,cAAc,EAAE,CAAM;IAExD,MAAM,CAAC,MAAM,4BAoDX;IAEF,MAAM,yCAqBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,99 @@
+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 } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StBreadcrumb = class StBreadcrumb extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Array of breadcrumb items defining the navigation path.
+         */
+        this.items = [];
+    }
+    render() {
+        if (!this.items || this.items.length === 0) {
+            return html ``;
+        }
+        return html `
+      <nav aria-label="Breadcrumb">
+        <ol>
+          ${this.items.map((item, index) => {
+            const isLast = index === this.items.length - 1;
+            return html `
+              <li>
+                ${!isLast && item.href
+                ? html `<a href=${item.href}>${item.label}</a>`
+                : html `<span>${item.label}</span>`}
+              </li>
+            `;
+        })}
+        </ol>
+      </nav>
+    `;
+    }
+};
+StBreadcrumb.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        font-family: var(--st-font-family, inherit);
+      }
+
+      nav {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        font-size: var(--st-font-size-sm, 0.875rem);
+      }
+
+      ol {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        display: flex;
+        align-items: center;
+        color: var(--st-color-text-muted);
+      }
+
+      li:not(:last-child)::after {
+        content: "/";
+        margin: 0 var(--st-spacing-sm, 0.5rem);
+        color: var(--st-color-border);
+      }
+
+      a {
+        color: var(--st-color-text-muted);
+        text-decoration: none;
+        transition: color 0.2s ease;
+      }
+
+      a:hover {
+        color: var(--st-color-primary);
+        text-decoration: underline;
+      }
+
+      li:last-child {
+        color: var(--st-color-text);
+        font-weight: 500;
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], StBreadcrumb.prototype, "items", void 0);
+StBreadcrumb = __decorate([
+    customElement('st-breadcrumb')
+], StBreadcrumb);
+export { StBreadcrumb };

package/dist/components/button/button.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from "lit";
+export type ButtonVariant = "primary" | "secondary" | "outline";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonColor = "primary" | "error" | "success" | "warning" | "info";
+export declare class StButton extends LitElement {
+    href?: string;
+    target: "_blank" | "_self";
+    disabled: boolean;
+    loading: boolean;
+    variant: ButtonVariant;
+    size: ButtonSize;
+    color: ButtonColor;
+    active: boolean;
+    ariaLabel: string | null;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-button": StButton;
+    }
+}
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAInD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAChE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/E,qBACa,QAAS,SAAQ,UAAU;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAW;IACrB,QAAQ,UAAS;IACjB,OAAO,UAAS;IACjB,OAAO,EAAE,aAAa,CAAa;IACnC,IAAI,EAAE,UAAU,CAAQ;IACxB,KAAK,EAAE,WAAW,CAAa;IAC5B,MAAM,UAAS;IACN,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAErF,MAAM,CAAC,MAAM,4BA2NX;IAEF,MAAM,yCAgCL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}