@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.1-develop.13",
+  "version": "1.0.1-develop.15",
   "description": "",
   "main": "src/index.js",
   "types": "dist/index.d.ts",
@@ -15,6 +15,7 @@
     },
     "./button": {
       "types": "./dist/components/button/button.d.ts",
+      "development": "./src/components/button/button.ts",
       "default": "./dist/components/button/button.js"
     },
     "./styles.css": {
@@ -172,6 +173,34 @@
     "./modal": {
       "types": "./dist/components/modal/modal.d.ts",
       "default": "./dist/components/modal/modal.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/components/toggle-group/toggle-group.d.ts",
+      "default": "./dist/components/toggle-group/toggle-group.js"
+    },
+    "./calendar": {
+      "types": "./dist/components/calendar/calendar.d.ts",
+      "default": "./dist/components/calendar/calendar.js"
+    },
+    "./time-picker": {
+      "types": "./dist/components/time-picker/time-picker.d.ts",
+      "default": "./dist/components/time-picker/time-picker.js"
+    },
+    "./cron-builder": {
+      "types": "./dist/components/cron-builder/cron-builder.d.ts",
+      "default": "./dist/components/cron-builder/cron-builder.js"
+    },
+    "./pin-input": {
+      "types": "./dist/components/pin-input/pin-input.d.ts",
+      "default": "./dist/components/pin-input/pin-input.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/tooltip/tooltip.d.ts",
+      "default": "./dist/components/tooltip/tooltip.js"
+    },
+    "./popover": {
+      "types": "./dist/components/popover/popover.d.ts",
+      "default": "./dist/components/popover/popover.js"
     }
   },
   "sideEffects": [

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

@@ -0,0 +1,2 @@
+export const alertColors = ["info", "success", "warning", "error"] as const;
+export type AlertColor = typeof alertColors[number];

package/src/components/alert/alert.ts

@@ -1,12 +1,11 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import { AlertColor } from "./alert.constants.js";
 
-export type AlertColor = 'info' | 'success' | 'warning' | 'error';
-
-@customElement('st-alert')
+@customElement("st-alert")
 export class StAlert extends LitElement {
-  @property({ type: String, reflect: true }) color: AlertColor = 'info';
+  @property({type: String, reflect: true}) color: AlertColor = "info";
 
   static styles = [
     resetStyles,
@@ -19,32 +18,34 @@ export class StAlert extends LitElement {
         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-text: var(--st-color-info);
         --_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);
+        --_alert-text: 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);
+        --_alert-text: 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 */
+        --_alert-text: var(--st-color-warning);
       }
 
       /* Apply the variables */
@@ -60,7 +61,7 @@ export class StAlert extends LitElement {
         flex-shrink: 0;
         color: var(--_alert-icon);
         /* Align icon with the first line of text */
-        margin-top: 2px; 
+        margin-top: 2px;
       }
 
       ::slotted([slot="icon"]) {
@@ -79,9 +80,17 @@ export class StAlert extends LitElement {
         gap: var(--st-spacing-xs);
         flex: 1;
       }
-    `
+    `,
   ];
 
+  connectedCallback() {
+    super.connectedCallback();
+    // Ensure screen readers announce this component dynamically
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "alert");
+    }
+  }
+
   render() {
     return html`
       <div class="icon-container">
@@ -96,6 +105,6 @@ export class StAlert extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-alert': StAlert;
+    "st-alert": StAlert;
   }
-}
+}

package/src/components/badge/badge.constants.ts

@@ -0,0 +1,2 @@
+export const badgeColors = ['primary', 'neutral', 'success', 'warning', 'error', 'info'] as const;
+export type BadgeColor = typeof badgeColors[number];

package/src/components/badge/badge.ts

@@ -1,8 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
-
-export type BadgeColor = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+import { BadgeColor } from './badge.constants.js';
 
 @customElement('st-badge')
 export class StBadge extends LitElement {
@@ -39,8 +38,8 @@ export class StBadge extends LitElement {
          Soft Semantic Variants
          ========================================================== */
       :host([color="primary"]) {
-        --_badge-bg: var(--st-color-primary);
-        --_badge-text: var(--st-white);
+        --_badge-bg: var(--st-color-primary-bg);
+        --_badge-text: var(--st-color-primary-text);
         --_badge-border: transparent;
       }
 

package/src/components/breadcrumb/breadcrumb.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
 
@@ -79,7 +79,7 @@ export class StBreadcrumb extends LitElement {
           ${this.items.map((item, index) => {
             const isLast = index === this.items.length - 1;
             return html`
-              <li>
+              <li .ariaCurrent=${isLast ? 'page' : null}>
                 ${!isLast && item.href 
                   ? html`<a href=${item.href}>${item.label}</a>` 
                   : html`<span>${item.label}</span>`}

package/src/components/button/button.constants.ts

@@ -0,0 +1,8 @@
+export const buttonColors = ["default", "primary", "info", "success", "warning", "error"] as const;
+export type ButtonColor = typeof buttonColors[number];
+
+export const buttonVariants = ["solid", "outline", "secondary"] as const;
+export type ButtonVariant = typeof buttonVariants[number];
+
+export const buttonSizes = ["sm", "md", "lg"] as const;
+export type ButtonSize = typeof buttonSizes[number];

package/src/components/button/button.ts

@@ -1,10 +1,7 @@
 import {LitElement, html, css, nothing} from "lit";
 import {customElement, property} from "lit/decorators.js";
 import {resetStyles} from "../../styles/reset.js";
-
-export type ButtonVariant = "primary" | "secondary" | "outline";
-export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonColor = "primary" | "error" | "success" | "warning" | "info";
+import {ButtonColor, ButtonSize, ButtonVariant} from "./button.constants.js";
 
 @customElement("st-button")
 export class StButton extends LitElement {
@@ -12,210 +9,206 @@ export class StButton extends LitElement {
   @property({type: String}) target: "_blank" | "_self" = "_self";
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) loading = false;
-  @property({type: String, reflect: true}) variant: ButtonVariant = "primary";
+  @property({type: String, reflect: true}) variant: ButtonVariant = "solid";
+  @property({type: String, reflect: true}) color: ButtonColor = "default";
   @property({type: String, reflect: true}) size: ButtonSize = "md";
-  @property({type: String, reflect: true}) color: ButtonColor = "primary";
-  @property({ type: Boolean, reflect: true }) active = false;
-  @property({ type: String, attribute: 'aria-label' }) ariaLabel: string | null = null;
+  @property({type: Boolean, reflect: true}) active = false;
+  @property({type: String, attribute: "aria-label"}) ariaLabel: string | null = null;
+  @property({type: String, reflect: true}) type: "button" | "submit" | "reset" = "button";
+  @property({type: Boolean, reflect: true}) block = false;
 
   static 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)
+         VARIANT: SOLID (Filled background, contrasting text)
          ========================================================== */
-      :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);
+      /* 'default' consumes surface-hover and text, which naturally invert */
+      :host([variant="solid"][color="default"]) {
+        --_bg: var(--st-color-surface-hover);
+        --_text: var(--st-color-text);
+      }
+      /* Semantic colors use the semantic token for bg, and the global app bg (white/dark gray) for text */
+      :host([variant="solid"][color="primary"]) {
+        --_bg: var(--st-color-primary);
+        --_text: var(--st-color-bg);
+      }
+      :host([variant="solid"][color="error"]) {
+        --_bg: var(--st-color-error);
+        --_text: var(--st-color-bg);
+      }
+      :host([variant="solid"][color="success"]) {
+        --_bg: var(--st-color-success);
+        --_text: var(--st-color-bg);
+      }
+      :host([variant="solid"][color="warning"]) {
+        --_bg: var(--st-color-warning);
+        --_text: var(--st-color-bg);
+      }
+      :host([variant="solid"][color="info"]) {
+        --_bg: var(--st-color-info);
+        --_text: var(--st-color-bg);
+      }
+
+      :host([variant="solid"]) .btn:hover {
+        filter: brightness(var(--st-hover-brightness, 0.9));
       }
 
       /* ==========================================================
-         3. Visual Variants (Consumes the active palette)
+         VARIANT: OUTLINE (Transparent bg, semantic text/border)
          ========================================================== */
+      :host([variant="outline"]) {
+        --_bg: transparent;
+      }
+      :host([variant="outline"][color="default"]) {
+        --_border: var(--st-gray-500, #71717a);
+        --_text: var(--st-color-text);
+      }
+      :host([variant="outline"][color="primary"]) {
+        --_border: var(--st-color-primary-text);
+        --_text: var(--st-color-primary-text);
+      }
+      :host([variant="outline"][color="error"]) {
+        --_border: var(--st-color-error-text);
+        --_text: var(--st-color-error-text);
+      }
+      :host([variant="outline"][color="success"]) {
+        --_border: var(--st-color-success);
+        --_text: var(--st-color-success);
+      }
+      :host([variant="outline"][color="warning"]) {
+        --_border: var(--st-color-warning);
+        --_text: var(--st-color-warning);
+      }
+      :host([variant="outline"][color="info"]) {
+        --_border: var(--st-color-info-text);
+        --_text: var(--st-color-info-text);
+      }
 
-      /* 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;
+      :host([variant="outline"]) .btn:hover {
+        background-color: var(--st-color-surface-hover);
       }
 
-      /* 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;
+      /* ==========================================================
+         VARIANT: SECONDARY (Soft background, semantic text)
+         ========================================================== */
+      :host([variant="secondary"][color="default"]) {
+        --_bg: var(--st-color-surface);
+        --_text: var(--st-color-text);
+      }
+      :host([variant="secondary"][color="primary"]) {
+        --_bg: var(--st-color-primary-bg);
+        --_text: var(--st-color-primary-text);
+      }
+      :host([variant="secondary"][color="error"]) {
+        --_bg: var(--st-color-error-bg);
+        --_text: var(--st-color-error-text);
+      }
+      :host([variant="secondary"][color="success"]) {
+        --_bg: var(--st-color-success-bg);
+        --_text: var(--st-color-success);
+      }
+      :host([variant="secondary"][color="warning"]) {
+        --_bg: var(--st-color-warning-bg);
+        --_text: var(--st-color-warning);
+      }
+      :host([variant="secondary"][color="info"]) {
+        --_bg: var(--st-color-info-bg);
+        --_text: var(--st-color-info-text);
       }
 
-      /* Outline Variant */
-      :host([variant="outline"]) {
-        --_btn-bg: transparent;
-        --_btn-bg-hover: var(--_palette-surface);
-        --_btn-text: var(--_palette-base);
-        --_btn-border: var(--_palette-base);
+      :host([variant="secondary"]) .btn:hover {
+        filter: brightness(var(--st-hover-brightness, 0.9));
       }
 
       /* ==========================================================
-         4. Size Variants
+         LAYOUT, SIZE & BASE APPLICATION
          ========================================================== */
+      :host([block]) {
+        display: block;
+        width: 100%;
+      }
+      :host([block]) .btn {
+        width: 100%;
+      }
+
       :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);
+        background-color: var(--_bg);
+        color: var(--_text);
+        border: 1px solid var(--_border, transparent);
+
         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);
+        font-weight: var(--st-font-weight-medium, 500);
         transition: all 0.2s ease;
-        padding: 0.5rem 1rem;
+        text-decoration: none;
 
-        /* 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 */
+        background-color: var(--_bg); /* Retain base background */
       }
 
-      /* ==========================================================
-         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 */
+        outline: none;
+        box-shadow:
+          0 0 0 2px var(--st-color-bg, #ffffff),
+          0 0 0 4px var(--st-color-primary);
+        z-index: 1;
       }
 
-      /* ==========================================================
-         Physical Active State (Mouse down)
-         ========================================================== */
       .btn:active {
         transform: scale(0.98);
       }
 
-      /* Disabled & Loading */
       :host([disabled]),
       :host([loading]) {
         pointer-events: none;
       }
 
-      :host([disabled]) button {
+      :host([disabled]) .btn {
         opacity: 0.5;
         cursor: not-allowed;
       }
 
-      :host([loading]) button {
+      :host([loading]) .btn {
         opacity: 0.8;
       }
 
-      /* Icons & Spinner */
       ::slotted(svg),
       svg.spinner {
         width: 1.25em;
@@ -239,39 +232,86 @@ export class StButton extends LitElement {
     `,
   ];
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._handleClick);
+  }
+
   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}
+      return html`<a
+        href="${this.href}"
+        target="${this.target}"
+        class="btn"
+        aria-label=${this.ariaLabel || nothing}
         >${content}</a
       >`;
     }
 
+    // ADDED: Passing this.type to the native button element
     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>`}
+      <button
+        class="btn"
+        type="${this.type}"
+        ?disabled=${this.disabled || this.loading}
+        @click="${this._handleClick}"
+      >
+        ${this.renderLoadingSpinner()}
+        ${this.renderPrefixSlot()}
         ${content}
         <slot name="suffix"></slot>
       </button>
     `;
   }
+
+  private renderLoadingSpinner() {
+    if (!this.loading) {
+      return html``;
+    }
+
+    return 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>`;
+  }
+
+  private renderPrefixSlot() {
+    if (this.loading) {
+      return html``;
+    }
+
+    return html`<slot name="prefix"></slot>`;
+  }
+
+  private _handleClick(e: MouseEvent) {
+    if (this.disabled || this.loading) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    if (this.type === "submit") {
+      const form = this.closest("form");
+      if (form) {
+        e.preventDefault(); // Prevent duplicate events
+        form.requestSubmit(); // Natively triggers the form's submit event and validation
+      }
+    } else if (this.type === "reset") {
+      const form = this.closest("form");
+      if (form) {
+        e.preventDefault();
+        form.reset();
+      }
+    }
+  }
 }
 
 declare global {