secure-ui-components 0.1.0-beta.1

package/dist/components/secure-file-upload/secure-file-upload.css

@@ -0,0 +1,334 @@
+/**
+ * Secure File Upload Component Styles
+ * Bulma-inspired design using design tokens for full customizability
+ */
+
+/* Container */
+.file-upload-container {
+  position: relative;
+  margin-bottom: var(--secure-ui-form-gap);
+  font-family: var(--secure-ui-font-family-base);
+}
+
+/* Label */
+label {
+  display: block;
+  margin-bottom: var(--secure-ui-form-label-margin-bottom);
+  font-size: var(--secure-ui-label-font-size);
+  font-weight: var(--secure-ui-label-font-weight);
+  color: var(--secure-ui-label-color);
+}
+
+.label-suffix {
+  font-weight: var(--secure-ui-font-weight-normal);
+  color: var(--secure-ui-color-text-secondary);
+  font-size: var(--secure-ui-font-size-xs);
+  margin-left: var(--secure-ui-space-1);
+}
+
+.security-badge {
+  display: inline-block;
+  padding: var(--secure-ui-badge-padding);
+  margin-left: var(--secure-ui-space-2);
+  font-size: var(--secure-ui-badge-font-size);
+  font-weight: var(--secure-ui-font-weight-semibold);
+  border-radius: var(--secure-ui-badge-border-radius);
+  text-transform: uppercase;
+  background-color: var(--secure-ui-color-bg-tertiary);
+  color: var(--secure-ui-color-text-secondary);
+  border: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+}
+
+/* Bulma-style file wrapper */
+.drop-zone {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  border-radius: var(--secure-ui-input-border-radius);
+  cursor: pointer;
+  width: 100%;
+}
+
+.drop-zone.drag-over {
+  transform: scale(1.01);
+}
+
+.drop-zone.error .file-cta {
+  border-color: var(--secure-ui-color-error);
+  color: var(--secure-ui-color-error);
+}
+
+/* Hidden native file input — positioned over the entire drop zone */
+.file-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+/* Suppress the native (now invisible) focus ring on the input itself */
+.file-input:focus {
+  outline: none;
+}
+
+/* Show a visible focus ring on the CTA when the hidden input has keyboard focus
+   (WCAG 2.4.7, 2.4.11) — also triggers on programmatic focus */
+.drop-zone:focus-within .file-cta {
+  outline: 2px solid var(--secure-ui-color-border-focus);
+  outline-offset: 2px;
+  box-shadow: var(--secure-ui-shadow-focus);
+}
+
+@media (forced-colors: active) {
+  .drop-zone:focus-within .file-cta {
+    outline: 2px solid ButtonText;
+    box-shadow: none;
+  }
+}
+
+.drop-zone-content {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  pointer-events: none;
+}
+
+/* Call-to-action button (Choose file) */
+.file-cta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--secure-ui-input-padding-y) var(--secure-ui-input-padding-x);
+  background-color: var(--secure-ui-color-bg-secondary);
+  border: var(--secure-ui-input-border-width) solid var(--secure-ui-input-border-color);
+  border-radius: var(--secure-ui-input-border-radius);
+  color: var(--secure-ui-color-text-primary);
+  font-size: var(--secure-ui-input-font-size);
+  font-weight: var(--secure-ui-font-weight-medium);
+  white-space: nowrap;
+  transition: all var(--secure-ui-transition-base) var(--secure-ui-transition-ease-in-out);
+}
+
+.drop-zone:hover .file-cta {
+  background-color: var(--secure-ui-color-bg-tertiary);
+  border-color: var(--secure-ui-input-border-color-hover);
+}
+
+.drop-zone:active .file-cta {
+  background-color: var(--secure-ui-color-bg-tertiary);
+}
+
+.drop-zone.drag-over .file-cta {
+  background-color: var(--secure-ui-color-primary-light, rgba(102, 126, 234, 0.1));
+  border-color: var(--secure-ui-color-primary);
+  color: var(--secure-ui-color-primary);
+}
+
+/* Upload icon */
+.drop-icon {
+  font-size: var(--secure-ui-font-size-base);
+  margin-right: var(--secure-ui-space-2);
+  display: flex;
+  align-items: center;
+}
+
+/* Button text */
+.drop-text {
+  font-size: var(--secure-ui-font-size-base);
+}
+
+/* File name display area */
+.file-name-display {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: var(--secure-ui-input-padding-y) var(--secure-ui-input-padding-x);
+  border: var(--secure-ui-input-border-width) solid var(--secure-ui-input-border-color);
+  border-left: none;
+  border-radius: 0 var(--secure-ui-input-border-radius) var(--secure-ui-input-border-radius) 0;
+  background-color: var(--secure-ui-input-bg);
+  color: var(--secure-ui-input-placeholder-color);
+  font-size: var(--secure-ui-input-font-size);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-name-display.has-file {
+  color: var(--secure-ui-input-text-color);
+}
+
+/* When has file name, adjust CTA border radius */
+.drop-zone-content.has-name .file-cta {
+  border-radius: var(--secure-ui-input-border-radius) 0 0 var(--secure-ui-input-border-radius);
+  border-right: none;
+}
+
+/* Accepted types hint */
+.drop-hint {
+  display: block;
+  text-align: right;
+  margin-top: var(--secure-ui-space-1);
+  font-size: var(--secure-ui-font-size-xs);
+  color: var(--secure-ui-color-text-secondary);
+}
+
+/* Preview container for selected files */
+.preview-container {
+  margin-top: var(--secure-ui-space-3);
+}
+
+.file-preview {
+  display: flex;
+  align-items: center;
+  padding: var(--secure-ui-space-3);
+  background-color: var(--secure-ui-color-bg-secondary);
+  border: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+  border-radius: var(--secure-ui-input-border-radius);
+  margin-bottom: var(--secure-ui-space-2);
+}
+
+.file-name {
+  flex: 1;
+  font-size: var(--secure-ui-font-size-sm);
+  color: var(--secure-ui-color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-size {
+  font-size: var(--secure-ui-font-size-xs);
+  color: var(--secure-ui-color-text-secondary);
+  margin-left: var(--secure-ui-space-3);
+  white-space: nowrap;
+}
+
+.remove-file {
+  background: none;
+  border: none;
+  color: var(--secure-ui-color-error);
+  font-size: var(--secure-ui-font-size-base);
+  cursor: pointer;
+  padding: var(--secure-ui-space-1) var(--secure-ui-space-2);
+  margin-left: var(--secure-ui-space-2);
+  border-radius: var(--secure-ui-border-radius-sm);
+  transition: background-color var(--secure-ui-transition-base) var(--secure-ui-transition-ease-in-out);
+  pointer-events: auto;
+}
+
+.remove-file:hover {
+  background-color: var(--secure-ui-color-error-light, rgba(239, 68, 68, 0.1));
+}
+
+/* Error container */
+.error-container {
+  position: absolute;
+  bottom: -1rem;
+  left: 0;  
+  display: var(--error-display);
+  margin-top: var(--secure-ui-form-error-margin-top);
+  padding: var(--secure-ui-space-2) var(--secure-ui-space-3);
+  background-color: var(--secure-ui-color-error-light, rgba(239, 68, 68, 0.1));
+  border-radius: var(--secure-ui-border-radius-sm);
+  color: var(--secure-ui-color-error);
+  font-size: var(--secure-ui-error-font-size);
+}
+
+/* .error-container:not(.hidden) {
+  display: block;
+} */
+
+.error-container.hidden {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-4px);
+  margin-top: 0;
+}
+
+/* Security Tier Styles */
+/* :host([security-tier="public"]) .file-cta {
+  border-color: var(--secure-ui-tier-public);
+}
+
+:host([security-tier="public"]) .file-name-display {
+  border-color: var(--secure-ui-tier-public);
+}
+
+:host([security-tier="authenticated"]) .file-cta {
+  border-color: var(--secure-ui-tier-authenticated);
+}
+
+:host([security-tier="authenticated"]) .file-name-display {
+  border-color: var(--secure-ui-tier-authenticated);
+}
+
+:host([security-tier="authenticated"]) .security-badge {
+  background-color: rgba(33, 150, 243, 0.1);
+  color: var(--secure-ui-tier-authenticated);
+  border-color: var(--secure-ui-tier-authenticated);
+}
+
+:host([security-tier="sensitive"]) .file-cta {
+  border-color: var(--secure-ui-tier-sensitive);
+}
+
+:host([security-tier="sensitive"]) .file-name-display {
+  border-color: var(--secure-ui-tier-sensitive);
+}
+
+:host([security-tier="sensitive"]) .security-badge {
+  background-color: rgba(255, 152, 0, 0.1);
+  color: var(--secure-ui-tier-sensitive);
+  border-color: var(--secure-ui-tier-sensitive);
+}
+
+:host([security-tier="critical"]) .file-cta {
+  border-color: var(--secure-ui-tier-critical);
+}
+
+:host([security-tier="critical"]) .file-name-display {
+  border-color: var(--secure-ui-tier-critical);
+}
+
+:host([security-tier="critical"]) .security-badge {
+  background-color: rgba(244, 67, 54, 0.1);
+  color: var(--secure-ui-tier-critical);
+  border-color: var(--secure-ui-tier-critical);
+} */
+
+/* Disabled state */
+.drop-zone.disabled {
+  opacity: var(--secure-ui-input-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.drop-zone.disabled .file-cta {
+  background-color: var(--secure-ui-input-disabled-bg);
+}
+
+/* Scanning state */
+.drop-zone.scanning {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.drop-zone.scanning .file-cta {
+  border-color: var(--secure-ui-color-primary);
+}
+
+.drop-zone.scanning .file-name-display {
+  color: var(--secure-ui-color-primary);
+  animation: scanning-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes scanning-pulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}

package/dist/components/secure-file-upload/secure-file-upload.d.ts

@@ -0,0 +1,150 @@
+/**
+ * @fileoverview Secure File Upload Component
+ *
+ * A security-first file upload component that implements progressive enhancement,
+ * file type validation, size limits, scan hook integration, and audit logging.
+ *
+ * Progressive Enhancement Strategy:
+ * 1. Without JavaScript: Falls back to native HTML5 file input
+ * 2. With JavaScript: Enhances with validation, preview, drag-drop, security checks
+ *
+ * Usage:
+ * <secure-file-upload
+ *   security-tier="sensitive"
+ *   name="document"
+ *   label="Upload Document"
+ *   accept=".pdf,.doc,.docx"
+ *   max-size="5242880"
+ *   required
+ * ></secure-file-upload>
+ *
+ * Security Features:
+ * - File type validation (MIME type and extension)
+ * - File size limits based on security tier
+ * - Scan hook integration (e.g. server-side malware scanning)
+ * - Content validation before upload
+ * - Rate limiting on uploads
+ * - Comprehensive audit logging
+ * - Drag-and-drop with validation
+ * - Preview for safe file types
+ *
+ * @module secure-file-upload
+ * @license MIT
+ */
+import { SecureBaseComponent } from '../../core/base-component.js';
+/**
+ * Result returned by a scan hook function.
+ */
+export interface ScanHookResult {
+    /** Whether the file passed the scan */
+    valid: boolean;
+    /** Reason for rejection (when valid is false) */
+    reason?: string;
+}
+/**
+ * A function that scans a file and returns a pass/fail result.
+ * Typically sends the file to a server-side scanning endpoint.
+ */
+export type ScanHookFn = (file: File) => Promise<ScanHookResult>;
+/**
+ * Secure File Upload Web Component
+ *
+ * Provides a security-hardened file upload field with progressive enhancement.
+ * The component works as a standard file input without JavaScript and
+ * enhances with security features when JavaScript is available.
+ *
+ * @extends SecureBaseComponent
+ */
+export declare class SecureFileUpload extends SecureBaseComponent {
+    #private;
+    /**
+     * Observed attributes for this component
+     *
+     * @static
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Constructor
+     */
+    constructor();
+    /**
+     * Render the file upload component
+     *
+     * Security Note: We use a native <input type="file"> element wrapped in our
+     * web component to ensure progressive enhancement. The native input works
+     * without JavaScript, and we enhance it with security features when JS is available.
+     *
+     * @protected
+     */
+    protected render(): DocumentFragment | HTMLElement | null;
+    /**
+     * Handle attribute changes
+     *
+     * @protected
+     */
+    protected handleAttributeChange(name: string, _oldValue: string | null, newValue: string | null): void;
+    /**
+     * Get selected files
+     *
+     * @public
+     */
+    get files(): FileList | null;
+    /**
+     * Get the input name
+     *
+     * @public
+     */
+    get name(): string;
+    /**
+     * Check if the upload is valid
+     *
+     * @public
+     */
+    get valid(): boolean;
+    /**
+     * Clear selected files
+     *
+     * @public
+     */
+    clear(): void;
+    /**
+     * Register a scan hook function for server-side file scanning.
+     *
+     * The hook receives each selected file and must return a Promise that
+     * resolves to `{ valid: boolean; reason?: string }`. When `valid` is
+     * false the file is rejected and the reason is shown to the user.
+     *
+     * @example
+     * ```js
+     * const upload = document.querySelector('secure-file-upload');
+     * upload.setScanHook(async (file) => {
+     *   const form = new FormData();
+     *   form.append('file', file);
+     *   const res = await fetch('/api/scan', { method: 'POST', body: form });
+     *   const { clean, threat } = await res.json();
+     *   return { valid: clean, reason: threat };
+     * });
+     * ```
+     *
+     * @public
+     */
+    setScanHook(hook: ScanHookFn): void;
+    /**
+     * Check whether a scan hook is registered
+     *
+     * @public
+     */
+    get hasScanHook(): boolean;
+    /**
+     * Check whether a scan is currently in progress
+     *
+     * @public
+     */
+    get scanning(): boolean;
+    /**
+     * Cleanup on disconnect
+     */
+    disconnectedCallback(): void;
+}
+export default SecureFileUpload;
+//# sourceMappingURL=secure-file-upload.d.ts.map

package/dist/components/secure-file-upload/secure-file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secure-file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/secure-file-upload/secure-file-upload.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGnE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,KAAK,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;AAEjE;;;;;;;;GAQG;AACH,qBAAa,gBAAiB,SAAQ,mBAAmB;;IAyEvD;;;;OAIG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAWxC;IAED;;OAEG;;IAKH;;;;;;;;OAQG;IACH,SAAS,CAAC,MAAM,IAAI,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAkvBzD;;;;OAIG;IACH,SAAS,CAAC,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IActG;;;;OAIG;IACH,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,CAE3B;IAED;;;;OAIG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;;;OAIG;IACH,IAAI,KAAK,IAAI,OAAO,CAQnB;IAED;;;;OAIG;IACH,KAAK,IAAI,IAAI;IAIb;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAUnC;;;;OAIG;IACH,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED;;;;OAIG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAS7B;AAKD,eAAe,gBAAgB,CAAC"}