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

package/dist/components/button/button.js

@@ -0,0 +1,304 @@
+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, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+let StButton = class StButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.target = "_self";
+        this.disabled = false;
+        this.loading = false;
+        this.variant = "primary";
+        this.size = "md";
+        this.color = "primary";
+        this.active = false;
+        this.ariaLabel = null;
+    }
+    render() {
+        const content = html `<slot></slot>`;
+        if (this.href) {
+            return html `<a href="${this.href}" target="${this.target}" class="btn" color="${this.color}" aria-label=${this.ariaLabel || nothing}
+        >${content}</a
+      >`;
+        }
+        return html `
+      <button class="btn" ?disabled=${this.disabled || this.loading}>
+        ${this.loading
+            ? html `
+              <svg class="spinner" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  opacity="0.2"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z"
+                  fill="currentColor"
+                />
+              </svg>
+            `
+            : html `<slot name="prefix"></slot>`}
+        ${content}
+        <slot name="suffix"></slot>
+      </button>
+    `;
+    }
+};
+StButton.styles = [
+    resetStyles,
+    css `
+      :host {
+        /* ==========================================================
+           1. Base Palette (Defaults to Primary Theme)
+           ========================================================== */
+        --_palette-base: var(--st-color-primary);
+        --_palette-hover: var(--st-color-primary-hover);
+        --_palette-surface: var(--st-color-surface);
+        --_palette-surface-hover: var(--st-color-border);
+
+        --_palette-text-on-base: var(--st-color-surface);
+        --_palette-text-on-surface: var(--st-color-text);
+
+        /* Sizing Tokens */
+        --_btn-padding: var(--st-spacing-sm) var(--st-spacing-md);
+        --_btn-font-size: var(--st-font-size-sm);
+        --_btn-radius: 4px;
+        --_btn-gap: var(--st-spacing-sm);
+
+        display: inline-block;
+      }
+
+      /* ==========================================================
+         2. Semantic Color Overrides (Swaps the active palette)
+         ========================================================== */
+      :host([color="error"]) {
+        --_palette-base: var(--st-color-error);
+        --_palette-hover: color-mix(in srgb, var(--st-color-error), black 15%);
+        --_palette-surface: var(--st-color-error-bg);
+        --_palette-surface-hover: color-mix(in srgb, var(--st-color-error-bg), black 10%);
+        --_palette-text-on-base: var(--st-white); /* Force white text */
+        --_palette-text-on-surface: var(--st-color-error);
+      }
+
+      :host([color="success"]) {
+        --_palette-base: var(--st-color-success);
+        --_palette-hover: color-mix(in srgb, var(--st-color-success), black 15%);
+        --_palette-surface: var(--st-color-success-bg);
+        --_palette-surface-hover: color-mix(in srgb, var(--st-color-success-bg), black 10%);
+        --_palette-text-on-base: var(--st-white);
+        --_palette-text-on-surface: var(--st-color-success);
+      }
+
+      :host([color="warning"]) {
+        --_palette-base: var(--st-color-warning);
+        --_palette-hover: color-mix(in srgb, var(--st-color-warning), black 15%);
+        --_palette-surface: var(--st-color-warning-bg);
+        --_palette-surface-hover: color-mix(in srgb, var(--st-color-warning-bg), black 10%);
+        --_palette-text-on-base: var(--st-gray-900); /* Amber needs dark text for contrast */
+        --_palette-text-on-surface: var(--st-color-warning);
+      }
+
+      :host([color="info"]) {
+        --_palette-base: var(--st-color-info);
+        --_palette-hover: color-mix(in srgb, var(--st-color-info), black 15%);
+        --_palette-surface: var(--st-color-info-bg);
+        --_palette-surface-hover: color-mix(in srgb, var(--st-color-info-bg), black 10%);
+        --_palette-text-on-base: var(--st-white);
+        --_palette-text-on-surface: var(--st-color-info);
+      }
+
+      /* ==========================================================
+         3. Visual Variants (Consumes the active palette)
+         ========================================================== */
+
+      /* Base (Primary / Solid) */
+      :host {
+        --_btn-bg: var(--_palette-base);
+        --_btn-bg-hover: var(--_palette-hover);
+        --_btn-text: var(--_palette-text-on-base);
+        --_btn-border: transparent;
+      }
+
+      /* Secondary Variant */
+      :host([variant="secondary"]) {
+        --_btn-bg: var(--_palette-surface);
+        --_btn-bg-hover: var(--_palette-surface-hover);
+        --_btn-text: var(--_palette-text-on-surface);
+        --_btn-border: transparent;
+      }
+
+      /* Outline Variant */
+      :host([variant="outline"]) {
+        --_btn-bg: transparent;
+        --_btn-bg-hover: var(--_palette-surface);
+        --_btn-text: var(--_palette-base);
+        --_btn-border: var(--_palette-base);
+      }
+
+      /* ==========================================================
+         4. Size Variants
+         ========================================================== */
+      :host([size="sm"]) {
+        --_btn-padding: var(--st-spacing-xs) var(--st-spacing-sm);
+        --_btn-font-size: var(--st-font-size-xs);
+        --_btn-radius: 2px;
+        --_btn-gap: var(--st-spacing-xs);
+      }
+
+      :host([size="lg"]) {
+        --_btn-padding: var(--st-spacing-md) var(--st-spacing-lg);
+        --_btn-font-size: var(--st-font-size-base);
+        --_btn-radius: 6px;
+        --_btn-gap: var(--st-spacing-sm);
+      }
+
+      /* ==========================================================
+         5. Base Button Rules
+         ========================================================== */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--_btn-gap);
+
+        background-color: var(--_btn-bg);
+        color: var(--_btn-text);
+        border: 1px solid var(--_btn-border);
+        padding: var(--_btn-padding);
+        font-size: var(--_btn-font-size);
+        border-radius: var(--_btn-radius);
+        line-height: 1;
+
+        cursor: pointer;
+        font-weight: var(--st-font-weight-medium);
+        transition: all 0.2s ease;
+        padding: 0.5rem 1rem;
+
+        /* 1. Split the border radius into 4 independent corners */
+        border-radius: var(--btn-radius-tl, var(--st-radius-md, 0.5rem))
+          var(--btn-radius-tr, var(--st-radius-md, 0.5rem))
+          var(--btn-radius-br, var(--st-radius-md, 0.5rem))
+          var(--btn-radius-bl, var(--st-radius-md, 0.5rem));
+
+        /* 2. Add a hook for the group wrapper to inject a divider line */
+        box-shadow: var(--btn-divider, none);
+
+        font-weight: 500;
+        text-decoration: none;
+        border: 1px solid transparent;
+      }
+
+      .btn:hover {
+        color: var(--_btn-text);
+        background-color: var(--_btn-bg-hover);
+      }
+
+      /* ==========================================================
+         Logical Active States (Selected/Toggled)
+         ========================================================== */
+      :host([active]) .btn {
+        filter: brightness(0.9);
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
+        border-color: transparent;
+        color: var(--_btn-text);
+        background-color: var(--_btn-bg-hover);
+      }
+
+      :host([active]) .btn[color="primary"] {
+        filter: brightness(0.85);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Inset shadow gives a pressed look */
+      }
+
+      /* ==========================================================
+         Focus State (Accessibility)
+         ========================================================== */
+      /* focus-visible ensures this only shows for keyboard navigation, not mouse clicks */
+      .btn:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+        z-index: 1; /* Pulls the focused button forward if it's in a button group */
+      }
+
+      /* ==========================================================
+         Physical Active State (Mouse down)
+         ========================================================== */
+      .btn:active {
+        transform: scale(0.98);
+      }
+
+      /* Disabled & Loading */
+      :host([disabled]),
+      :host([loading]) {
+        pointer-events: none;
+      }
+
+      :host([disabled]) button {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      :host([loading]) button {
+        opacity: 0.8;
+      }
+
+      /* Icons & Spinner */
+      ::slotted(svg),
+      svg.spinner {
+        width: 1.25em;
+        height: 1.25em;
+        fill: currentColor;
+        flex-shrink: 0;
+      }
+
+      svg.spinner {
+        animation: st-spin 1s linear infinite;
+      }
+
+      @keyframes st-spin {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], StButton.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], StButton.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StButton.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StButton.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StButton.prototype, "active", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' })
+], StButton.prototype, "ariaLabel", void 0);
+StButton = __decorate([
+    customElement("st-button")
+], StButton);
+export { StButton };

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

@@ -0,0 +1,6 @@
+import { LitElement } from "lit";
+export declare class StButtonGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,4BAmDX;IAEF,MAAM,yCAML;CACF"}

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

@@ -0,0 +1,74 @@
+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 } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset";
+let StButtonGroup = class StButtonGroup extends LitElement {
+    render() {
+        return html `
+      <div class="group" role="group" aria-label="button group">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+StButtonGroup.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .group {
+        display: inline-flex;
+      }
+
+      /* 1. Flatten all corners by default */
+      ::slotted(st-button) {
+        --btn-radius-tl: 0px;
+        --btn-radius-tr: 0px;
+        --btn-radius-br: 0px;
+        --btn-radius-bl: 0px;
+        position: relative;
+      }
+
+      /* 2. Restore ONLY the left corners for the first button */
+      ::slotted(st-button:first-child) {
+        --btn-radius-tl: var(--st-radius-md, 0.5rem);
+        --btn-radius-bl: var(--st-radius-md, 0.5rem);
+      }
+
+      /* 3. Restore ONLY the right corners for the last button */
+      ::slotted(st-button:last-child) {
+        --btn-radius-tr: var(--st-radius-md, 0.5rem);
+        --btn-radius-br: var(--st-radius-md, 0.5rem);
+      }
+
+      /* 4. Collapse borders by hiding the left border of adjacent default buttons */
+      ::slotted(st-button[color="default"]:not(:first-child)) {
+        margin-left: -1px;
+      }
+
+      /* 5. Prevent Primary buttons from overlapping at all, use box-shadow for the divider */
+      ::slotted(st-button[color="primary"]:not(:first-child)) {
+        --btn-divider: inset 1px 0 0 0 rgba(255, 255, 255, 0.3);
+        margin-left: 0; /* Override any inherited negative margins */
+      }
+
+      /* 6. Pull active/hovered default buttons forward so their full border shows */
+      ::slotted(st-button[color="default"]:hover),
+      ::slotted(st-button[color="default"]:focus-within),
+      ::slotted(st-button[color="default"]:active) {
+        z-index: 1;
+      }
+    `,
+];
+StButtonGroup = __decorate([
+    customElement("st-button-group")
+], StButtonGroup);
+export { StButtonGroup };

package/dist/components/card/card.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class StCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-card': StCard;
+    }
+}
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,4BA+BX;IAEF,MAAM,yCAML;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/card/card.js

@@ -0,0 +1,54 @@
+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 } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StCard = class StCard extends LitElement {
+    render() {
+        return html `
+      <slot name="header"></slot>
+      <slot></slot>
+      <slot name="footer"></slot>
+    `;
+    }
+};
+StCard.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--st-color-bg);
+        border: 1px solid var(--st-color-border);
+        border-radius: 8px;
+        overflow: hidden; /* Ensures contents don't break the border radius */
+      }
+
+      /* Apply standard padding to all direct slotted children */
+      ::slotted(*) {
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+      }
+
+      /* Optional structured slots for headers and footers */
+      ::slotted([slot="header"]) {
+        border-bottom: 1px solid var(--st-color-border);
+        background-color: var(--st-color-surface);
+        font-weight: var(--st-font-weight-medium);
+        margin: 0;
+      }
+
+      ::slotted([slot="footer"]) {
+        border-top: 1px solid var(--st-color-border);
+        background-color: var(--st-color-surface);
+        margin-top: auto; /* Pushes the footer to the bottom if the card has a fixed height */
+      }
+    `
+];
+StCard = __decorate([
+    customElement('st-card')
+], StCard);
+export { StCard };

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, PropertyValues } from "lit";
+export declare class StCheckbox extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    private _inputEl;
+    size: "sm" | "md" | "lg";
+    name: string;
+    value: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean;
+    errorMessage: string;
+    ariaLabel: string;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: PropertyValues<this>): void;
+    private _syncValidity;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    formResetCallback(): void;
+    private _handleChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-checkbox": StCheckbox;
+    }
+}
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAErB,OAAO,CAAC,QAAQ,CAAoB;IAEX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,SAAM;IACzB,KAAK,SAAQ;IAEG,OAAO,UAAS;IAChB,aAAa,UAAS;IAEtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjC,YAAY,SAAM;IAEP,SAAS,SAAM;IAEpD,cAWC;IAED,MAAM,CAAC,MAAM,4BA6GX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAWvD;IAED,OAAO,CAAC,aAAa;IAmBd,aAAa,IAAI,OAAO,CAkB9B;IAEM,cAAc,IAAI,OAAO,CAK/B;IAED,iBAAiB,SAMhB;IAED,OAAO,CAAC,aAAa;IAkBrB,MAAM,yCAwBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}