secure-ui-components 0.1.0-beta.1

package/dist/components/secure-textarea/secure-textarea.css

@@ -0,0 +1,153 @@
+/**
+ * Secure Textarea Component Styles
+ * Uses design tokens for full customizability
+ */
+
+/* Container */
+.textarea-container {
+  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);
+}
+
+/* Textarea Wrapper */
+.textarea-wrapper {
+  position: relative;
+}
+
+/* Textarea Field */
+.textarea-field {
+  width: 100%;
+  min-height: var(--secure-ui-textarea-min-height);
+  padding: var(--secure-ui-textarea-padding);
+
+  font-family: var(--secure-ui-font-family-base);
+  font-size: var(--secure-ui-input-font-size);
+  line-height: var(--secure-ui-line-height-normal);
+  color: var(--secure-ui-input-text-color);
+
+  background-color: var(--secure-ui-input-bg);
+  border: var(--secure-ui-input-border-width) solid var(--secure-ui-input-border-color);
+  border-radius: var(--secure-ui-input-border-radius);
+
+  transition: all var(--secure-ui-transition-base) var(--secure-ui-transition-ease-in-out);
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.textarea-field::placeholder {
+  color: var(--secure-ui-input-placeholder-color);
+}
+
+.textarea-field:hover:not(:disabled) {
+  border-color: var(--secure-ui-input-border-color-hover);
+}
+
+.textarea-field:focus {
+  outline: none;
+  border-color: var(--secure-ui-input-border-color-focus);
+  box-shadow: var(--secure-ui-shadow-focus);
+}
+
+.textarea-field.error {
+  border-color: var(--secure-ui-color-error);
+}
+
+.textarea-field.error:focus {
+  box-shadow: var(--secure-ui-shadow-focus-error);
+}
+
+.textarea-field:read-only:not(:disabled) {
+  background-color: var(--secure-ui-color-bg-secondary);
+  cursor: default;
+  resize: none;
+}
+
+.textarea-field:disabled {
+  background-color: var(--secure-ui-input-disabled-bg);
+  cursor: not-allowed;
+  opacity: var(--secure-ui-input-disabled-opacity);
+}
+
+
+/* Character Count */
+.char-count {
+  display: block;
+  margin-top: var(--secure-ui-space-1);
+  font-size: var(--secure-ui-font-size-xs);
+  color: var(--secure-ui-color-text-secondary);
+  text-align: right;
+}
+
+.char-count.warning {
+  color: var(--secure-ui-color-warning);
+  font-weight: var(--secure-ui-font-weight-medium);
+}
+
+/* Error Container */
+.error-container {
+  margin-top: var(--secure-ui-form-error-margin-top);
+  font-size: var(--secure-ui-error-font-size);
+  color: var(--secure-ui-error-color);
+  line-height: var(--secure-ui-line-height-normal);
+  overflow: hidden;
+  max-height: 40px;
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out, max-height 0.2s ease-out, margin-top 0.2s ease-out;
+}
+
+.error-container.hidden {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-4px);
+  margin-top: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .textarea-field,
+  .error-container {
+    transition: none !important;
+  }
+}
+
+/* Security Tier Styles */
+:host([security-tier="authenticated"]) .textarea-field {
+  border-color: var(--secure-ui-tier-authenticated);
+}
+
+:host([security-tier="sensitive"]) .textarea-field {
+  border-color: var(--secure-ui-tier-sensitive);
+}
+
+:host([security-tier="critical"]) .textarea-field {
+  border-color: var(--secure-ui-tier-critical);
+}

package/dist/components/secure-textarea/secure-textarea.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @fileoverview Secure Textarea Component
+ *
+ * A security-first textarea component that implements progressive enhancement,
+ * tier-based validation, character counting, and audit logging.
+ *
+ * Progressive Enhancement Strategy:
+ * 1. Without JavaScript: Falls back to native HTML5 textarea with attributes
+ * 2. With JavaScript: Enhances with real-time validation, character limits, rate limiting
+ *
+ * Usage:
+ * <secure-textarea
+ *   security-tier="sensitive"
+ *   name="bio"
+ *   label="Biography"
+ *   rows="5"
+ *   required
+ * ></secure-textarea>
+ *
+ * Security Features:
+ * - XSS prevention via sanitization
+ * - Character counting and limits based on security tier
+ * - Rate limiting for sensitive/critical tiers
+ * - Autocomplete control based on tier
+ * - Comprehensive audit logging
+ * - Visual security indicators
+ *
+ * @module secure-textarea
+ * @license MIT
+ */
+import { SecureBaseComponent } from '../../core/base-component.js';
+/**
+ * Secure Textarea Web Component
+ *
+ * Provides a security-hardened textarea field with progressive enhancement.
+ * The component works as a standard form textarea without JavaScript and
+ * enhances with security features when JavaScript is available.
+ *
+ * @extends SecureBaseComponent
+ */
+export declare class SecureTextarea extends SecureBaseComponent {
+    #private;
+    /**
+     * Observed attributes for this component
+     *
+     * @static
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Constructor
+     */
+    constructor();
+    /**
+     * Render the textarea component
+     *
+     * Security Note: We use a native <textarea> element wrapped in our web component
+     * to ensure progressive enhancement. The native textarea 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 the current value
+     *
+     * @public
+     */
+    get value(): string;
+    /**
+     * Set the value
+     *
+     * @public
+     */
+    set value(value: string);
+    /**
+     * Get the textarea name
+     *
+     * @public
+     */
+    get name(): string;
+    /**
+     * Check if the textarea is valid
+     *
+     * @public
+     */
+    get valid(): boolean;
+    /**
+     * Focus the textarea
+     *
+     * @public
+     */
+    focus(): void;
+    /**
+     * Blur the textarea
+     *
+     * @public
+     */
+    blur(): void;
+    /**
+     * Cleanup on disconnect
+     */
+    disconnectedCallback(): void;
+}
+export default SecureTextarea;
+//# sourceMappingURL=secure-textarea.d.ts.map

package/dist/components/secure-textarea/secure-textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secure-textarea.d.ts","sourceRoot":"","sources":["../../../src/components/secure-textarea/secure-textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;;;;;;;GAQG;AACH,qBAAa,cAAe,SAAQ,mBAAmB;;IA+BrD;;;;OAIG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAcxC;IAED;;OAEG;;IAKH;;;;;;;;OAQG;IACH,SAAS,CAAC,MAAM,IAAI,gBAAgB,GAAG,WAAW,GAAG,IAAI;IA+TzD;;;;OAIG;IACH,SAAS,CAAC,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAmBtG;;;;OAIG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;;OAIG;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAKtB;IAED;;;;OAIG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;;;OAIG;IACH,IAAI,KAAK,IAAI,OAAO,CAkBnB;IAED;;;;OAIG;IACH,KAAK,IAAI,IAAI;IAMb;;;;OAIG;IACH,IAAI,IAAI,IAAI;IAMZ;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAQ7B;AAKD,eAAe,cAAc,CAAC"}