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

package/dist/styles/index.css

@@ -1,11 +1,14 @@
 /* src/styles/globals.css */
 :root {
-  --st-purple-50: #faf5ff;
   --st-purple-100: #f3e8ff;
+  --st-purple-200: #e9d5ff;
+  --st-purple-300: #d8b4fe;
   --st-purple-400: #c084fc;
   --st-purple-500: #a855f7;
-  --st-purple-600: #6d28d9;
-  --st-purple-700: #5b21b6;
+  --st-purple-600: #9333ea;
+  --st-purple-700: #7e22ce;
+  --st-purple-800: #6b21a8;
+  --st-purple-900: #581c87;
   --st-white: #ffffff;
   --st-gray-50: #f9fafb;
   --st-gray-100: #f3f4f6;
@@ -14,20 +17,40 @@
   --st-gray-800: #27272a;
   --st-gray-900: #18181b;
   --st-red-100: #fee2e2;
+  --st-red-200: #fecaca;
+  --st-red-300: #fca5a5;
+  --st-red-400: #f87171;
   --st-red-500: #ef4444;
   --st-red-600: #dc2626;
+  --st-red-700: #b91c1c;
+  --st-red-800: #991b1b;
   --st-red-900: #7f1d1d;
   --st-green-100: #dcfce7;
+  --st-green-200: #bbf7d0;
+  --st-green-300: #86efac;
+  --st-green-400: #4ade80;
   --st-green-500: #22c55e;
   --st-green-600: #16a34a;
+  --st-green-700: #15803d;
+  --st-green-800: #166534;
   --st-green-900: #14532d;
   --st-amber-100: #fef3c7;
+  --st-amber-200: #fde68a;
+  --st-amber-300: #fcd34d;
+  --st-amber-400: #fbbf24;
   --st-amber-500: #f59e0b;
   --st-amber-600: #d97706;
+  --st-amber-700: #b45309;
+  --st-amber-800: #92400e;
   --st-amber-900: #78350f;
   --st-blue-100: #dbeafe;
+  --st-blue-200: #bfdbfe;
+  --st-blue-300: #93c5fd;
+  --st-blue-400: #60a5fa;
   --st-blue-500: #3b82f6;
   --st-blue-600: #2563eb;
+  --st-blue-700: #1d4ed8;
+  --st-blue-800: #1e40af;
   --st-blue-900: #1e3a8a;
   --st-spacing-xs: 0.25rem;
   --st-spacing-sm: 0.5rem;
@@ -74,16 +97,20 @@
   --st-color-border: var(--st-gray-200);
   --st-color-text: var(--st-gray-900);
   --st-color-text-muted: var(--st-gray-700);
-  --st-color-primary: var(--st-purple-600);
-  --st-color-primary-hover: var(--st-purple-700);
-  --st-color-error: var(--st-red-600);
+  --st-color-primary: var(--st-purple-700);
+  --st-color-primary-text: var(--st-purple-700);
+  --st-color-error: var(--st-red-700);
+  --st-color-error-text: var(--st-red-800);
+  --st-color-success: var(--st-green-800);
+  --st-color-warning: var(--st-amber-800);
+  --st-color-info: var(--st-blue-700);
+  --st-color-info-text: var(--st-blue-800);
+  --st-color-primary-bg: var(--st-purple-100);
   --st-color-error-bg: var(--st-red-100);
-  --st-color-success: var(--st-green-600);
   --st-color-success-bg: var(--st-green-100);
-  --st-color-warning: var(--st-amber-600);
   --st-color-warning-bg: var(--st-amber-100);
-  --st-color-info: var(--st-blue-600);
   --st-color-info-bg: var(--st-blue-100);
+  --st-hover-brightness: 0.9;
 }
 :root:not([data-theme=light]),
 :root[data-theme=dark] {
@@ -93,17 +120,21 @@
   --st-color-surface-hover: color-mix(in srgb, var(--st-color-surface), white 10%);
   --st-color-border: var(--st-gray-700);
   --st-color-text: var(--st-gray-50);
-  --st-color-text-muted: var(--st-gray-200);
-  --st-color-primary: var(--st-purple-400);
-  --st-color-primary-hover: var(--st-purple-600);
-  --st-color-error: var(--st-red-500);
+  --st-color-text-muted: var(--st-gray-300);
+  --st-color-primary: var(--st-purple-300);
+  --st-color-primary-text: var(--st-color-primary);
+  --st-color-error: var(--st-red-300);
+  --st-color-error-text: var(--st-color-error);
+  --st-color-success: var(--st-green-400);
+  --st-color-warning: var(--st-amber-400);
+  --st-color-info: var(--st-blue-300);
+  --st-color-info-text: var(--st-color-info);
+  --st-color-primary-bg: rgba(147, 51, 234, 0.15);
   --st-color-error-bg: #451a1a;
-  --st-color-success: var(--st-green-500);
   --st-color-success-bg: #143620;
-  --st-color-warning: var(--st-amber-500);
   --st-color-warning-bg: #422a14;
-  --st-color-info: var(--st-blue-500);
-  --st-color-info-bg: #172a54;
+  --st-color-info-bg: #1e3a8a;
+  --st-hover-brightness: 1.3;
 }
 
 /* src/styles/index.css */

package/dist/styles/reset.js

@@ -48,3 +48,4 @@ export const resetStyles = css `
     padding: 0;
   }
 `;
+//# sourceMappingURL=reset.js.map

package/dist/styles/reset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.js","sourceRoot":"","sources":["../../src/styles/reset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.1-develop.13",
+  "version": "1.0.1-develop.14",
   "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": {

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];