secure-ui-components 0.2.2 → 0.2.4

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

@@ -121,11 +121,77 @@ label {
 
 @media (prefers-reduced-motion: reduce) {
   .input-field,
-  .error-container {
+  .error-container,
+  .threat-container {
     transition: none !important;
   }
 }
 
+/* Threat Feedback Container */
+.threat-container {
+  margin-top: var(--secure-ui-form-error-margin-top);
+  font-size: var(--secure-ui-error-font-size);
+  color: var(--secure-ui-color-warning);
+  line-height: var(--secure-ui-line-height-normal);
+  overflow: hidden;
+  max-height: 40px;
+  opacity: 1;
+  transform: translateY(0);
+  transition: all 0.5s ease-in-out;
+  display: flex;
+  align-items: center;
+  gap: var(--secure-ui-space-1, 4px);
+  flex-wrap: wrap;
+}
+
+.threat-container.hidden {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-4px);
+  margin-top: 0;
+  transition: all 0.2s ease-in-out;
+}
+
+.threat-message {
+  flex: 1;
+  min-width: 0;
+}
+
+.threat-badge {
+  display: inline-block;
+  padding: var(--secure-ui-badge-padding);
+  font-size: var(--secure-ui-badge-font-size);
+  font-weight: var(--secure-ui-font-weight-semibold);
+  border-radius: var(--secure-ui-badge-border-radius);
+  background-color: color-mix(in srgb, var(--secure-ui-color-warning) 12%, transparent);
+  color: var(--secure-ui-color-warning);
+  border: var(--secure-ui-border-width-thin) solid currentColor;
+  font-family: var(--secure-ui-font-family-mono, monospace);
+  white-space: nowrap;
+}
+
+.threat-tier {
+  display: inline-block;
+  padding: var(--secure-ui-badge-padding);
+  font-size: var(--secure-ui-badge-font-size);
+  font-weight: var(--secure-ui-font-weight-semibold);
+  border-radius: var(--secure-ui-badge-border-radius);
+  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);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* Threat state on the input field */
+.input-field.threat {
+  border-color: var(--secure-ui-color-warning) !important;
+}
+
+.input-field.threat:focus {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--secure-ui-color-warning) 25%, transparent);
+}
+
 /* Security Tier-Specific Styles */
 /* :host([security-tier="public"]) .input-field {
   border-color: var(--secure-ui-tier-public);

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

@@ -29,6 +29,7 @@
  * @license MIT
  */
 import { SecureBaseComponent } from '../../core/base-component.js';
+import type { SecurityTierValue } from '../../core/types.js';
 /**
  * Secure Input Web Component
  *
@@ -105,6 +106,19 @@ export declare class SecureInput extends SecureBaseComponent {
      * @public
      */
     blur(): void;
+    /**
+     * Show inline threat feedback inside the component's shadow DOM.
+     * Called by the base class when a threat is detected and threat-feedback is set.
+     * Uses a separate container from validation errors so #clearErrors() does not
+     * clobber an active threat message.
+     * @protected
+     */
+    protected showThreatFeedback(patternId: string, tier: SecurityTierValue): void;
+    /**
+     * Clear the threat feedback container.
+     * @protected
+     */
+    protected clearThreatFeedback(): void;
     /**
      * Cleanup on disconnect
      */

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

@@ -1 +1 @@
-{"version":3,"file":"secure-input.d.ts","sourceRoot":"","sources":["../../../src/components/secure-input/secure-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGnE;;;;;;;;GAQG;AACH,qBAAa,WAAY,SAAQ,mBAAmB;;IA2ClD;;;;OAIG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAcxC;IAED;;OAEG;;IAKH;;;;;;;;OAQG;IACH,SAAS,CAAC,MAAM,IAAI,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAmoBzD;;;;OAIG;IACH,SAAS,CAAC,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAkBtG;;;;;;;OAOG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;;OAIG;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;;;OAIG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;;;OAIG;IACH,IAAI,KAAK,IAAI,OAAO,CAyDnB;IAED;;;;OAIG;IACH,KAAK,IAAI,IAAI;IAMb;;;;OAIG;IACH,IAAI,IAAI,IAAI;IAMZ;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAS7B;AAKD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"secure-input.d.ts","sourceRoot":"","sources":["../../../src/components/secure-input/secure-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D;;;;;;;;GAQG;AACH,qBAAa,WAAY,SAAQ,mBAAmB;;IAkDlD;;;;OAIG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAcxC;IAED;;OAEG;;IAKH;;;;;;;;OAQG;IACH,SAAS,CAAC,MAAM,IAAI,gBAAgB,GAAG,WAAW,GAAG,IAAI;IA6oBzD;;;;OAIG;IACH,SAAS,CAAC,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAkBtG;;;;;;;OAOG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;;OAIG;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;;;OAIG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;;;OAIG;IACH,IAAI,KAAK,IAAI,OAAO,CAyDnB;IAED;;;;OAIG;IACH,KAAK,IAAI,IAAI;IAMb;;;;OAIG;IACH,IAAI,IAAI,IAAI;IAMZ;;;;;;OAMG;cACgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,GAAG,IAAI;IA8BvF;;;OAGG;cACgB,mBAAmB,IAAI,IAAI;IAY9C;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAS7B;AAKD,eAAe,WAAW,CAAC"}