@adia-ai/web-components 0.6.35 → 0.6.37

package/components/password-strength/password-strength.a2ui.json

@@ -0,0 +1,152 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/PasswordStrength.json",
+  "title": "PasswordStrength",
+  "description": "Visual strength indicator for password inputs — 4-segment bar (weak /\nfair / good / strong) computed from a heuristic combining length,\ncharacter-class diversity, and repeat-pattern penalty. Pairs with\n`<input-ui type=\"password\">` via JS:\n  input.addEventListener('input', e => meter.value = e.target.value)\nRead-only display primitive — no form participation. Emits a\n`score-change` event when the bucket changes so consumers can gate\na submit button on `detail.satisfied` (score ≥ min-score).\n\n**Security note:** [value] is held as a JS property only, NOT\nreflected to a DOM attribute. The element stamps the bar + label\nfrom the property; the password never appears in the rendered HTML.\nDo not set the value via setAttribute (it will be no-op).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "PasswordStrength"
+    },
+    "minScore": {
+      "description": "Minimum acceptable score (0–3). The `score-change` event's\n`detail.satisfied` boolean reflects whether the current score\nmeets this threshold. Useful for gating a submit button.\n",
+      "type": "number",
+      "default": 2
+    },
+    "showLabel": {
+      "description": "Display the textual score label (\"Weak\" / \"Fair\" / \"Good\" /\n\"Strong\") below the bar. Defaults to true.\n",
+      "type": "boolean",
+      "default": true
+    },
+    "value": {
+      "description": "The password string to score. JS-property only — NOT reflected\nto a DOM attribute (so the password never leaks into rendered\nHTML). Wire to an input via `input.addEventListener('input', e =>\nmeter.value = e.target.value)`.\n",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<password-strength-ui id=\"m\"></password-strength-ui>\n<script>document.getElementById('m').value = pwd;</script>\n",
+        "why": "`value` is JS-property only; the attribute is ignored. The\npassword also shouldn't be authored into HTML at all (server\ntemplate / static page) — that defeats the purpose.\n",
+        "wrong": "<password-strength-ui value=\"hunter2\"></password-strength-ui>\n"
+      }
+    ],
+    "category": "display",
+    "composes": [],
+    "events": {
+      "score-change": {
+        "description": "Fired when the computed score crosses a bucket boundary (not on every keystroke). Detail carries the new score + label + satisfied flag.",
+        "detail": {
+          "label": "string",
+          "satisfied": "boolean",
+          "score": "number"
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Standard pairing with input-ui[type=password] via input listener.",
+        "a2ui": "[\n  {\n    \"id\": \"field\",\n    \"component\": \"Field\",\n    \"label\": \"Password\",\n    \"children\": [\"pwd\", \"meter\"]\n  },\n  {\n    \"id\": \"pwd\",\n    \"component\": \"Input\",\n    \"type\": \"password\",\n    \"name\": \"password\"\n  },\n  {\n    \"id\": \"meter\",\n    \"component\": \"PasswordStrength\"\n  }\n]\n",
+        "name": "paired-with-input"
+      }
+    ],
+    "keywords": [
+      "password-strength",
+      "strength-meter",
+      "password",
+      "strength",
+      "meter",
+      "security"
+    ],
+    "name": "UIPasswordStrength",
+    "related": [
+      "input",
+      "field",
+      "progress"
+    ],
+    "slots": {
+      "default": {
+        "description": "Optional area for requirements checklist content (e.g. <ul> of \"at least 8 characters\", \"mixed case\", etc.)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default — no value set, all segments grey.",
+        "name": "idle"
+      },
+      {
+        "description": "Value present; segments lit per score 0..3.",
+        "attribute": "data-score",
+        "name": "scored"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "password": [
+        "password-strength",
+        "strength-meter"
+      ],
+      "strength": [
+        "password-strength",
+        "meter"
+      ]
+    },
+    "tag": "password-strength-ui",
+    "tokens": {
+      "--password-strength-color-fair": {
+        "description": "Color for score=1 lit segments.",
+        "default": "var(--a-warning-bg)"
+      },
+      "--password-strength-color-good": {
+        "description": "Color for score=2 lit segments.",
+        "default": "var(--a-info-bg)"
+      },
+      "--password-strength-color-strong": {
+        "description": "Color for score=3 lit segments.",
+        "default": "var(--a-success-bg)"
+      },
+      "--password-strength-color-weak": {
+        "description": "Color for score=0 lit segments.",
+        "default": "var(--a-danger-bg)"
+      },
+      "--password-strength-gap": {
+        "description": "Gap between segments.",
+        "default": "var(--a-space-1)"
+      },
+      "--password-strength-label-fg": {
+        "description": "Label text color.",
+        "default": "var(--a-fg-muted)"
+      },
+      "--password-strength-label-size": {
+        "description": "Label font size.",
+        "default": "var(--a-ui-sm)"
+      },
+      "--password-strength-radius": {
+        "description": "Segment border radius.",
+        "default": "var(--a-radius-full)"
+      },
+      "--password-strength-segment-bg": {
+        "description": "Unlit segment background (track color).",
+        "default": "var(--a-canvas-1-scrim)"
+      },
+      "--password-strength-segment-height": {
+        "description": "Height of each bar segment.",
+        "default": "4px"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/password-strength/password-strength.class.js

@@ -0,0 +1,157 @@
+/**
+ * Non-side-effect class export for `<password-strength-ui>`.
+ *
+ * Importing this file gives you the class without auto-registering the
+ * tag. Useful for test isolation, subclassing with tag-name override,
+ * or selective composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/password-strength`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <password-strength-ui></password-strength-ui>
+ *
+ * Layout:
+ *   ▮▮▮▯  ← 4-segment bar, lit segments coloured per score
+ *   Good   ← optional text label
+ *
+ * Pair with `<input-ui type="password">`:
+ *   input.addEventListener('input', e => meter.value = e.target.value);
+ *
+ * Score buckets (heuristic):
+ *   0 Weak    — short or single-class
+ *   1 Fair    — 8+ chars OR mixed classes
+ *   2 Good    — 12+ chars + ≥3 classes
+ *   3 Strong  — 16+ chars + 4 classes
+ *
+ * NOT zxcvbn — this is a tiny first-line heuristic. For security-
+ * critical surfaces, consumers can override the score by listening
+ * to `input` on the field and setting their own `data-score` on the
+ * meter, OR by extending this class.
+ *
+ * Security: `value` is JS-property only. NOT reflected to a DOM
+ * attribute; the password never appears in rendered HTML.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+const LABELS = ['Weak', 'Fair', 'Good', 'Strong'];
+
+/**
+ * Compute a 0..3 score for the given password string.
+ * Returns -1 for empty (sentinel — caller uses to grey out the bar).
+ *
+ * Scoring rubric:
+ *   +1 length >= 8
+ *   +1 length >= 12
+ *   +1 length >= 16
+ *   +1 ≥ 2 character classes (lower / upper / digit / symbol)
+ *   +1 ≥ 3 character classes
+ *   +1 all 4 character classes
+ *   -1 contains 3+ same-char run (e.g. "aaa")
+ *   -1 password is too short (< 8 chars) — clamps score to ≤ 0
+ *
+ * Clamped to [0, 3].
+ */
+function scorePassword(pwd) {
+  if (!pwd) return -1;
+  let score = 0;
+  if (pwd.length >= 8) score++;
+  if (pwd.length >= 12) score++;
+  if (pwd.length >= 16) score++;
+
+  const classes = [
+    /[a-z]/.test(pwd),
+    /[A-Z]/.test(pwd),
+    /[0-9]/.test(pwd),
+    /[^a-zA-Z0-9]/.test(pwd),
+  ].filter(Boolean).length;
+  if (classes >= 2) score++;
+  if (classes >= 3) score++;
+  if (classes === 4) score++;
+
+  // Penalty: same-char run of 3+ (aaa, 111)
+  if (/(.)\1{2,}/.test(pwd)) score--;
+
+  // Hard floor for very short passwords — never above "Weak"
+  if (pwd.length < 8) score = Math.min(score, 0);
+
+  return Math.max(0, Math.min(3, score));
+}
+
+export class UIPasswordStrength extends UIElement {
+  static properties = {
+    // JS-property only — no `reflect: true` so the password never
+    // appears in the DOM attribute set. `dynamic: true` keeps it out
+    // of any static-attribute extraction the a2ui pipeline does.
+    value:     { type: String,  default: '' },
+    minScore:  { type: Number,  default: 2,    reflect: true, attribute: 'min-score' },
+    showLabel: { type: Boolean, default: true, reflect: true, attribute: 'show-label' },
+  };
+
+  static template = () => null;
+
+  #lastEmittedScore = -2; // sentinel — different from any valid score / -1
+
+  connected() {
+    super.connected();
+    if (!this.querySelector('[slot="bar"]')) {
+      this.innerHTML = `
+        <div slot="bar" aria-hidden="true">
+          <div slot="segment" data-i="0"></div>
+          <div slot="segment" data-i="1"></div>
+          <div slot="segment" data-i="2"></div>
+          <div slot="segment" data-i="3"></div>
+        </div>
+        <span slot="label" aria-live="polite"></span>
+      `;
+    }
+    // ARIA meter semantics
+    this.setAttribute('role', 'meter');
+    this.setAttribute('aria-valuemin', '0');
+    this.setAttribute('aria-valuemax', '3');
+  }
+
+  render() {
+    const score = scorePassword(this.value);
+
+    if (score < 0) {
+      this.removeAttribute('data-score');
+      this.removeAttribute('aria-valuenow');
+      this.setAttribute('aria-valuetext', 'Empty');
+    } else {
+      this.setAttribute('data-score', String(score));
+      this.setAttribute('aria-valuenow', String(score));
+      this.setAttribute('aria-valuetext', LABELS[score]);
+    }
+
+    // Update segment lit state via [data-lit]
+    const segments = this.querySelectorAll('[slot="segment"]');
+    segments.forEach((seg, i) => {
+      if (score >= 0 && i <= score) seg.setAttribute('data-lit', '');
+      else seg.removeAttribute('data-lit');
+    });
+
+    // Update label text
+    const labelEl = this.querySelector('[slot="label"]');
+    if (labelEl) {
+      labelEl.textContent = score >= 0 && this.showLabel !== false ? LABELS[score] : '';
+    }
+
+    // Emit score-change only on bucket transitions
+    if (score !== this.#lastEmittedScore) {
+      this.#lastEmittedScore = score;
+      this.dispatchEvent(new CustomEvent('score-change', {
+        bubbles: true,
+        detail: {
+          score,
+          label: score >= 0 ? LABELS[score] : '',
+          satisfied: score >= this.minScore,
+        },
+      }));
+    }
+  }
+}

package/components/password-strength/password-strength.css

@@ -0,0 +1,80 @@
+/* ═══════════════════════════════════════════════════════════════
+   PASSWORD-STRENGTH-UI — 4-segment strength meter + label.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (password-strength-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --password-strength-gap-default:            var(--a-space-1);
+    --password-strength-segment-height-default: 4px;
+    --password-strength-radius-default:         var(--a-radius-full);
+    --password-strength-stack-gap-default:      var(--a-space-1);
+
+    /* ── Colors ── */
+    --password-strength-segment-bg-default:     var(--a-canvas-1-scrim);
+    --password-strength-color-weak-default:     var(--a-danger-bg);
+    --password-strength-color-fair-default:     var(--a-warning-bg);
+    --password-strength-color-good-default:     var(--a-info-bg);
+    --password-strength-color-strong-default:   var(--a-success-bg);
+
+    /* ── Typography ── */
+    --password-strength-label-fg-default:       var(--a-fg-muted);
+    --password-strength-label-size-default:     var(--a-ui-sm);
+    --password-strength-label-weight-default:   var(--a-weight-medium);
+
+    /* ── Per-score label color (mirrors the lit-segment color so the
+       label visually links to the bar fill state). ── */
+    --password-strength-label-fg-weak-default:   var(--password-strength-color-weak, var(--password-strength-color-weak-default));
+    --password-strength-label-fg-fair-default:   var(--password-strength-color-fair, var(--password-strength-color-fair-default));
+    --password-strength-label-fg-good-default:   var(--password-strength-color-good, var(--password-strength-color-good-default));
+    --password-strength-label-fg-strong-default: var(--password-strength-color-strong, var(--password-strength-color-strong-default));
+  }
+
+  /* ── Host ── */
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--password-strength-stack-gap, var(--password-strength-stack-gap-default));
+    width: 100%;
+  }
+
+  /* ── Bar ── */
+  [slot="bar"] {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--password-strength-gap, var(--password-strength-gap-default));
+  }
+
+  [slot="segment"] {
+    height: var(--password-strength-segment-height, var(--password-strength-segment-height-default));
+    background: var(--password-strength-segment-bg, var(--password-strength-segment-bg-default));
+    border-radius: var(--password-strength-radius, var(--password-strength-radius-default));
+    transition: background var(--a-duration-fast) var(--a-easing);
+  }
+
+  /* ── Lit segments — color depends on host [data-score] ── */
+  :scope[data-score="0"] [slot="segment"][data-lit] { background: var(--password-strength-color-weak,   var(--password-strength-color-weak-default)); }
+  :scope[data-score="1"] [slot="segment"][data-lit] { background: var(--password-strength-color-fair,   var(--password-strength-color-fair-default)); }
+  :scope[data-score="2"] [slot="segment"][data-lit] { background: var(--password-strength-color-good,   var(--password-strength-color-good-default)); }
+  :scope[data-score="3"] [slot="segment"][data-lit] { background: var(--password-strength-color-strong, var(--password-strength-color-strong-default)); }
+
+  /* ── Label ── */
+  [slot="label"] {
+    font-size: var(--password-strength-label-size, var(--password-strength-label-size-default));
+    font-weight: var(--password-strength-label-weight, var(--password-strength-label-weight-default));
+    color: var(--password-strength-label-fg, var(--password-strength-label-fg-default));
+    min-height: 1lh;  /* prevent layout jump when label appears */
+  }
+
+  :scope[data-score="0"] [slot="label"] { color: var(--password-strength-label-fg-weak,   var(--password-strength-label-fg-weak-default)); }
+  :scope[data-score="1"] [slot="label"] { color: var(--password-strength-label-fg-fair,   var(--password-strength-label-fg-fair-default)); }
+  :scope[data-score="2"] [slot="label"] { color: var(--password-strength-label-fg-good,   var(--password-strength-label-fg-good-default)); }
+  :scope[data-score="3"] [slot="label"] { color: var(--password-strength-label-fg-strong, var(--password-strength-label-fg-strong-default)); }
+
+  /* ── Hide label when [show-label] is false-y. The class.js clears
+     the textContent in that case; this provides belt-and-suspenders. ── */
+  :scope:not([show-label]) [slot="label"] {
+    display: none;
+  }
+}

package/components/password-strength/password-strength.d.ts

@@ -0,0 +1,59 @@
+/**
+ * `<password-strength-ui>` — Visual strength indicator for password inputs — 4-segment bar (weak /
+fair / good / strong) computed from a heuristic combining length,
+character-class diversity, and repeat-pattern penalty. Pairs with
+`<input-ui type="password">` via JS:
+  input.addEventListener('input', e => meter.value = e.target.value)
+Read-only display primitive — no form participation. Emits a
+`score-change` event when the bucket changes so consumers can gate
+a submit button on `detail.satisfied` (score ≥ min-score).
+
+**Security note:** [value] is held as a JS property only, NOT
+reflected to a DOM attribute. The element stamps the bar + label
+from the property; the password never appears in the rendered HTML.
+Do not set the value via setAttribute (it will be no-op).
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/password-strength
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export interface PasswordStrengthScoreChangeEventDetail {
+  label: string;
+  satisfied: string;
+  score: string;
+}
+
+export type PasswordStrengthScoreChangeEvent = CustomEvent<PasswordStrengthScoreChangeEventDetail>;
+
+export class UIPasswordStrength extends UIElement {
+  /** Minimum acceptable score (0–3). The `score-change` event's
+`detail.satisfied` boolean reflects whether the current score
+meets this threshold. Useful for gating a submit button.
+ */
+  minScore: number;
+  /** Display the textual score label ("Weak" / "Fair" / "Good" /
+"Strong") below the bar. Defaults to true.
+ */
+  showLabel: boolean;
+  /** The password string to score. JS-property only — NOT reflected
+to a DOM attribute (so the password never leaks into rendered
+HTML). Wire to an input via `input.addEventListener('input', e =>
+meter.value = e.target.value)`.
+ */
+  value: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIPasswordStrength, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'score-change', listener: (ev: PasswordStrengthScoreChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/password-strength/password-strength.js

@@ -0,0 +1,17 @@
+/**
+ * `<password-strength-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIPasswordStrength } from '@adia-ai/web-components/components/password-strength/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIPasswordStrength } from './password-strength.class.js';
+
+defineIfFree('password-strength-ui', UIPasswordStrength);
+
+export { UIPasswordStrength };

package/components/password-strength/password-strength.yaml

@@ -0,0 +1,153 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIPasswordStrength
+tag: password-strength-ui
+status: stable
+component: PasswordStrength
+category: display
+version: 1
+description: |
+  Visual strength indicator for password inputs — 4-segment bar (weak /
+  fair / good / strong) computed from a heuristic combining length,
+  character-class diversity, and repeat-pattern penalty. Pairs with
+  `<input-ui type="password">` via JS:
+    input.addEventListener('input', e => meter.value = e.target.value)
+  Read-only display primitive — no form participation. Emits a
+  `score-change` event when the bucket changes so consumers can gate
+  a submit button on `detail.satisfied` (score ≥ min-score).
+
+  **Security note:** [value] is held as a JS property only, NOT
+  reflected to a DOM attribute. The element stamps the bar + label
+  from the property; the password never appears in the rendered HTML.
+  Do not set the value via setAttribute (it will be no-op).
+props:
+  value:
+    description: |
+      The password string to score. JS-property only — NOT reflected
+      to a DOM attribute (so the password never leaks into rendered
+      HTML). Wire to an input via `input.addEventListener('input', e =>
+      meter.value = e.target.value)`.
+    type: string
+    default: ""
+    dynamic: true
+  minScore:
+    description: |
+      Minimum acceptable score (0–3). The `score-change` event's
+      `detail.satisfied` boolean reflects whether the current score
+      meets this threshold. Useful for gating a submit button.
+    type: number
+    default: 2
+    reflect: true
+    attribute: min-score
+  showLabel:
+    description: |
+      Display the textual score label ("Weak" / "Fair" / "Good" /
+      "Strong") below the bar. Defaults to true.
+    type: boolean
+    default: true
+    reflect: true
+    attribute: show-label
+events:
+  score-change:
+    description: Fired when the computed score crosses a bucket boundary (not on every keystroke). Detail carries the new score + label + satisfied flag.
+    detail:
+      score: number
+      label: string
+      satisfied: boolean
+slots:
+  default:
+    description: Optional area for requirements checklist content (e.g. <ul> of "at least 8 characters", "mixed case", etc.).
+states:
+  - name: idle
+    description: Default — no value set, all segments grey.
+  - name: scored
+    description: Value present; segments lit per score 0..3.
+    attribute: data-score
+tokens:
+  --password-strength-segment-height:
+    description: Height of each bar segment.
+    default: 4px
+  --password-strength-gap:
+    description: Gap between segments.
+    default: var(--a-space-1)
+  --password-strength-radius:
+    description: Segment border radius.
+    default: var(--a-radius-full)
+  --password-strength-segment-bg:
+    description: Unlit segment background (track color).
+    default: var(--a-canvas-1-scrim)
+  --password-strength-color-weak:
+    description: Color for score=0 lit segments.
+    default: var(--a-danger-bg)
+  --password-strength-color-fair:
+    description: Color for score=1 lit segments.
+    default: var(--a-warning-bg)
+  --password-strength-color-good:
+    description: Color for score=2 lit segments.
+    default: var(--a-info-bg)
+  --password-strength-color-strong:
+    description: Color for score=3 lit segments.
+    default: var(--a-success-bg)
+  --password-strength-label-fg:
+    description: Label text color.
+    default: var(--a-fg-muted)
+  --password-strength-label-size:
+    description: Label font size.
+    default: var(--a-ui-sm)
+a2ui:
+  rules:
+    - rule: "Pair with <input-ui type=password> via a JS listener (input.addEventListener('input', e => meter.value = e.target.value)). The meter does NOT participate in form data — it is a display indicator."
+      reason: "Pairing contract."
+    - rule: "The score is 0 (Weak) / 1 (Fair) / 2 (Good) / 3 (Strong). [min-score] sets the threshold for the `satisfied` boolean in score-change events. Use the boolean to gate a submit button."
+      reason: "Score semantics + threshold contract."
+    - rule: "Do NOT set value via setAttribute — value is JS-property only and never appears in rendered HTML (security: avoids leaking the password into the DOM)."
+      reason: "Security contract."
+anti_patterns:
+  - wrong: |
+      <password-strength-ui value="hunter2"></password-strength-ui>
+    why: |
+      `value` is JS-property only; the attribute is ignored. The
+      password also shouldn't be authored into HTML at all (server
+      template / static page) — that defeats the purpose.
+    fix: |
+      <password-strength-ui id="m"></password-strength-ui>
+      <script>document.getElementById('m').value = pwd;</script>
+examples:
+  - name: paired-with-input
+    description: Standard pairing with input-ui[type=password] via input listener.
+    a2ui: |
+      [
+        {
+          "id": "field",
+          "component": "Field",
+          "label": "Password",
+          "children": ["pwd", "meter"]
+        },
+        {
+          "id": "pwd",
+          "component": "Input",
+          "type": "password",
+          "name": "password"
+        },
+        {
+          "id": "meter",
+          "component": "PasswordStrength"
+        }
+      ]
+keywords:
+  - password-strength
+  - strength-meter
+  - password
+  - strength
+  - meter
+  - security
+synonyms:
+  password:
+    - password-strength
+    - strength-meter
+  strength:
+    - password-strength
+    - meter
+related:
+  - input
+  - field
+  - progress