@salmexio/ui 0.1.1 → 0.2.0

package/dist/styles/tokens.css

@@ -10,110 +10,111 @@
 	/* ========================================
 	   BASQUIAT × WIN2K COLORS
 	   ======================================== */
-	
+
 	/* Primary Palette - Bold & Vibrant (not safe corporate colors) */
-	--salmex-crown-yellow: 255 220 0;        /* Basquiat's crown gold */
-	--salmex-street-yellow: 230 180 0;       /* Lighter golden yellow for light mode */
-	--salmex-electric-blue: 0 112 255;       /* Vibrant, not muted */
-	--salmex-street-red: 237 28 36;          /* Graffiti red */
-	--salmex-midnight-black: 18 18 18;       /* Deep black canvas */
-	--salmex-chalk-white: 248 248 240;       /* Slightly off-white, like canvas */
-	
+	--salmex-crown-yellow: 255 220 0; /* Basquiat's crown gold */
+	--salmex-street-yellow: 230 180 0; /* Lighter golden yellow for light mode */
+	--salmex-electric-blue: 0 112 255; /* Vibrant, not muted */
+	--salmex-street-red: 237 28 36; /* Graffiti red */
+	--salmex-midnight-black: 18 18 18; /* Deep black canvas */
+	--salmex-chalk-white: 248 248 240; /* Slightly off-white, like canvas */
+
 	/* Window Chrome - Rougher, Less Perfect */
-	--salmex-window-surface: 230 225 210;    /* Aged paper/canvas feel */
-	--salmex-titlebar-bold: 0 90 200;        /* Strong blue, less corporate */
-	--salmex-frame-dark: 40 40 40;           /* Dark frame, not gray */
-	
+	--salmex-window-surface: 230 225 210; /* Aged paper/canvas feel */
+	--salmex-titlebar-bold: 0 90 200; /* Strong blue, less corporate */
+	--salmex-frame-dark: 40 40 40; /* Dark frame, not gray */
+
 	/* Button Face - Textured */
-	--salmex-button-face: 235 230 215;       /* Canvas-like surface */
-	--salmex-button-shadow: 80 80 80;        /* Stronger shadows */
-	--salmex-button-dark-edge: 30 30 30;     /* Bold dark edges */
-	--salmex-button-highlight: 255 255 245;  /* Bright highlights */
-	--salmex-button-light: 210 205 190;      /* Subtle mid-tone */
-	
+	--salmex-button-face: 235 230 215; /* Canvas-like surface */
+	--salmex-button-shadow: 80 80 80; /* Stronger shadows */
+	--salmex-button-dark-edge: 30 30 30; /* Bold dark edges */
+	--salmex-button-highlight: 255 255 245; /* Bright highlights */
+	--salmex-button-light: 210 205 190; /* Subtle mid-tone */
+
 	/* Accent Colors - Neo-Expressionist */
-	--salmex-graffiti-pink: 255 105 180;     /* Hot pink */
-	--salmex-spray-orange: 255 140 0;        /* Bold orange */
-	--salmex-urban-green: 50 205 50;         /* Bright green */
-	--salmex-neon-purple: 148 0 211;         /* Deep purple */
-	
+	--salmex-graffiti-pink: 255 105 180; /* Hot pink */
+	--salmex-spray-orange: 255 140 0; /* Bold orange */
+	--salmex-urban-green: 50 205 50; /* Bright green */
+	--salmex-neon-purple: 148 0 211; /* Deep purple */
+
 	/* System Colors - Less Safe */
-	--salmex-selection: 255 220 0;           /* Crown yellow, not blue */
-	--salmex-hover-layer: 255 220 0;         /* Yellow hover */
-	
+	--salmex-selection: 255 220 0; /* Crown yellow, not blue */
+	--salmex-hover-layer: 255 220 0; /* Yellow hover */
+
 	/* ========================================
 	   MODERN ENHANCEMENTS
 	   ======================================== */
-	
+
 	/* Primary Brand */
-	--salmex-primary: 0 112 255;             /* Electric blue */
+	--salmex-primary: 0 112 255; /* Electric blue */
 	--salmex-primary-light: 64 150 255;
 	--salmex-primary-dark: 0 80 200;
-	
+
 	/* Semantic Colors */
 	--salmex-success: 50 205 50;
 	--salmex-warning: 255 140 0;
 	--salmex-error: 237 28 36;
 	--salmex-info: 0 112 255;
-	
+
 	/* Text Colors */
 	--salmex-text-primary: 18 18 18;
 	--salmex-text-secondary: 60 60 60;
 	--salmex-text-disabled: 140 140 140;
 	--salmex-text-inverse: 248 248 240;
-	
+
 	/* Background Colors */
 	--salmex-bg-primary: 248 248 240;
 	--salmex-bg-secondary: 235 230 215;
 	--salmex-bg-tertiary: 220 215 200;
-	--salmex-bg-canvas: 255 255 250;         /* Raw canvas */
-	
+	--salmex-bg-canvas: 255 255 250; /* Raw canvas */
+
 	/* Border Colors - Bolder */
 	--salmex-border-default: 80 80 80;
 	--salmex-border-light: 160 160 160;
 	--salmex-border-dark: 30 30 30;
-	--salmex-border-accent: 255 220 0;       /* Yellow accent borders */
-	
+	--salmex-border-accent: 255 220 0; /* Yellow accent borders */
+
 	/* ========================================
 	   FOCUS INDICATORS - Yellow, visible in both themes
 	   ======================================== */
-	
+
 	/* Light: dark inner edge + yellow ring so yellow pops on light backgrounds */
 	--salmex-focus-outline: none;
 	--salmex-focus-offset: 0;
 	--salmex-focus-style: dashed;
-	--salmex-focus-ring: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
+	--salmex-focus-ring: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px
+		rgb(var(--salmex-crown-yellow));
 	/* Thicker dashed outline fallback for outline-only usage */
 	--salmex-focus-outline-color: rgb(var(--salmex-crown-yellow));
 	--salmex-focus-outline-width: 3px;
-	
+
 	/* ========================================
 	   SPACING (Slightly Irregular - 8px base but expressive)
 	   ======================================== */
-	
+
 	--salmex-space-1: 4px;
 	--salmex-space-2: 8px;
 	--salmex-space-3: 12px;
 	--salmex-space-4: 16px;
-	--salmex-space-5: 22px;    /* Slightly off */
-	--salmex-space-6: 26px;    /* Not perfect 24 */
-	--salmex-space-8: 34px;    /* Intentionally irregular */
+	--salmex-space-5: 22px; /* Slightly off */
+	--salmex-space-6: 26px; /* Not perfect 24 */
+	--salmex-space-8: 34px; /* Intentionally irregular */
 	--salmex-space-10: 42px;
 	--salmex-space-12: 50px;
-	
+
 	/* ========================================
 	   TYPOGRAPHY - Win2K workhorse + Basquiat accents
 	   ======================================== */
-	
+
 	/* Core UI / body – dense UI, labels, long sessions (Work Sans) */
-	--salmex-font-system: 'Work Sans', 'Segoe UI', system-ui, sans-serif;
+	--salmex-font-system: "Work Sans", "Segoe UI", system-ui, sans-serif;
 	/* Display / sci-system – logos, nav, title bars, large only (Space Grotesk) */
-	--salmex-font-display: 'Space Grotesk', 'Impact', system-ui, sans-serif;
+	--salmex-font-display: "Space Grotesk", "Impact", system-ui, sans-serif;
 	/* Monospace – code, logs, debug panels (Roboto Mono) */
-	--salmex-font-mono: 'Roboto Mono', 'Consolas', 'Courier New', monospace;
+	--salmex-font-mono: "Roboto Mono", "Consolas", "Courier New", monospace;
 	/* Accent – scribble labels, notes, decorative only (Caveat Brush) */
-	--salmex-font-handwrite: 'Caveat Brush', cursive;
-	
+	--salmex-font-handwrite: "Caveat Brush", cursive;
+
 	--salmex-font-size-xs: 11px;
 	--salmex-font-size-sm: 13px;
 	--salmex-font-size-base: 14px;
@@ -121,38 +122,38 @@
 	--salmex-font-size-lg: 18px;
 	--salmex-font-size-xl: 24px;
 	--salmex-font-size-display: 32px;
-	
+
 	/* ========================================
 	   SHADOWS - Stronger, More Dramatic
 	   ======================================== */
-	
+
 	--salmex-shadow-sm: 2px 2px 0 rgb(var(--salmex-button-shadow));
-	--salmex-shadow-md: 3px 3px 0 rgb(0 0 0 / 0.3);              /* Flat, bold shadow */
-	--salmex-shadow-lg: 5px 5px 0 rgb(0 0 0 / 0.4);              /* Very bold */
+	--salmex-shadow-md: 3px 3px 0 rgb(0 0 0 / 0.3); /* Flat, bold shadow */
+	--salmex-shadow-lg: 5px 5px 0 rgb(0 0 0 / 0.4); /* Very bold */
 	--salmex-shadow-inset: inset 2px 2px 4px rgb(0 0 0 / 0.2);
-	
+
 	/* ========================================
 	   BORDER RADIUS - Minimal but Slightly Imperfect
 	   ======================================== */
-	
+
 	--salmex-radius-none: 0;
 	--salmex-radius-sm: 1px;
 	--salmex-radius-md: 2px;
 	--salmex-radius-lg: 3px;
-	--salmex-radius-rough: 0;  /* Sharp edges, Basquiat style */
-	
+	--salmex-radius-rough: 0; /* Sharp edges, Basquiat style */
+
 	/* ========================================
 	   TRANSITIONS - Snappier, More Energetic
 	   ======================================== */
-	
+
 	--salmex-transition-fast: 80ms ease-out;
 	--salmex-transition-base: 120ms ease-out;
 	--salmex-transition-slow: 180ms ease-out;
-	
+
 	/* ========================================
 	   Z-INDEX LAYERS
 	   ======================================== */
-	
+
 	--salmex-z-dropdown: 1000;
 	--salmex-z-sticky: 1020;
 	--salmex-z-fixed: 1030;
@@ -160,68 +161,68 @@
 	--salmex-z-modal: 1050;
 	--salmex-z-popover: 1060;
 	--salmex-z-tooltip: 1070;
-	
+
 	/* ========================================
 	   BASQUIAT SIGNATURE ELEMENTS
 	   ======================================== */
-	
-	--salmex-crown-symbol: '👑';              /* Basquiat's crown */
-	--salmex-annotation-style: 'handwrite';
-	--salmex-texture-noise: 0.02;             /* Slight texture/grain */
+
+	--salmex-crown-symbol: "👑"; /* Basquiat's crown */
+	--salmex-annotation-style: "handwrite";
+	--salmex-texture-noise: 0.02; /* Slight texture/grain */
 }
 
 /* ========================================
    DARK MODE (Street Art Night Mode)
    ======================================== */
 
-[data-theme='dark'] {
+[data-theme="dark"] {
 	/* Neon on black - high contrast street art */
 	--salmex-midnight-black: 10 10 10;
 	--salmex-chalk-white: 255 255 255;
-	
+
 	/* Window chrome - darker canvas */
 	--salmex-window-surface: 22 22 22;
-	--salmex-titlebar-bold: 0 140 255;       /* Brighter blue for dark mode */
+	--salmex-titlebar-bold: 0 140 255; /* Brighter blue for dark mode */
 	--salmex-button-face: 32 32 32;
 	--salmex-button-shadow: 60 60 60;
 	--salmex-button-dark-edge: 8 8 8;
 	--salmex-button-highlight: 80 80 80;
 	--salmex-button-light: 50 50 50;
-	
+
 	/* Text - high contrast */
 	--salmex-text-primary: 255 255 255;
 	--salmex-text-secondary: 200 200 200;
 	--salmex-text-disabled: 100 100 100;
-	
+
 	/* Backgrounds - darker canvas */
 	--salmex-bg-primary: 15 15 15;
 	--salmex-bg-secondary: 22 22 22;
 	--salmex-bg-tertiary: 32 32 32;
 	--salmex-bg-canvas: 18 18 18;
-	
+
 	/* Borders - more visible */
 	--salmex-border-default: 80 80 80;
 	--salmex-border-light: 60 60 60;
 	--salmex-border-dark: 120 120 120;
-	
+
 	/* Neon colors pop more in dark mode */
-	--salmex-crown-yellow: 255 240 0;        /* Brighter yellow */
-	--salmex-electric-blue: 64 150 255;      /* Lighter blue */
-	--salmex-street-red: 255 50 50;          /* Brighter red */
+	--salmex-crown-yellow: 255 240 0; /* Brighter yellow */
+	--salmex-electric-blue: 64 150 255; /* Lighter blue */
+	--salmex-street-red: 255 50 50; /* Brighter red */
 	--salmex-graffiti-pink: 255 120 200;
 	--salmex-spray-orange: 255 160 40;
 	--salmex-urban-green: 80 230 80;
 	--salmex-neon-purple: 180 40 255;
-	
+
 	/* Primary colors adjusted */
 	--salmex-primary: 64 150 255;
 	--salmex-primary-light: 100 180 255;
 	--salmex-primary-dark: 40 120 220;
-	
+
 	/* Selection/hover - neon yellow */
 	--salmex-selection: 255 240 0;
 	--salmex-hover-layer: 255 240 0;
-	
+
 	/* Focus - bright yellow ring (no dark edge needed on dark bg) */
 	--salmex-focus-outline: 2px dashed rgb(var(--salmex-crown-yellow));
 	--salmex-focus-ring: 0 0 0 3px rgb(var(--salmex-crown-yellow));
@@ -230,7 +231,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	:root:not([data-theme='light']) {
+	:root:not([data-theme="light"]) {
 		/* Same as [data-theme='dark'] */
 		--salmex-midnight-black: 10 10 10;
 		--salmex-chalk-white: 255 255 255;
@@ -276,7 +277,7 @@ body {
 }
 
 body::before {
-	content: '';
+	content: "";
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -284,8 +285,13 @@ body::before {
 	height: 100%;
 	pointer-events: none;
 	opacity: 0.03;
-	background-image: 
-		repeating-linear-gradient(0deg, transparent, transparent 2px, rgb(0 0 0 / 0.02) 2px, rgb(0 0 0 / 0.02) 4px);
+	background-image: repeating-linear-gradient(
+		0deg,
+		transparent,
+		transparent 2px,
+		rgb(0 0 0 / 0.02) 2px,
+		rgb(0 0 0 / 0.02) 4px
+	);
 	z-index: -1;
 }
 
@@ -302,17 +308,17 @@ body::before {
 }
 
 /* Light theme: dark edge + yellow in one clean ring */
-:root:not([data-theme='dark']) :focus-visible {
+:root:not([data-theme="dark"]) :focus-visible {
 	box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
 }
 
 /* Dark theme: yellow only */
-[data-theme='dark'] :focus-visible {
+[data-theme="dark"] :focus-visible {
 	box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
 }
 
 @media (prefers-color-scheme: dark) {
-	:root:not([data-theme='light']) :focus-visible {
+	:root:not([data-theme="light"]) :focus-visible {
 		box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
 	}
 }
@@ -330,7 +336,7 @@ body::before {
 		transition-duration: 0.01ms !important;
 		scroll-behavior: auto !important;
 	}
-	
+
 	:focus-visible {
 		transition: none;
 	}

package/dist/utils/keyboard.js

@@ -12,7 +12,7 @@ export const Keys = {
     ArrowLeft: 'ArrowLeft',
     ArrowRight: 'ArrowRight',
     Home: 'Home',
-    End: 'End',
+    End: 'End'
 };
 /**
  * Trap focus within a container (e.g. modal). Tab cycles inside; restores focus on deactivate.
@@ -25,7 +25,7 @@ export function createFocusTrap(container) {
         'input:not([disabled]):not([tabindex="-1"])',
         'select:not([disabled]):not([tabindex="-1"])',
         'textarea:not([disabled]):not([tabindex="-1"])',
-        '[tabindex]:not([tabindex="-1"])',
+        '[tabindex]:not([tabindex="-1"])'
     ].join(', ');
     function getFocusable() {
         return Array.from(container.querySelectorAll(focusableSelector));
@@ -58,7 +58,7 @@ export function createFocusTrap(container) {
                 previouslyFocused.focus();
             }
             previouslyFocused = null;
-        },
+        }
     };
 }
 /** Unique ID for aria attributes (per-instance safe). */