@birdapi/velinstyle 1.0.0 → 1.2.0

package/dist/chunks/{velin-modal-AEOTZ67O.js → velin-modal-JBNODH7D.js}

@@ -146,7 +146,6 @@ var VelinModal = class extends HTMLElement {
     this._previouslyFocused = saveFocus();
     setBackgroundInert(this);
     document.addEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "hidden";
     requestAnimationFrame(() => {
       const focusable = getFocusableElements(this.shadowRoot);
       if (focusable.length > 0) focusable[0].focus();
@@ -154,8 +153,7 @@ var VelinModal = class extends HTMLElement {
   }
   _close() {
     document.removeEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "";
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._previouslyFocused);
   }
   _onKeydown(event) {
@@ -167,7 +165,7 @@ var VelinModal = class extends HTMLElement {
   }
   disconnectedCallback() {
     document.removeEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "";
+    clearBackgroundInert(this);
   }
 };
 customElements.define("velin-modal", VelinModal);

package/dist/chunks/{velin-popover-T72HK3DF.js → velin-popover-WZG2GHBL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-42VVPW6N.js";
 import {
   escapeHTML
-} from "./chunk-RDE3QE7Z.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-popover.js
 var styles = `
@@ -65,23 +65,44 @@ var VelinPopover = class extends HTMLElement {
       </div>
     `;
     const popoverEl = this.shadowRoot.querySelector(".popover");
-    if (!title) {
-      const ariaLabel = this.getAttribute("aria-label");
-      if (ariaLabel && popoverEl) popoverEl.setAttribute("aria-label", ariaLabel);
+    if (!title && popoverEl) {
+      const fallback = this.getAttribute("aria-label") || (role === "tooltip" ? "Tooltip" : "Popover");
+      popoverEl.setAttribute("aria-label", fallback);
     }
     const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
     triggerSlot.addEventListener("slotchange", () => this._wireTrigger(triggerType));
     this._wireTrigger(triggerType);
   }
+  _ensureTriggerInteractive(trigger) {
+    const tag = trigger.tagName;
+    if (tag !== "BUTTON" && tag !== "A" && trigger.getAttribute("role") !== "button") {
+      trigger.setAttribute("role", "button");
+      if (!trigger.hasAttribute("tabindex")) trigger.setAttribute("tabindex", "0");
+    }
+  }
+  _onTriggerKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.toggle();
+    }
+  }
   _wireTrigger(triggerType) {
     const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
     if (!trigger) return;
+    this._ensureTriggerInteractive(trigger);
     const isHover = triggerType === "hover";
     trigger.setAttribute("aria-haspopup", isHover ? "true" : "dialog");
     trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
     if (this._isDialog) {
       trigger.setAttribute("aria-controls", this._popoverId);
     }
+    trigger.removeEventListener("keydown", this._onTriggerKeyBound);
+    this._onTriggerKeyBound = this._onTriggerKeyBound || this._onTriggerKey.bind(this);
+    trigger.addEventListener("keydown", this._onTriggerKeyBound);
     if (triggerType === "click") {
       trigger.onclick = () => this.toggle();
     } else if (triggerType === "hover") {

package/dist/chunks/{velin-rating-N4DI2XNL.js → velin-rating-QBBYRRBU.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-42VVPW6N.js";
 import {
   escapeHTML
-} from "./chunk-MKZP2TBH.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-rating.js
 var styles = `

package/dist/chunks/{velin-search-7B4KJ6TX.js → velin-search-B3L6J2RP.js}

@@ -284,7 +284,7 @@ function createSearch(config = {}) {
   async function getWorker() {
     if (!wantWorker || workerClient) return workerClient;
     if (typeof Worker === "undefined") return null;
-    const { createSearchWorker } = await import("./worker-client-R6DBYPFT.js");
+    const { createSearchWorker } = await import("./worker-client-MPT7PNQ4.js");
     workerClient = createSearchWorker(config.workerUrl);
     return workerClient;
   }
@@ -427,7 +427,7 @@ var VelinSearch = class extends HTMLElement {
       return;
     }
     if (!this._indexLoaded) await this._loadIndex();
-    const { groups } = this._search.query(q, {
+    const { groups } = await this._search.query(q, {
       minChars: this.minChars,
       fuzzy: this.fuzzy,
       categories: this.categories || void 0,

package/dist/chunks/{velin-search-2XRQFBCS.js → velin-search-L3UG6NDQ.js}

@@ -1,7 +1,7 @@
 import {
   escapeHTMLAttribute,
   sanitizeSearchUrl
-} from "./chunk-RDE3QE7Z.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // core/search/types.js
 var SEARCH_CATEGORIES = (
@@ -284,7 +284,7 @@ function createSearch(config = {}) {
   async function getWorker() {
     if (!wantWorker || workerClient) return workerClient;
     if (typeof Worker === "undefined") return null;
-    const { createSearchWorker } = await import("./worker-client-R6DBYPFT.js");
+    const { createSearchWorker } = await import("./worker-client-MPT7PNQ4.js");
     workerClient = createSearchWorker(config.workerUrl);
     return workerClient;
   }
@@ -368,12 +368,13 @@ var VelinSearch = class extends HTMLElement {
   _ensureMarkup() {
     if (this.querySelector("[data-velin-search-input]")) return;
     const ph = escapeHTMLAttribute(this.getAttribute("placeholder") || "Search\u2026");
+    const label = escapeHTMLAttribute(this.getAttribute("aria-label") || "Search");
     this.innerHTML = `
       <div class="velin-search">
         <div class="velin-search__field">
           <input type="search" class="velin-search__input" data-velin-search-input
             placeholder="${ph}" autocomplete="off" role="combobox" aria-expanded="false"
-            aria-controls="${this._listId}" aria-autocomplete="list" />
+            aria-label="${label}" aria-controls="${this._listId}" aria-autocomplete="list" />
         </div>
         <div class="velin-search__status velin-visually-hidden" data-velin-search-status aria-live="polite" aria-atomic="true"></div>
         <div class="velin-search__results" data-velin-search-results role="listbox"
@@ -426,7 +427,7 @@ var VelinSearch = class extends HTMLElement {
       return;
     }
     if (!this._indexLoaded) await this._loadIndex();
-    const { groups } = this._search.query(q, {
+    const { groups } = await this._search.query(q, {
       minChars: this.minChars,
       fuzzy: this.fuzzy,
       categories: this.categories || void 0,

package/dist/chunks/{velin-secure-field-6PV7RZDJ.js → velin-secure-field-DGYMP7OK.js}

@@ -2,7 +2,7 @@ import {
   escapeHTML,
   escapeHTMLAttribute,
   sanitizeInputType
-} from "./chunk-MKZP2TBH.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-secure-field.js
 var styles = `

package/dist/chunks/{velin-segmented-control-GYD5BIXQ.js → velin-segmented-control-P74GJPAR.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-42VVPW6N.js";
 import {
   escapeHTML
-} from "./chunk-MKZP2TBH.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-segmented-control.js
 var styles = `

package/dist/chunks/{velin-sheet-R2Y67X6H.js → velin-sheet-M5GZZD7G.js}

@@ -88,7 +88,6 @@ var VelinSheet = class extends HTMLElement {
     this._prev = saveFocus();
     setBackgroundInert(this);
     document.addEventListener("keydown", this._onKey);
-    document.body.style.overflow = "hidden";
     requestAnimationFrame(() => {
       const f = getFocusableElements(this.shadowRoot);
       if (f.length) f[0].focus();
@@ -96,8 +95,7 @@ var VelinSheet = class extends HTMLElement {
   }
   _close() {
     document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._prev);
   }
   _onKey(e) {
@@ -109,7 +107,7 @@ var VelinSheet = class extends HTMLElement {
   }
   disconnectedCallback() {
     document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
+    clearBackgroundInert(this);
   }
 };
 customElements.define("velin-sheet", VelinSheet);

package/dist/chunks/{velin-sheet-OUK6572T.js → velin-sheet-X7RXIWKV.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-42VVPW6N.js";
 import {
   escapeHTML
-} from "./chunk-MKZP2TBH.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-sheet.js
 var styles = `
@@ -88,7 +88,6 @@ var VelinSheet = class extends HTMLElement {
     this._prev = saveFocus();
     setBackgroundInert(this);
     document.addEventListener("keydown", this._onKey);
-    document.body.style.overflow = "hidden";
     requestAnimationFrame(() => {
       const f = getFocusableElements(this.shadowRoot);
       if (f.length) f[0].focus();
@@ -96,8 +95,7 @@ var VelinSheet = class extends HTMLElement {
   }
   _close() {
     document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._prev);
   }
   _onKey(e) {
@@ -109,7 +107,7 @@ var VelinSheet = class extends HTMLElement {
   }
   disconnectedCallback() {
     document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
+    clearBackgroundInert(this);
   }
 };
 customElements.define("velin-sheet", VelinSheet);

package/dist/chunks/{velin-stepper-X54WGHDG.js → velin-stepper-4YQJUHPC.js}

@@ -1,6 +1,6 @@
 import {
   escapeHTML
-} from "./chunk-RDE3QE7Z.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-stepper.js
 var styles = `
@@ -52,10 +52,14 @@ var styles = `
   .panels ::slotted(*) { display: none; }
   .panels ::slotted([data-active]) { display: block; }
   @media (prefers-reduced-motion: reduce) { .step__marker { transition: none; } }
+  .velin-sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
 `;
 var VelinStepper = class extends HTMLElement {
   static get observedAttributes() {
-    return ["active"];
+    return ["active", "aria-label", "labels"];
   }
   constructor() {
     super();
@@ -68,15 +72,18 @@ var VelinStepper = class extends HTMLElement {
   }
   _buildSteps() {
     const labels = (this.getAttribute("labels") || "").split(",").map((s) => s.trim());
+    const listLabel = this.getAttribute("aria-label") || "Progress";
     const stepsHTML = labels.map((label, i) => {
       const state = i < this._current ? "completed" : i === this._current ? "active" : "";
-      const marker = i < this._current ? "&#10003;" : i + 1;
+      const status = i < this._current ? "completed" : i === this._current ? "current step" : "upcoming";
+      const marker = i < this._current ? '<span class="velin-sr-only">Completed</span><span aria-hidden="true">&#10003;</span>' : `<span aria-hidden="true">${i + 1}</span>`;
       const ariaCurrent = i === this._current ? ' aria-current="step"' : "";
-      return `<div class="step ${state}" role="listitem"${ariaCurrent}><span class="step__marker" aria-hidden="true">${marker}</span><span class="step__label">${escapeHTML(label)}</span></div>`;
+      const itemLabel = label ? `${label}, ${status}` : `Step ${i + 1}, ${status}`;
+      return `<div class="step ${state}" role="listitem" aria-label="${escapeHTML(itemLabel)}"${ariaCurrent}><span class="step__marker">${marker}</span><span class="step__label">${escapeHTML(label)}</span></div>`;
     }).join("");
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
-      <div class="steps" role="list" aria-label="Progress" part="steps">${stepsHTML}</div>
+      <div class="steps" role="list" aria-label="${escapeHTML(listLabel)}" part="steps">${stepsHTML}</div>
       <div class="panels" part="panels"><slot></slot></div>
     `;
   }

package/dist/chunks/{velin-toast-OMMOA2DK.js → velin-toast-UG5LWTG2.js}

@@ -1,6 +1,6 @@
 import {
   escapeHTML
-} from "./chunk-LA7264K4.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-toast.js
 var styles = `
@@ -80,8 +80,12 @@ var VelinToast = class extends HTMLElement {
     this.setAttribute("aria-atomic", "true");
   }
   show({ message, type = "info", duration = 5e3 } = {}) {
+    const assertive = type === "error" || type === "danger";
+    this.setAttribute("role", assertive ? "alert" : "status");
+    this.setAttribute("aria-live", assertive ? "assertive" : "polite");
     const toast = document.createElement("div");
     toast.className = `toast toast--${type}`;
+    toast.setAttribute("role", assertive ? "alert" : "status");
     toast.innerHTML = `
       <div class="toast-content">${escapeHTML(message)}</div>
       <button class="toast-close" aria-label="Close">&#215;</button>

package/dist/chunks/{velin-tooltip-BDHGRTQB.js → velin-tooltip-ZDH5SDLU.js}

@@ -1,6 +1,6 @@
 import {
   escapeHTML
-} from "./chunk-LA7264K4.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-tooltip.js
 var styles = `

package/dist/chunks/yaml-O67LEQYT.js

@@ -0,0 +1,26 @@
+import {
+  tokenize
+} from "./chunk-7FFAMRFV.js";
+
+// core/highlight/languages/yaml.js
+var RULES = [
+  { type: "comment", re: /#[^\n]*/y },
+  // Document markers and block scalar indicators.
+  { type: "punctuation", re: /^(?:---|\.\.\.)$/my },
+  { type: "string", re: /"(?:\\.|[^"\\])*"/y },
+  { type: "string", re: /'(?:''|[^'])*'/y },
+  // Keys are the primary structure in YAML, so they get the attr-name colour.
+  { type: "attr-name", re: /^[ \t]*-?[ \t]*[\w.$-]+(?=[ \t]*:(?:[ \t]|$))/my },
+  { type: "punctuation", re: /^[ \t]*-(?=[ \t]|$)/my },
+  { type: "keyword", re: /\b(?:true|false|null|yes|no|on|off|~)\b/yi },
+  { type: "number", re: /\b-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/y },
+  // Anchors, aliases, tags and block scalar headers.
+  { type: "operator", re: /[&*]\w+|![\w/!-]*|[|>][+-]?\d*(?=\s*$)/my },
+  { type: "punctuation", re: /[:,[\]{}]/y }
+];
+function lexYaml(code) {
+  return tokenize(code, RULES);
+}
+export {
+  lexYaml as default
+};

package/dist/llms.txt

@@ -1,30 +1,47 @@
-# VelinStyle 1.0.0
+# VelinStyle 1.2.0
 
-> VelinStyle is the WCAG 2.2 AAA CSS framework with native JavaScript runtime and Web Components.
+> 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
 > MIME: application/vnd.velinstyle.meta+json
 
 ## Framework
 - npm: @birdapi/velinstyle
-- VelinStyle is the WCAG 2.2 AAA CSS framework with native JavaScript runtime and Web Components.
-- Components: 36 canonical Web Components (`velin-*`); 38 lazy-loader entries
+- 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
-- CLI: velinstyle (scan, scaffold, docs generate, search index, meta)
+- CLI: velinstyle (scan, scaffold, plan, review, docs generate, search index, meta)
+
+## Agent briefing
+- Treat plan/review/knowledge graph as beta foundation — usable, not a finished AI design system.
+- Build pages with plan-first flow: analyze prompt → page registry → sections → design constraints → HTML → review.
+- Prefer tokens (`--velin-color-*`, `--velin-space-*`) over raw hex.
+- One H1 per page; form fields need labels + `velin-form-summary` when validating.
+- Hero: max 2 CTAs; FAQ uses disclosure (`velin-accordion` / details).
+- Do not invent non-`velin-*` utility classes.
+- Prefer registry-backed skills/workflows (`velinstyle skills ...`, `velinstyle workflow ...`) before ad-hoc orchestration.
 
 ## Conventions
-- Positioning: VelinStyle is the WCAG 2.2 AAA CSS framework with native JavaScript runtime and Web Components — not a JS-only library or a utility-only CSS kit.
+- Positioning: VelinStyle is a CSS framework with WCAG 2.2 AAA-oriented defaults, native JavaScript runtime, and Web Components — not a JS-only library or a utility-only CSS kit.
 - Use only velin-* utility classes and documented Web Components.
 - Prefer data-velin-theme on <html> for theme switching.
 - Run velinstyle scan on generated HTML before shipping.
+- Prefer registry-first skills (`velinstyle skills`) and workflow graphs (`velinstyle workflow`) before inventing custom pipelines.
+- 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.
 
 ## Key guides
 - [Velin-Meta](https://velinstyle.info/docs/guides/velin-meta.html)
+- [AI Skills](https://velinstyle.info/docs/guides/ai-skills.html)
 - [VelinSearch](https://velinstyle.info/docs/guides/velin-search.html)
 - [Syntax highlighting](https://velinstyle.info/docs/guides/syntax-highlight.html)
 - [Prompt scaffolding](https://velinstyle.info/docs/guides/prompt-scaffolding.html)
 - [API reference (generated)](https://velinstyle.info/docs/guides/api-reference.html)
+- North star: VELINSTYLE_2030.md
+- Architecture: ARCHITECTURE.md
 
 ## Generated reference
 - [Components index](https://velinstyle.info/docs/generated/components/)
@@ -34,7 +51,12 @@
 
 ## Usage for agents
 ```
+npx velinstyle plan "Steuerberater Landingpage mit Kontaktformular"
+npx velinstyle scaffold "Steuerberater Landingpage mit Kontaktformular" -o out.html --json
+npx velinstyle review out.html --json
 npx velinstyle meta
 npx velinstyle docs generate
-npx velinstyle search index
+npx velinstyle skills list --capability review
+npx velinstyle skills install frontend
+npx velinstyle workflow landingpage --json
 ```