@birdapi/velinstyle 1.2.1 → 1.2.2

package/components/velin-otp-input.js

@@ -0,0 +1,220 @@
+import { escapeHTML } from './sanitize.js';
+import { SHADOW_A11Y_STYLES } from './shadow-a11y-styles.js';
+
+const styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-2, 0.5rem);
+  }
+  input {
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    text-align: center;
+    font: inherit;
+    font-size: var(--velin-text-lg, 1.25rem);
+    font-weight: var(--velin-weight-semibold, 600);
+    color: var(--velin-color-text, #111);
+    background: var(--velin-color-surface-bright, #fff);
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    padding: 0;
+  }
+  input:focus-visible {
+    outline: 3px solid var(--velin-color-focus, #2563eb);
+    outline-offset: 2px;
+  }
+  input:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  @media (forced-colors: active) {
+    input { border: 1px solid ButtonText; }
+  }
+`;
+
+function digitsOnly(value) {
+  return String(value || '').replace(/\D/g, '');
+}
+
+class VelinOtpInput extends HTMLElement {
+  static get observedAttributes() {
+    return ['length', 'value', 'disabled', 'name', 'autocomplete', 'label'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._onInput = this._onInput.bind(this);
+    this._onKeydown = this._onKeydown.bind(this);
+    this._onPaste = this._onPaste.bind(this);
+    this._onFocus = this._onFocus.bind(this);
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot.querySelector('.group')) this._render();
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    if (!this.shadowRoot.querySelector('.group')) return;
+    if (name === 'length') this._render();
+    else if (name === 'value') this._applyValue(this.getAttribute('value') || '', false);
+    else if (name === 'disabled') this._syncDisabled();
+    else if (name === 'label' || name === 'autocomplete' || name === 'name') this._syncMeta();
+  }
+
+  get value() {
+    return this._readValue();
+  }
+
+  set value(v) {
+    this.setAttribute('value', digitsOnly(v).slice(0, this._length()));
+  }
+
+  focus() {
+    const inputs = this._inputs();
+    const firstEmpty = inputs.find((i) => !i.value) || inputs[0];
+    firstEmpty?.focus();
+  }
+
+  _length() {
+    const n = parseInt(this.getAttribute('length') || '6', 10);
+    return Number.isFinite(n) && n > 0 ? Math.min(n, 12) : 6;
+  }
+
+  _inputs() {
+    return [...(this.shadowRoot?.querySelectorAll('input') || [])];
+  }
+
+  _readValue() {
+    return this._inputs().map((i) => i.value).join('');
+  }
+
+  _render() {
+    const len = this._length();
+    const label = escapeHTML(this.getAttribute('label') || 'One-time password');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="group" role="group" aria-label="${label}" part="group"></div>
+    `;
+    const group = this.shadowRoot.querySelector('.group');
+    for (let i = 0; i < len; i++) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.inputMode = 'numeric';
+      input.pattern = '[0-9]*';
+      input.maxLength = 1;
+      input.setAttribute('aria-label', `Digit ${i + 1} of ${len}`);
+      input.dataset.index = String(i);
+      input.part = 'digit';
+      input.addEventListener('input', this._onInput);
+      input.addEventListener('keydown', this._onKeydown);
+      input.addEventListener('paste', this._onPaste);
+      input.addEventListener('focus', this._onFocus);
+      group.appendChild(input);
+    }
+    this._syncMeta();
+    this._syncDisabled();
+    this._applyValue(this.getAttribute('value') || '', false);
+  }
+
+  _syncMeta() {
+    const group = this.shadowRoot?.querySelector('.group');
+    if (!group) return;
+    group.setAttribute('aria-label', this.getAttribute('label') || 'One-time password');
+    const autocomplete = this.getAttribute('autocomplete') || 'one-time-code';
+    const name = this.getAttribute('name') || '';
+    this._inputs().forEach((input, i) => {
+      input.autocomplete = i === 0 ? autocomplete : 'off';
+      input.name = name ? `${name}-${i + 1}` : '';
+    });
+  }
+
+  _syncDisabled() {
+    const disabled = this.hasAttribute('disabled');
+    this._inputs().forEach((input) => {
+      input.disabled = disabled;
+    });
+  }
+
+  _applyValue(raw, emit) {
+    const digits = digitsOnly(raw).slice(0, this._length()).split('');
+    const inputs = this._inputs();
+    inputs.forEach((input, i) => {
+      input.value = digits[i] || '';
+    });
+    if (emit) this._emit();
+  }
+
+  _emit() {
+    const value = this._readValue();
+    if (this.getAttribute('value') !== value) {
+      this.setAttribute('value', value);
+    }
+    this.dispatchEvent(new CustomEvent('velin-change', {
+      bubbles: true,
+      composed: true,
+      detail: { value },
+    }));
+    if (value.length === this._length()) {
+      this.dispatchEvent(new CustomEvent('velin-complete', {
+        bubbles: true,
+        composed: true,
+        detail: { value },
+      }));
+    }
+  }
+
+  _onInput(e) {
+    const input = e.target;
+    const cleaned = digitsOnly(input.value).slice(-1);
+    input.value = cleaned;
+    const index = Number(input.dataset.index);
+    const inputs = this._inputs();
+    if (cleaned && index < inputs.length - 1) inputs[index + 1].focus();
+    this._emit();
+  }
+
+  _onKeydown(e) {
+    const input = e.target;
+    const index = Number(input.dataset.index);
+    const inputs = this._inputs();
+    if (e.key === 'Backspace' && !input.value && index > 0) {
+      inputs[index - 1].focus();
+      inputs[index - 1].value = '';
+      this._emit();
+      e.preventDefault();
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      inputs[index - 1].focus();
+      e.preventDefault();
+    } else if (e.key === 'ArrowRight' && index < inputs.length - 1) {
+      inputs[index + 1].focus();
+      e.preventDefault();
+    }
+  }
+
+  _onPaste(e) {
+    e.preventDefault();
+    const text = digitsOnly(e.clipboardData?.getData('text') || '');
+    if (!text) return;
+    const index = Number(e.target.dataset.index);
+    const inputs = this._inputs();
+    const chars = text.split('');
+    for (let i = 0; i < chars.length && index + i < inputs.length; i++) {
+      inputs[index + i].value = chars[i];
+    }
+    const next = Math.min(index + chars.length, inputs.length - 1);
+    inputs[next]?.focus();
+    this._emit();
+  }
+
+  _onFocus(e) {
+    e.target.select?.();
+  }
+}
+
+customElements.define('velin-otp-input', VelinOtpInput);
+export default VelinOtpInput;

package/components/velin-password-strength.js

@@ -0,0 +1,147 @@
+import { SHADOW_A11Y_STYLES } from './shadow-a11y-styles.js';
+
+/**
+ * Heuristic password strength meter (same scoring as Atelier showcases).
+ * Not a substitute for server-side policy or entropy libraries.
+ */
+export function scorePassword(pw) {
+  const value = String(pw || '');
+  let score = 0;
+  if (value.length >= 8) score += 1;
+  if (value.length >= 12) score += 1;
+  if (/[A-Z]/.test(value) && /[a-z]/.test(value)) score += 1;
+  if (/\d/.test(value)) score += 1;
+  if (/[^A-Za-z0-9]/.test(value)) score += 1;
+  const labels = ['Too weak', 'Weak', 'Okay', 'Strong', 'Excellent', 'Excellent'];
+  return {
+    score,
+    label: labels[score] || 'Too weak',
+    pct: Math.min(100, score * 20),
+  };
+}
+
+const styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .wrap { display: grid; gap: var(--velin-space-2, 0.5rem); }
+  .meter {
+    inline-size: 100%;
+    block-size: 0.5rem;
+    background: var(--velin-color-surface-dim, #eee);
+    border-radius: var(--velin-radius-full, 999px);
+    overflow: hidden;
+  }
+  .bar {
+    block-size: 100%;
+    inline-size: 0%;
+    border-radius: inherit;
+    background: var(--velin-color-danger, #dc2626);
+    transition: inline-size 160ms ease, background-color 160ms ease;
+  }
+  :host([data-score="2"]) .bar,
+  :host([data-score="3"]) .bar { background: var(--velin-color-warning, #f59e0b); }
+  :host([data-score="4"]) .bar,
+  :host([data-score="5"]) .bar { background: var(--velin-color-success, #16a34a); }
+  .label {
+    margin: 0;
+    font-size: var(--velin-text-sm, 0.875rem);
+    color: var(--velin-color-text-muted, #666);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .bar { transition: none; }
+  }
+`;
+
+class VelinPasswordStrength extends HTMLElement {
+  static get observedAttributes() {
+    return ['for', 'value', 'label'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._onTargetInput = this._onTargetInput.bind(this);
+    this._target = null;
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot.querySelector('.wrap')) {
+      this.shadowRoot.innerHTML = `
+        <style>${styles}</style>
+        <div class="wrap" part="wrap">
+          <div class="meter" part="meter" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+            <div class="bar" part="bar"></div>
+          </div>
+          <p class="label" part="label" aria-live="polite"></p>
+        </div>
+      `;
+    }
+    this._bindTarget();
+    this._render(this._currentValue());
+  }
+
+  disconnectedCallback() {
+    this._unbindTarget();
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    if (name === 'for') {
+      this._bindTarget();
+      this._render(this._currentValue());
+    } else if (name === 'value' || name === 'label') {
+      this._render(this._currentValue());
+    }
+  }
+
+  _currentValue() {
+    if (this._target) return this._target.value || '';
+    return this.getAttribute('value') || '';
+  }
+
+  _unbindTarget() {
+    if (this._target) {
+      this._target.removeEventListener('input', this._onTargetInput);
+      this._target = null;
+    }
+  }
+
+  _bindTarget() {
+    this._unbindTarget();
+    const id = this.getAttribute('for');
+    if (!id || typeof document === 'undefined') return;
+    const el = document.getElementById(id);
+    if (el && 'value' in el) {
+      this._target = el;
+      this._target.addEventListener('input', this._onTargetInput);
+    }
+  }
+
+  _onTargetInput(e) {
+    this._render(e.target.value || '');
+  }
+
+  _render(pw) {
+    const result = scorePassword(pw);
+    const meter = this.shadowRoot?.querySelector('.meter');
+    const bar = this.shadowRoot?.querySelector('.bar');
+    const label = this.shadowRoot?.querySelector('.label');
+    if (!meter || !bar || !label) return;
+
+    bar.style.inlineSize = `${result.pct}%`;
+    meter.setAttribute('aria-valuenow', String(result.pct));
+    meter.setAttribute('aria-valuetext', result.label);
+    const prefix = this.getAttribute('label');
+    label.textContent = prefix ? `${prefix}: ${result.label}` : result.label;
+    this.setAttribute('data-score', String(result.score));
+
+    this.dispatchEvent(new CustomEvent('velin-strength', {
+      bubbles: true,
+      composed: true,
+      detail: result,
+    }));
+  }
+}
+
+customElements.define('velin-password-strength', VelinPasswordStrength);
+export default VelinPasswordStrength;

package/components/velin-sheet.js

@@ -1,5 +1,4 @@
 import { trapFocus, saveFocus, restoreFocus, getFocusableElements, setBackgroundInert, clearBackgroundInert } from './focus-manager.js';
-import { escapeHTML } from './sanitize.js';
 import { SHADOW_A11Y_STYLES } from './shadow-a11y-styles.js';
 
 const styles = `
@@ -31,29 +30,39 @@ const styles = `
     border-bottom: 1px solid var(--velin-color-border, #ddd);
   }
   .title { font-size: var(--velin-text-lg, 1.25rem); font-weight: 600; margin: 0; }
+  .close-btn {
+    min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
+    background: none; border: none; border-radius: var(--velin-radius-md, 0.5rem); cursor: pointer;
+    color: var(--velin-color-text-muted, #666); font-size: 1.5rem; line-height: 1;
+  }
+  .close-btn:hover { background: var(--velin-color-surface-dim, #eee); color: var(--velin-color-text, #111); }
   .body { flex: 1; overflow-y: auto; padding: var(--velin-space-5, 1.25rem); }
   @media (prefers-reduced-motion: reduce) { .overlay, .sheet { transition: none; } }
 `;
 
 class VelinSheet extends HTMLElement {
-  static get observedAttributes() { return ['open']; }
+  static get observedAttributes() { return ['open', 'title', 'label']; }
 
   constructor() {
     super();
     this.attachShadow({ mode: 'open', delegatesFocus: true });
     this._prev = null;
     this._onKey = this._onKey.bind(this);
+    this._onTitleSlot = this._onTitleSlot.bind(this);
   }
 
   connectedCallback() {
-    const title = escapeHTML(this.getAttribute('title') || this.getAttribute('label') || '');
+    if (this.shadowRoot.querySelector('.sheet')) return;
     const titleId = 'velin-sheet-title';
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="overlay" part="overlay"></div>
       <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="sheet">
         <div class="header" part="header">
-          <h2 class="title" id="${titleId}">${title}</h2>
+          <h2 class="title" id="${titleId}" part="title">
+            <slot name="title"></slot>
+            <span class="title-fallback"></span>
+          </h2>
           <button class="close-btn" aria-label="Close" part="close">&#215;</button>
         </div>
         <div class="body" part="body"><slot></slot></div>
@@ -61,11 +70,14 @@ class VelinSheet extends HTMLElement {
     `;
     this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => this.close());
     this.shadowRoot.querySelector('.overlay').addEventListener('click', () => this.close());
+    this.shadowRoot.querySelector('slot[name="title"]').addEventListener('slotchange', this._onTitleSlot);
+    this._syncTitle();
     if (this.hasAttribute('open')) this._open();
   }
 
   attributeChangedCallback(name) {
     if (name === 'open') this.hasAttribute('open') ? this._open() : this._close();
+    if (name === 'title' || name === 'label') this._syncTitle();
   }
 
   open() { this.setAttribute('open', ''); }
@@ -74,6 +86,39 @@ class VelinSheet extends HTMLElement {
     this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
   }
 
+  _syncTitle() {
+    const fallback = this.shadowRoot?.querySelector('.title-fallback');
+    if (!fallback) return;
+    fallback.textContent = this.getAttribute('title') || this.getAttribute('label') || '';
+  }
+
+  _hasTitleSlot() {
+    const slot = this.shadowRoot?.querySelector('slot[name="title"]');
+    if (!slot) return false;
+    return slot.assignedNodes({ flatten: true }).some((n) => {
+      if (n.nodeType === Node.TEXT_NODE) return Boolean(n.textContent.trim());
+      return n.nodeType === Node.ELEMENT_NODE;
+    });
+  }
+
+  _onTitleSlot() {
+    const dialog = this.shadowRoot?.querySelector('[role="dialog"]');
+    const fallback = this.shadowRoot?.querySelector('.title-fallback');
+    if (!dialog || !fallback) return;
+    if (this._hasTitleSlot()) {
+      fallback.hidden = true;
+      dialog.removeAttribute('aria-labelledby');
+      const slot = this.shadowRoot.querySelector('slot[name="title"]');
+      const label = slot.assignedNodes({ flatten: true }).map((n) => n.textContent || '').join(' ').trim();
+      if (label) dialog.setAttribute('aria-label', label);
+    } else {
+      fallback.hidden = false;
+      dialog.removeAttribute('aria-label');
+      dialog.setAttribute('aria-labelledby', 'velin-sheet-title');
+      this._syncTitle();
+    }
+  }
+
   _open() {
     this._prev = saveFocus();
     setBackgroundInert(this);

package/core/a11y/component-contracts.json

@@ -1,6 +1,6 @@
 {
   "wcagLevel": "AAA",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "components": {
     "velin-accordion": {
       "status": "pass",
@@ -111,7 +111,8 @@
       "status": "pass",
       "roles": ["dialog"],
       "keyboard": "Escape, Tab trap",
-      "requiredAttributes": []
+      "requiredAttributes": [],
+      "notes": "Reactive title attribute + slot=title."
     },
     "velin-dropdown": {
       "status": "pass",
@@ -123,6 +124,11 @@
       "roles": ["button"],
       "requiredAttributes": ["aria-label"]
     },
+    "velin-empty-state": {
+      "status": "pass",
+      "roles": ["status"],
+      "notes": "heading/description attributes or slots; actions slot for CTAs."
+    },
     "velin-form-summary": {
       "status": "pass",
       "roles": ["alert", "link"],
@@ -159,7 +165,19 @@
       "status": "pass",
       "roles": ["dialog"],
       "keyboard": "Escape, Tab trap",
-      "requiredAttributes": []
+      "requiredAttributes": [],
+      "notes": "Reactive title attribute + slot=title; footer slot."
+    },
+    "velin-otp-input": {
+      "status": "pass",
+      "roles": ["group"],
+      "keyboard": "Digits, arrows, backspace, paste",
+      "notes": "autocomplete one-time-code on first digit."
+    },
+    "velin-password-strength": {
+      "status": "pass",
+      "roles": ["progressbar"],
+      "notes": "Heuristic meter; aria-live label; for= links to password input."
     },
     "velin-persist": {
       "status": "pass",
@@ -215,7 +233,8 @@
     "velin-sheet": {
       "status": "pass",
       "roles": ["dialog"],
-      "keyboard": "Escape, Tab trap"
+      "keyboard": "Escape, Tab trap",
+      "notes": "Reactive title/label + slot=title."
     },
     "velin-sparkline": {
       "status": "pass",

package/core/meta/knowledge/components.json

@@ -201,7 +201,7 @@
       "density": ["default"],
       "themeSupport": ["light", "dark"],
       "motion": { "reducedMotionSafe": true },
-      "examples": ["<velin-modal><h2 slot=\"title\">…</h2></velin-modal>"],
+      "examples": ["<velin-modal title=\"Confirm\"></velin-modal>", "<velin-modal><h2 slot=\"title\">…</h2></velin-modal>"],
       "promptKeywords": ["modal", "dialog overlay", "popup"],
       "designIntelligence": {
         "visualWeight": 5,
@@ -491,7 +491,7 @@
       "density": ["default", "compact"],
       "themeSupport": ["light", "dark"],
       "motion": { "reducedMotionSafe": true },
-      "examples": ["<velin-drawer></velin-drawer>"],
+      "examples": ["<velin-drawer title=\"Filters\"></velin-drawer>", "<velin-drawer><span slot=\"title\">Filters</span></velin-drawer>"],
       "promptKeywords": ["drawer", "side panel", "sidebar overlay"],
       "designIntelligence": {
         "visualWeight": 4,
@@ -528,7 +528,7 @@
       "density": ["default", "compact"],
       "themeSupport": ["light", "dark"],
       "motion": { "reducedMotionSafe": true },
-      "examples": ["<velin-sheet></velin-sheet>"],
+      "examples": ["<velin-sheet title=\"Actions\"></velin-sheet>", "<velin-sheet><span slot=\"title\">Actions</span></velin-sheet>"],
       "promptKeywords": ["sheet", "bottom sheet", "action sheet"],
       "designIntelligence": {
         "visualWeight": 4,
@@ -617,6 +617,78 @@
         "commonMistakes": ["toasts for persistent form errors"],
         "bestPractices": ["auto-dismiss with pause on focus/hover"]
       }
+    },
+    {
+      "id": "velin-otp-input",
+      "kind": "web-component",
+      "tag": "velin-otp-input",
+      "category": "forms",
+      "subcategory": "otp",
+      "purpose": "Segmented one-time-password / PIN digit entry with paste and keyboard support.",
+      "family": "forms",
+      "maturity": "core",
+      "recommendedPages": ["auth", "saas"],
+      "recommendedSections": [],
+      "compatibleWith": ["css-button", "velin-form-summary", "velin-secure-field"],
+      "incompatibleWith": [],
+      "accessibility": { "role": "group", "notes": "Per-digit labels; autocomplete one-time-code" },
+      "seo": { "impact": "none" },
+      "performance": { "cost": "lazy-ok" },
+      "variants": [],
+      "density": ["default"],
+      "themeSupport": ["light", "dark"],
+      "motion": { "reducedMotionSafe": true },
+      "examples": ["<velin-otp-input length=\"6\"></velin-otp-input>"],
+      "promptKeywords": ["otp", "2fa", "pin", "one-time password"],
+      "api": { "events": ["velin-change", "velin-complete"], "attributes": ["length", "value", "disabled", "name"] }
+    },
+    {
+      "id": "velin-password-strength",
+      "kind": "web-component",
+      "tag": "velin-password-strength",
+      "category": "forms",
+      "subcategory": "password",
+      "purpose": "Heuristic password strength meter linked to an input via for= or value.",
+      "family": "forms",
+      "maturity": "core",
+      "recommendedPages": ["auth", "saas"],
+      "recommendedSections": [],
+      "compatibleWith": ["css-input", "velin-secure-field", "velin-form-summary"],
+      "incompatibleWith": [],
+      "accessibility": { "role": "progressbar", "notes": "aria-live polite label" },
+      "seo": { "impact": "none" },
+      "performance": { "cost": "lazy-ok" },
+      "variants": [],
+      "density": ["default"],
+      "themeSupport": ["light", "dark"],
+      "motion": { "reducedMotionSafe": true },
+      "examples": ["<input id=\"pw\" type=\"password\"><velin-password-strength for=\"pw\"></velin-password-strength>"],
+      "promptKeywords": ["password strength", "meter", "signup"],
+      "api": { "events": ["velin-strength"], "attributes": ["for", "value", "label"] }
+    },
+    {
+      "id": "velin-empty-state",
+      "kind": "web-component",
+      "tag": "velin-empty-state",
+      "category": "feedback",
+      "subcategory": "empty",
+      "purpose": "Consistent empty / zero-data surface with illustration, title, description, and actions slots.",
+      "family": "feedback",
+      "maturity": "core",
+      "recommendedPages": ["dashboard", "saas", "shop", "docs"],
+      "recommendedSections": [],
+      "compatibleWith": ["css-button", "velin-icon"],
+      "incompatibleWith": [],
+      "accessibility": { "role": "status" },
+      "seo": { "impact": "none" },
+      "performance": { "cost": "lazy-ok" },
+      "variants": [],
+      "density": ["default"],
+      "themeSupport": ["light", "dark"],
+      "motion": { "reducedMotionSafe": true },
+      "examples": ["<velin-empty-state heading=\"No items yet\" description=\"Create your first entry.\"><button slot=\"actions\" class=\"velin-btn velin-btn--primary\">Create</button></velin-empty-state>"],
+      "promptKeywords": ["empty state", "no results", "zero data"],
+      "api": { "attributes": ["heading", "description"], "slots": ["illustration", "title", "description", "actions"] }
     }
   ]
 }