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

package/src/styles/globals.css

@@ -1,58 +1,58 @@
-:root {
-  /* ==========================================================
-     Brand Primitives: Purple
-     ========================================================== */
-  --st-purple-50: #faf5ff;
-  --st-purple-100: #f3e8ff;
-  --st-purple-400: #c084fc; /* dark mode shade */
-  --st-purple-500: #a855f7;
-  --st-purple-600: #6d28d9; /* light mode shade */
-  --st-purple-700: #5b21b6;
-
-  /* ==========================================================
-     Neutral Primitives: Space Grey Scale
-     ========================================================== */
-  --st-white: #ffffff;
-  --st-gray-50: #f9fafb;
-  --st-gray-100: #f3f4f6;
-  --st-gray-200: #e5e7eb;
-  --st-gray-700: #374151;
-  --st-gray-800: #27272a;
-  --st-gray-900: #18181b;
-
-  /* ==========================================================
-     State Primitives: Red, Green, Amber, Blue
-     ========================================================== */
-  /* Error / Danger */
-  --st-red-100: #fee2e2;
-  --st-red-500: #ef4444;
-  --st-red-600: #dc2626;
-  --st-red-900: #7f1d1d;
-
-  /* Success / Validation */
-  --st-green-100: #dcfce7;
-  --st-green-500: #22c55e;
-  --st-green-600: #16a34a;
-  --st-green-900: #14532d;
-
-  /* Warning */
-  --st-amber-100: #fef3c7;
-  --st-amber-500: #f59e0b;
-  --st-amber-600: #d97706;
-  --st-amber-900: #78350f;
-
-  /* Information */
-  --st-blue-100: #dbeafe;
-  --st-blue-500: #3b82f6;
-  --st-blue-600: #2563eb;
-  --st-blue-900: #1e3a8a;
-
-  /* ==========================================================
-     Global Spacing Scale
-     ========================================================== */
-  --st-spacing-xs: 0.25rem;
-  --st-spacing-sm: 0.5rem;
-  --st-spacing-md: 1rem;
-  --st-spacing-lg: 1.5rem;
-  --st-spacing-xl: 2rem;
-}
+:root {
+  /* ==========================================================
+     Brand Primitives: Purple
+     ========================================================== */
+  --st-purple-50: #faf5ff;
+  --st-purple-100: #f3e8ff;
+  --st-purple-400: #c084fc; /* dark mode shade */
+  --st-purple-500: #a855f7;
+  --st-purple-600: #6d28d9; /* light mode shade */
+  --st-purple-700: #5b21b6;
+
+  /* ==========================================================
+     Neutral Primitives: Space Grey Scale
+     ========================================================== */
+  --st-white: #ffffff;
+  --st-gray-50: #f9fafb;
+  --st-gray-100: #f3f4f6;
+  --st-gray-200: #e5e7eb;
+  --st-gray-700: #374151;
+  --st-gray-800: #27272a;
+  --st-gray-900: #18181b;
+
+  /* ==========================================================
+     State Primitives: Red, Green, Amber, Blue
+     ========================================================== */
+  /* Error / Danger */
+  --st-red-100: #fee2e2;
+  --st-red-500: #ef4444;
+  --st-red-600: #dc2626;
+  --st-red-900: #7f1d1d;
+
+  /* Success / Validation */
+  --st-green-100: #dcfce7;
+  --st-green-500: #22c55e;
+  --st-green-600: #16a34a;
+  --st-green-900: #14532d;
+
+  /* Warning */
+  --st-amber-100: #fef3c7;
+  --st-amber-500: #f59e0b;
+  --st-amber-600: #d97706;
+  --st-amber-900: #78350f;
+
+  /* Information */
+  --st-blue-100: #dbeafe;
+  --st-blue-500: #3b82f6;
+  --st-blue-600: #2563eb;
+  --st-blue-900: #1e3a8a;
+
+  /* ==========================================================
+     Global Spacing Scale
+     ========================================================== */
+  --st-spacing-xs: 0.25rem;
+  --st-spacing-sm: 0.5rem;
+  --st-spacing-md: 1rem;
+  --st-spacing-lg: 1.5rem;
+  --st-spacing-xl: 2rem;
+}

package/src/styles/index.css

@@ -1,80 +1,80 @@
-@import "./globals.css";
-@import "./typography.css";
-@import "./theme.css";
-
-/* Hide custom elements before they are initialized */
-:not(:defined) {
-  visibility: hidden;
-}
-
-/* Base document styles for consuming apps */
-body {
-  background-color: var(--st-color-bg);
-  color: var(--st-color-text);
-  font-family: var(--st-font-family);
-  font-size: var(--st-font-size-base);
-  line-height: var(--st-line-height-normal);
-  -webkit-font-smoothing: antialiased; /* Makes fonts look sharper on Mac */
-  padding: 0;
-  margin: 0;
-}
-
-/* Base Headings */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: var(--st-color-text);
-  font-weight: var(--st-font-weight-bold);
-  line-height: var(--st-line-height-tight);
-  margin-top: 0;
-  margin-bottom: var(--st-spacing-md);
-}
-
-h1 {
-  font-size: var(--st-font-size-4xl);
-}
-h2 {
-  font-size: var(--st-font-size-3xl);
-}
-h3 {
-  font-size: var(--st-font-size-2xl);
-}
-h4 {
-  font-size: var(--st-font-size-xl);
-}
-h5 {
-  font-size: var(--st-font-size-lg);
-}
-h6 {
-  font-size: var(--st-font-size-base);
-}
-
-/* Paragraphs & Links */
-p {
-  margin-top: 0;
-  margin-bottom: var(--st-spacing-md);
-}
-
-a {
-  color: var(--st-color-primary);
-  text-decoration: none;
-  font-weight: var(--st-font-weight-medium);
-  transition: color 0.2s ease;
-}
-
-a:hover {
-  color: var(--st-color-primary-hover);
-  text-decoration: underline;
-}
-
-/* Inline Code */
-code {
-  font-family: var(--st-font-family-mono);
-  font-size: var(--st-font-size-sm);
-  background-color: var(--st-color-surface);
-  padding: var(--st-spacing-xs) var(--st-spacing-sm);
-  border-radius: 4px;
-}
+@import "./globals.css";
+@import "./typography.css";
+@import "./theme.css";
+
+/* Hide custom elements before they are initialized */
+:not(:defined) {
+  visibility: hidden;
+}
+
+/* Base document styles for consuming apps */
+body {
+  background-color: var(--st-color-bg);
+  color: var(--st-color-text);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-base);
+  line-height: var(--st-line-height-normal);
+  -webkit-font-smoothing: antialiased; /* Makes fonts look sharper on Mac */
+  padding: 0;
+  margin: 0;
+}
+
+/* Base Headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--st-color-text);
+  font-weight: var(--st-font-weight-bold);
+  line-height: var(--st-line-height-tight);
+  margin-top: 0;
+  margin-bottom: var(--st-spacing-md);
+}
+
+h1 {
+  font-size: var(--st-font-size-4xl);
+}
+h2 {
+  font-size: var(--st-font-size-3xl);
+}
+h3 {
+  font-size: var(--st-font-size-2xl);
+}
+h4 {
+  font-size: var(--st-font-size-xl);
+}
+h5 {
+  font-size: var(--st-font-size-lg);
+}
+h6 {
+  font-size: var(--st-font-size-base);
+}
+
+/* Paragraphs & Links */
+p {
+  margin-top: 0;
+  margin-bottom: var(--st-spacing-md);
+}
+
+a {
+  color: var(--st-color-primary);
+  text-decoration: none;
+  font-weight: var(--st-font-weight-medium);
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--st-color-primary-hover);
+  text-decoration: underline;
+}
+
+/* Inline Code */
+code {
+  font-family: var(--st-font-family-mono);
+  font-size: var(--st-font-size-sm);
+  background-color: var(--st-color-surface);
+  padding: var(--st-spacing-xs) var(--st-spacing-sm);
+  border-radius: 4px;
+}

package/src/styles/reset.ts

@@ -1,51 +1,51 @@
-import { css } from 'lit';
-
-export const resetStyles = css`
-  /* 1. Box sizing rules */
-  :host,
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  /* 2. Prevent mobile tap highlights and set base behavior */
-  :host {
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  /* 3. Strip user-agent margins and padding */
-  body,
-  h1, h2, h3, h4, h5, h6,
-  p, figure, blockquote, dl, dd {
-    margin: 0;
-    padding: 0;
-  }
-
-  /* 4. Form elements don't inherit typography by default, force them to */
-  input,
-  button,
-  textarea,
-  select {
-    font: inherit;
-    color: inherit;
-    margin: 0;
-    padding: 0;
-  }
-
-  /* 5. Make media easier to work with */
-  img,
-  picture,
-  svg {
-    max-width: 100%;
-    display: block;
-  }
-
-  /* 6. Strip default list styling if you use lists inside components */
-  ul,
-  ol {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
+import { css } from 'lit';
+
+export const resetStyles = css`
+  /* 1. Box sizing rules */
+  :host,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* 2. Prevent mobile tap highlights and set base behavior */
+  :host {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* 3. Strip user-agent margins and padding */
+  body,
+  h1, h2, h3, h4, h5, h6,
+  p, figure, blockquote, dl, dd {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* 4. Form elements don't inherit typography by default, force them to */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* 5. Make media easier to work with */
+  img,
+  picture,
+  svg {
+    max-width: 100%;
+    display: block;
+  }
+
+  /* 6. Strip default list styling if you use lists inside components */
+  ul,
+  ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 `;

package/src/styles/theme.css

@@ -1,59 +1,59 @@
-/* ==========================================================
-   Light Mode (Default)
-   ========================================================== */
-:root,
-:root[data-theme="light"] {
-  --st-color-bg: var(--st-white);
-  --st-color-surface: var(--st-gray-50);
-  --st-color-border: var(--st-gray-200);
-  
-  --st-color-text: var(--st-gray-900);
-  --st-color-text-muted: var(--st-gray-700);
-  
-  /* Now referencing the global tokens */
-  --st-color-primary: var(--st-purple-600);
-  --st-color-primary-hover: var(--st-purple-700);
-
-  --st-color-error: var(--st-red-600);
-  --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);
-}
-
-/* ==========================================================
-   Dark Mode
-   ========================================================== */
-:root:not([data-theme="light"]),
-:root[data-theme="dark"] {
-  --st-color-bg: var(--st-gray-900);
-  --st-color-surface: var(--st-gray-800);
-  --st-color-surface-muted: color-mix(in srgb, var(--st-color-surface), black 15%); 
-  --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);
-  
-  /* Swapped to the lighter global token for contrast */
-  --st-color-primary: var(--st-purple-400);
-  --st-color-primary-hover: var(--st-purple-600);
-
-  --st-color-error: var(--st-red-500);
-  --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; 
+/* ==========================================================
+   Light Mode (Default)
+   ========================================================== */
+:root,
+:root[data-theme="light"] {
+  --st-color-bg: var(--st-white);
+  --st-color-surface: var(--st-gray-50);
+  --st-color-border: var(--st-gray-200);
+  
+  --st-color-text: var(--st-gray-900);
+  --st-color-text-muted: var(--st-gray-700);
+  
+  /* Now referencing the global tokens */
+  --st-color-primary: var(--st-purple-600);
+  --st-color-primary-hover: var(--st-purple-700);
+
+  --st-color-error: var(--st-red-600);
+  --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);
+}
+
+/* ==========================================================
+   Dark Mode
+   ========================================================== */
+:root:not([data-theme="light"]),
+:root[data-theme="dark"] {
+  --st-color-bg: var(--st-gray-900);
+  --st-color-surface: var(--st-gray-800);
+  --st-color-surface-muted: color-mix(in srgb, var(--st-color-surface), black 15%); 
+  --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);
+  
+  /* Swapped to the lighter global token for contrast */
+  --st-color-primary: var(--st-purple-400);
+  --st-color-primary-hover: var(--st-purple-600);
+
+  --st-color-error: var(--st-red-500);
+  --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; 
 }

package/src/styles/typography.css

@@ -1,26 +1,26 @@
-:root {
-  /* Font Families */
-  --st-font-family-mono: 'Consolas', 'Courier New', monospace;
-  --st-font-family: 'Inter', system-ui, -apple-system, sans-serif;
-
-  /* Font Weights */
-  --st-font-weight-regular: 400;
-  --st-font-weight-medium: 500;
-  --st-font-weight-bold: 700;
-
-  /* Font Sizes (Scale) - Assuming a 16px browser base */
-  --st-font-size-xs: 0.75rem;    /* 12px */
-  --st-font-size-sm: 0.875rem;   /* 14px */
-  --st-font-size-base: 1rem;     /* 16px */
-  --st-font-size-lg: 1.125rem;   /* 18px */
-  --st-font-size-xl: 1.25rem;    /* 20px */
-  --st-font-size-2xl: 1.5rem;    /* 24px */
-  --st-font-size-3xl: 1.875rem;  /* 30px */
-  --st-font-size-4xl: 2.25rem;   /* 36px */
-
-  /* Line Heights (Leading) */
-  --st-line-height-none: 1;
-  --st-line-height-tight: 1.25;
-  --st-line-height-normal: 1.5;
-  --st-line-height-relaxed: 1.75;
+:root {
+  /* Font Families */
+  --st-font-family-mono: 'Consolas', 'Courier New', monospace;
+  --st-font-family: 'Inter', system-ui, -apple-system, sans-serif;
+
+  /* Font Weights */
+  --st-font-weight-regular: 400;
+  --st-font-weight-medium: 500;
+  --st-font-weight-bold: 700;
+
+  /* Font Sizes (Scale) - Assuming a 16px browser base */
+  --st-font-size-xs: 0.75rem;    /* 12px */
+  --st-font-size-sm: 0.875rem;   /* 14px */
+  --st-font-size-base: 1rem;     /* 16px */
+  --st-font-size-lg: 1.125rem;   /* 18px */
+  --st-font-size-xl: 1.25rem;    /* 20px */
+  --st-font-size-2xl: 1.5rem;    /* 24px */
+  --st-font-size-3xl: 1.875rem;  /* 30px */
+  --st-font-size-4xl: 2.25rem;   /* 36px */
+
+  /* Line Heights (Leading) */
+  --st-line-height-none: 1;
+  --st-line-height-tight: 1.25;
+  --st-line-height-normal: 1.5;
+  --st-line-height-relaxed: 1.75;
 }

package/tsconfig.json

@@ -1,16 +1,16 @@
-{
-  "compilerOptions": {
-    "target": "es2021",
-    "module": "es2022",
-    "moduleResolution": "bundler",
-    "lib": ["es2021", "DOM", "DOM.Iterable"],
-    "declaration": true,
-    "declarationMap": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "strict": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false
-  },
-  "include": ["src/**/*.ts"]
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "lib": ["es2021", "DOM", "DOM.Iterable"],
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false
+  },
+  "include": ["src/**/*.ts"]
 }