secure-ui-components 0.1.0-beta.1

package/dist/styles/tokens.css

@@ -0,0 +1,257 @@
+/**
+ * Secure-UI Design Tokens
+ *
+ * These CSS Custom Properties can be overridden at any level:
+ * - :root level (global)
+ * - Per-component level (secure-input { --var: value; })
+ * - Per-instance level (style attribute or class)
+ *
+ * Architecture: Design Tokens → Component Styles → User Overrides
+ */
+
+:host,
+:root {
+  /* ============================================
+     COLOR SYSTEM
+     ============================================ */
+
+  /* Security Tier Colors */
+  --secure-ui-tier-public: #e0e0e0;
+  --secure-ui-tier-authenticated: #2196F3;
+  --secure-ui-tier-sensitive: #FF9800;
+  --secure-ui-tier-critical: #F44336;
+
+  /* Semantic Colors */
+  --secure-ui-color-primary: #667eea;
+  --secure-ui-color-success: #10b981;
+  --secure-ui-color-warning: #f59e0b;
+  --secure-ui-color-error: #ef4444;
+  --secure-ui-color-info: #3b82f6;
+
+  /* Neutral Colors */
+  --secure-ui-color-text-primary: #1f2937;
+  --secure-ui-color-text-secondary: #6b7280;
+  --secure-ui-color-text-disabled: #9ca3af;
+  --secure-ui-color-text-inverse: #ffffff;
+
+  --secure-ui-color-bg-primary: #ffffff;
+  --secure-ui-color-bg-secondary: #f9fafb;
+  --secure-ui-color-bg-tertiary: #f3f4f6;
+  --secure-ui-color-bg-disabled: #e5e7eb;
+
+  --secure-ui-color-border: #d1d5db;
+  --secure-ui-color-border-hover: #9ca3af;
+  --secure-ui-color-border-focus: #3b82f6;
+
+  /* ============================================
+     SPACING SYSTEM
+     ============================================ */
+
+  --secure-ui-space-0: 0;
+  --secure-ui-space-1: 0.25rem;   /* 4px */
+  --secure-ui-space-2: 0.5rem;    /* 8px */
+  --secure-ui-space-3: 0.75rem;   /* 12px */
+  --secure-ui-space-4: 1rem;      /* 16px */
+  --secure-ui-space-5: 1.25rem;   /* 20px */
+  --secure-ui-space-6: 1.5rem;    /* 24px */
+  --secure-ui-space-8: 2rem;      /* 32px */
+  --secure-ui-space-10: 2.5rem;   /* 40px */
+  --secure-ui-space-12: 3rem;     /* 48px */
+
+  /* ============================================
+     TYPOGRAPHY SYSTEM
+     ============================================ */
+
+  /* Font Families */
+  --secure-ui-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --secure-ui-font-family-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
+
+  /* Font Sizes */
+  --secure-ui-font-size-xs: 0.75rem;    /* 12px */
+  --secure-ui-font-size-sm: 0.875rem;   /* 14px */
+  --secure-ui-font-size-base: 1rem;     /* 16px */
+  --secure-ui-font-size-lg: 1.125rem;   /* 18px */
+  --secure-ui-font-size-xl: 1.25rem;    /* 20px */
+  --secure-ui-font-size-2xl: 1.5rem;    /* 24px */
+  --secure-ui-font-size-3xl: 1.875rem;  /* 30px */
+
+  /* Font Weights */
+  --secure-ui-font-weight-normal: 400;
+  --secure-ui-font-weight-medium: 500;
+  --secure-ui-font-weight-semibold: 600;
+  --secure-ui-font-weight-bold: 700;
+
+  /* Line Heights */
+  --secure-ui-line-height-tight: 1.25;
+  --secure-ui-line-height-normal: 1.5;
+  --secure-ui-line-height-relaxed: 1.75;
+
+  /* ============================================
+     BORDER SYSTEM
+     ============================================ */
+
+  --secure-ui-border-width-thin: 1px;
+  --secure-ui-border-width-base: 2px;
+  --secure-ui-border-width-thick: 4px;
+
+  --secure-ui-border-radius-none: 0;
+  --secure-ui-border-radius-sm: 0.25rem;   /* 4px */
+  --secure-ui-border-radius-base: 0.375rem; /* 6px */
+  --secure-ui-border-radius-md: 0.5rem;    /* 8px */
+  --secure-ui-border-radius-lg: 0.75rem;   /* 12px */
+  --secure-ui-border-radius-xl: 1rem;      /* 16px */
+  --secure-ui-border-radius-full: 9999px;
+
+  /* ============================================
+     SHADOW SYSTEM
+     ============================================ */
+
+  --secure-ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --secure-ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --secure-ui-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --secure-ui-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --secure-ui-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --secure-ui-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  --secure-ui-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  --secure-ui-shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
+
+  /* ============================================
+     TRANSITION SYSTEM
+     ============================================ */
+
+  --secure-ui-transition-fast: 150ms;
+  --secure-ui-transition-base: 200ms;
+  --secure-ui-transition-slow: 300ms;
+
+  --secure-ui-transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --secure-ui-transition-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --secure-ui-transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ============================================
+     COMPONENT-SPECIFIC TOKENS
+     ============================================ */
+
+  /* Input Components */
+  --secure-ui-input-height: 2.5rem;        /* 40px */
+  --secure-ui-input-padding-x: var(--secure-ui-space-3);
+  --secure-ui-input-padding-y: var(--secure-ui-space-2);
+  --secure-ui-input-font-size: var(--secure-ui-font-size-sm);
+  --secure-ui-input-border-width: var(--secure-ui-border-width-base);
+  --secure-ui-input-border-radius: var(--secure-ui-border-radius-base);
+  --secure-ui-input-bg: var(--secure-ui-color-bg-primary);
+  --secure-ui-input-border-color: var(--secure-ui-color-border);
+  --secure-ui-input-border-color-hover: var(--secure-ui-color-border-hover);
+  --secure-ui-input-border-color-focus: var(--secure-ui-color-border-focus);
+  --secure-ui-input-text-color: var(--secure-ui-color-text-primary);
+  --secure-ui-input-placeholder-color: var(--secure-ui-color-text-secondary);
+  --secure-ui-input-disabled-bg: var(--secure-ui-color-bg-disabled);
+  --secure-ui-input-disabled-opacity: 0.6;
+
+  /* Textarea Components */
+  --secure-ui-textarea-min-height: 5rem;   /* 80px */
+  --secure-ui-textarea-padding: var(--secure-ui-space-2) var(--secure-ui-space-3);
+
+  /* Select Components */
+  --secure-ui-select-height: var(--secure-ui-input-height);
+  --secure-ui-select-padding: var(--secure-ui-input-padding-y) var(--secure-ui-input-padding-x);
+  --secure-ui-select-background-color: var(--secure-ui-input-bg);
+  --secure-ui-select-color: var(--secure-ui-input-text-color);
+
+  /* Button Components */
+  --secure-ui-button-height: var(--secure-ui-input-height);
+  --secure-ui-button-padding-x: var(--secure-ui-space-4);
+  --secure-ui-button-padding-y: var(--secure-ui-space-2);
+  --secure-ui-button-border-radius: var(--secure-ui-border-radius-base);
+  --secure-ui-button-font-weight: var(--secure-ui-font-weight-medium);
+
+  /* Form Components */
+  --secure-ui-form-gap: var(--secure-ui-space-4);
+  --secure-ui-form-label-margin-bottom: var(--secure-ui-space-1);
+  --secure-ui-form-error-margin-top: 0;  /*var(--secure-ui-space-1)*/
+
+  /* File Upload Components */
+  --secure-ui-upload-border-style: dashed;
+  --secure-ui-upload-border-width: var(--secure-ui-border-width-base);
+  --secure-ui-upload-padding: var(--secure-ui-space-8);
+  --secure-ui-upload-border-radius: var(--secure-ui-border-radius-lg);
+
+  /* table component */
+   --secure-ui-table-header-bg: var(--secure-ui-color-bg-secondary); 
+   --secure-ui-table-row-hover-bg: var(--secure-ui-color-bg-tertiary);
+   --secure-ui-table-border-color: var(--secure-ui-color-border);
+   --secure-ui-table-font-size: var(--secure-ui-font-size-sm);
+   --secure-ui-table-font-color: var(--secure-ui-color-text-primary);
+   --secure-ui-table-padding: var(--secure-ui-space-3);
+   --secure-ui-table-border-radius: var(--secure-ui-border-radius-md);
+   --secure-ui-td-padding: var(--secure-ui-space-3);
+   --secure-ui-th-padding: var(--secure-ui-space-3);
+   --secure-ui-table-cell-text-align: left;
+
+  /* Badge Components */
+  --secure-ui-badge-padding: var(--secure-ui-space-1) var(--secure-ui-space-2);
+  --secure-ui-badge-font-size: var(--secure-ui-font-size-xs);
+  --secure-ui-badge-border-radius: var(--secure-ui-border-radius-sm);
+
+  /* Label Components */
+  --secure-ui-label-font-size: var(--secure-ui-font-size-sm);
+  --secure-ui-label-font-weight: var(--secure-ui-font-weight-medium);
+  --secure-ui-label-color: var(--secure-ui-color-text-primary);
+
+  /* Error Message Components */
+  --error-display: block;
+  --secure-ui-error-font-size: var(--secure-ui-font-size-xs);
+  --secure-ui-error-color: var(--secure-ui-color-error);
+
+  /* ============================================
+     Z-INDEX SYSTEM
+     ============================================ */
+
+  --secure-ui-z-base: 0;
+  --secure-ui-z-dropdown: 1000;
+  --secure-ui-z-sticky: 1100;
+  --secure-ui-z-fixed: 1200;
+  --secure-ui-z-modal-backdrop: 1300;
+  --secure-ui-z-modal: 1400;
+  --secure-ui-z-popover: 1500;
+  --secure-ui-z-tooltip: 1600;
+}
+
+/* ============================================
+   DARK MODE SUPPORT
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :host,
+  :root {
+    /* Override colors for dark mode */
+    --secure-ui-color-text-primary: #f9fafb;
+    --secure-ui-color-text-secondary: #d1d5db;
+    --secure-ui-color-text-disabled: #6b7280;
+
+    --secure-ui-color-bg-primary: #1f2937;
+    --secure-ui-color-bg-secondary: #111827;
+    --secure-ui-color-bg-tertiary: #374151;
+    --secure-ui-color-bg-disabled: #4b5563;
+
+    --secure-ui-color-border: #4b5563;
+    --secure-ui-color-border-hover: #6b7280;
+    --secure-ui-color-border-focus: #60a5fa;
+
+    --secure-ui-input-bg: #1f2937;
+    --secure-ui-input-disabled-bg: #4b5563;
+  }
+}
+
+/* ============================================
+   REDUCED MOTION SUPPORT
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  :host,
+  :root {
+    --secure-ui-transition-fast: 0ms;
+    --secure-ui-transition-base: 0ms;
+    --secure-ui-transition-slow: 0ms;
+  }
+}

package/package.json

@@ -0,0 +1,118 @@
+{
+  "name": "secure-ui-components",
+  "version": "0.1.0-beta.1",
+  "description": "Security-first web component library with zero dependencies",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./secure-input": {
+      "types": "./dist/components/secure-input/secure-input.d.ts",
+      "import": "./dist/components/secure-input/secure-input.js"
+    },
+    "./secure-textarea": {
+      "types": "./dist/components/secure-textarea/secure-textarea.d.ts",
+      "import": "./dist/components/secure-textarea/secure-textarea.js"
+    },
+    "./secure-select": {
+      "types": "./dist/components/secure-select/secure-select.d.ts",
+      "import": "./dist/components/secure-select/secure-select.js"
+    },
+    "./secure-form": {
+      "types": "./dist/components/secure-form/secure-form.d.ts",
+      "import": "./dist/components/secure-form/secure-form.js"
+    },
+    "./secure-file-upload": {
+      "types": "./dist/components/secure-file-upload/secure-file-upload.d.ts",
+      "import": "./dist/components/secure-file-upload/secure-file-upload.js"
+    },
+    "./secure-datetime": {
+      "types": "./dist/components/secure-datetime/secure-datetime.d.ts",
+      "import": "./dist/components/secure-datetime/secure-datetime.js"
+    },
+    "./secure-table": {
+      "types": "./dist/components/secure-table/secure-table.d.ts",
+      "import": "./dist/components/secure-table/secure-table.js"
+    },
+    "./base-component": {
+      "types": "./dist/core/base-component.d.ts",
+      "import": "./dist/core/base-component.js"
+    },
+    "./security-config": {
+      "types": "./dist/core/security-config.d.ts",
+      "import": "./dist/core/security-config.js"
+    },
+    "./tokens.css": "./dist/styles/tokens.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "clean": "node -e \"const fs=require('fs');fs.rmSync('dist',{recursive:true,force:true})\"",
+    "typecheck": "tsc --noEmit",
+    "build:ts": "tsc",
+    "build:css": "node build/css-inliner.js",
+    "build": "npm run clean && npm run build:ts && npm run build:css",
+    "build:dev": "npm run build:ts && node build/dev-build.js",
+    "serve": "node server.js",
+    "serve:dev": "node --watch server.js",
+    "start": "npm run build && npm run serve",
+    "dev": "npm run build && npm run serve:dev",
+    "lint": "eslint src tests",
+    "lint:fix": "eslint src tests --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "size": "size-limit",
+    "audit:check": "npm audit --audit-level=high",
+    "prepublishOnly": "npm run lint && npm run typecheck && npm run test && npm run build"
+  },
+  "keywords": [
+    "web-components",
+    "security",
+    "ui",
+    "form-components",
+    "typescript",
+    "progressive-enhancement",
+    "zero-dependencies",
+    "xss-prevention",
+    "audit-logging",
+    "input-validation",
+    "shadow-dom",
+    "custom-elements"
+  ],
+  "author": "Barry Prendergast <barryprendergast@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Barryprender/Secure-UI.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Barryprender/Secure-UI/issues"
+  },
+  "homepage": "https://github.com/Barryprender/Secure-UI#readme",
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^12.0.1",
+    "@vitest/coverage-v8": "^4.0.18",
+    "axe-core": "^4.11.1",
+    "cors": "^2.8.5",
+    "eslint-plugin-security": "^4.0.0",
+    "express": "^4.18.2",
+    "happy-dom": "^20.4.0",
+    "jsdom": "^27.4.0",
+    "size-limit": "^12.0.1",
+    "typescript": "^5.5.0",
+    "typescript-eslint": "^8.57.0",
+    "vitest": "^4.0.18"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}