@birdapi/velinstyle 1.2.0 → 1.2.2

package/dist/chunks/velin-password-strength-TAXMLSED.js

@@ -0,0 +1,136 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+
+// components/velin-password-strength.js
+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)
+  };
+}
+var 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; }
+  }
+`;
+var VelinPasswordStrength = class 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);
+var velin_password_strength_default = VelinPasswordStrength;
+export {
+  velin_password_strength_default as default,
+  scorePassword
+};

package/dist/chunks/velin-sheet-N2VVYXFP.js

@@ -0,0 +1,157 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+
+// components/velin-sheet.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: contents; }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--velin-z-overlay, 400);
+    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
+    opacity: 0; visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .sheet {
+    position: fixed; inset-inline: 0; inset-block-end: 0;
+    z-index: var(--velin-z-modal, 500);
+    max-block-size: min(85vh, 32rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem) var(--velin-radius-lg, 0.75rem) 0 0;
+    box-shadow: var(--velin-shadow-xl, 0 -4px 24px rgba(0,0,0,0.12));
+    display: flex; flex-direction: column;
+    transform: translateY(100%);
+    transition: transform 250ms ease;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+  }
+  :host([open]) .sheet { transform: translateY(0); }
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--velin-space-4, 1rem) var(--velin-space-5, 1.25rem);
+    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; } }
+`;
+var VelinSheet = class extends HTMLElement {
+  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() {
+    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}" 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>
+      </div>
+    `;
+    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", "");
+  }
+  close() {
+    this.removeAttribute("open");
+    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);
+    document.addEventListener("keydown", this._onKey);
+    requestAnimationFrame(() => {
+      const f = getFocusableElements(this.shadowRoot);
+      if (f.length) f[0].focus();
+    });
+  }
+  _close() {
+    document.removeEventListener("keydown", this._onKey);
+    clearBackgroundInert(this);
+    restoreFocus(this._prev);
+  }
+  _onKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    trapFocus(this.shadowRoot, e);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKey);
+    clearBackgroundInert(this);
+  }
+};
+customElements.define("velin-sheet", VelinSheet);
+var velin_sheet_default = VelinSheet;
+export {
+  velin_sheet_default as default
+};

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# VelinStyle 1.2.0
+# VelinStyle 1.2.2
 
 > VelinStyle is a CSS framework with WCAG 2.2 AAA-oriented defaults, native JavaScript runtime, and Web Components.
 > Full machine context: https://velinstyle.info/dist/velin-agent.json
@@ -9,9 +9,9 @@
 - VelinStyle is a CSS framework with WCAG 2.2 AAA-oriented defaults, native JavaScript runtime, and Web Components.
 - Pipeline: Core Foundation → Design System → Knowledge Graph → Prompt Engine → Review Engine → AI Metadata
 - Maturity: CSS/Web Components/runtime = stable; plan/review, knowledge graph, page/section registry, agent metadata = beta/foundation (seed, expanding); Studio + Utility Engine generator = planned
-- Components: 40 canonical Web Components (`velin-*`); 42 lazy-loader entries
-- Knowledge graph: 17 component nodes, 17 page types, 12 sections, 3 design constraint packs
-- HTML attributes: 27 `velin-*` bridges
+- Components: 43 canonical Web Components (`velin-*`); 45 lazy-loader entries
+- Knowledge graph: 20 component nodes, 17 page types, 12 sections, 3 design constraint packs
+- HTML attributes: 29 `velin-*` bridges
 - CLI: velinstyle (scan, scaffold, plan, review, docs generate, search index, meta)
 
 ## Agent briefing
@@ -32,6 +32,7 @@
 - Honor skill status, confidence, compatibility, and onlyIf predicates when automating.
 - Do not put secrets, API keys, or raw emails in velin-meta or page meta.
 - Resolve doc links against docs root (/docs/), not the current page folder.
+- Prefer Velin Transparency Framework (velin-transparency + provenance) for AI/trust/compliance labeling; run `velinstyle transparency doctor`.
 
 ## Key guides
 - [Velin-Meta](https://velinstyle.info/docs/guides/velin-meta.html)

package/dist/search-index.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "generatedAt": "2026-08-01T07:28:49.364Z",
+  "generatedAt": "2026-08-04T10:26:08.731Z",
   "entries": [
     {
       "id": "examples:samples/a11y-patterns.html",
@@ -57,7 +57,7 @@
     {
       "id": "api:commands",
       "title": "CLI commands",
-      "excerpt": "VelinStyle CLI v1.2.0. Run velinstyle --help for full usage.",
+      "excerpt": "VelinStyle CLI v1.2.2. Run velinstyle --help for full usage.",
       "url": "docs/generated/cli/commands.html",
       "category": "api",
       "keywords": [
@@ -79,6 +79,18 @@
       ],
       "weight": 1.1
     },
+    {
+      "id": "api:atelier",
+      "title": "CLI: atelier",
+      "excerpt": "Pull curated Atelier Library showcase by number/id; blade/vue/react = wrappers only",
+      "url": "docs/generated/cli/commands.html#atelier",
+      "category": "api",
+      "keywords": [
+        "cli",
+        "atelier"
+      ],
+      "weight": 1.1
+    },
     {
       "id": "api:blueprint",
       "title": "CLI: blueprint",
@@ -94,7 +106,7 @@
     {
       "id": "api:build",
       "title": "CLI: build",
-      "excerpt": "Build custom CSS with selected layers from config",
+      "excerpt": "Build custom CSS with selected layers from config, or production output with --production",
       "url": "docs/generated/cli/commands.html#build",
       "category": "api",
       "keywords": [
@@ -214,7 +226,7 @@
     {
       "id": "api:plan",
       "title": "CLI: plan",
-      "excerpt": "Emit page plan JSON from a prompt (no HTML)",
+      "excerpt": "Emit page plan JSON from a prompt or --atelier Library ids (beta)",
       "url": "docs/generated/cli/commands.html#plan",
       "category": "api",
       "keywords": [
@@ -235,6 +247,18 @@
       ],
       "weight": 1.1
     },
+    {
+      "id": "api:production",
+      "title": "CLI: production",
+      "excerpt": "Content-aware production builder (CSS/JS/themes/icons/fonts/motion + report)",
+      "url": "docs/generated/cli/commands.html#production",
+      "category": "api",
+      "keywords": [
+        "cli",
+        "production"
+      ],
+      "weight": 1.1
+    },
     {
       "id": "api:review",
       "title": "CLI: review",
@@ -250,7 +274,7 @@
     {
       "id": "api:scaffold",
       "title": "CLI: scaffold",
-      "excerpt": "Plan-first page HTML or recipe fragment from natural language",
+      "excerpt": "Plan-first page HTML, recipe fragment, or Atelier Library compose (--atelier, beta)",
       "url": "docs/generated/cli/commands.html#scaffold",
       "category": "api",
       "keywords": [
@@ -1200,6 +1224,19 @@
       ],
       "weight": 1.3
     },
+    {
+      "id": "docs:velin-disclosure",
+      "title": "velin-disclosure",
+      "excerpt": "Alias for velin-transparency.",
+      "url": "docs/generated/attributes/velin-disclosure.html",
+      "category": "docs",
+      "keywords": [
+        "velin-disclosure",
+        "docs",
+        "velin-disclosure"
+      ],
+      "weight": 1.2
+    },
     {
       "id": "components:velin-drawer",
       "title": "velin-drawer",
@@ -1239,6 +1276,19 @@
       ],
       "weight": 1.3
     },
+    {
+      "id": "components:velin-empty-state",
+      "title": "velin-empty-state",
+      "excerpt": "Source: components/velin-empty-state.js",
+      "url": "docs/generated/components/velin-empty-state.html",
+      "category": "components",
+      "keywords": [
+        "velin-empty-state",
+        "components",
+        "velin-empty-state"
+      ],
+      "weight": 1.3
+    },
     {
       "id": "docs:velin-fade",
       "title": "velin-fade",
@@ -1460,6 +1510,19 @@
       ],
       "weight": 1.2
     },
+    {
+      "id": "components:velin-otp-input",
+      "title": "velin-otp-input",
+      "excerpt": "Source: components/velin-otp-input.js",
+      "url": "docs/generated/components/velin-otp-input.html",
+      "category": "components",
+      "keywords": [
+        "velin-otp-input",
+        "components",
+        "velin-otp-input"
+      ],
+      "weight": 1.3
+    },
     {
       "id": "docs:velin-parallax",
       "title": "velin-parallax",
@@ -1473,6 +1536,19 @@
       ],
       "weight": 1.2
     },
+    {
+      "id": "components:velin-password-strength",
+      "title": "velin-password-strength",
+      "excerpt": "Source: components/velin-password-strength.js",
+      "url": "docs/generated/components/velin-password-strength.html",
+      "category": "components",
+      "keywords": [
+        "velin-password-strength",
+        "components",
+        "velin-password-strength"
+      ],
+      "weight": 1.3
+    },
     {
       "id": "components:velin-persist",
       "title": "velin-persist",
@@ -1863,6 +1939,19 @@
       ],
       "weight": 1.2
     },
+    {
+      "id": "docs:velin-transparency",
+      "title": "velin-transparency",
+      "excerpt": "Velin Transparency Framework host — attaches disclosure + provenance mark (Renderer).",
+      "url": "docs/generated/attributes/velin-transparency.html",
+      "category": "docs",
+      "keywords": [
+        "velin-transparency",
+        "docs",
+        "velin-transparency"
+      ],
+      "weight": 1.2
+    },
     {
       "id": "examples:samples/velin-search.html",
       "title": "VelinSearch",