@birdapi/velinstyle 0.8.0 → 0.9.0

package/examples/search-index.schema.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "VelinSearchIndex",
+  "type": "object",
+  "properties": {
+    "version": { "type": "integer", "const": 1 },
+    "generatedAt": { "type": "string" },
+    "entries": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": ["id", "title", "url", "category"],
+        "properties": {
+          "id": { "type": "string", "minLength": 1 },
+          "title": { "type": "string", "minLength": 1, "maxLength": 200 },
+          "excerpt": { "type": "string", "maxLength": 200 },
+          "url": { "type": "string" },
+          "category": {
+            "type": "string",
+            "enum": ["docs", "components", "api", "examples"]
+          },
+          "keywords": {
+            "type": "array",
+            "items": { "type": "string" }
+          },
+          "weight": { "type": "number", "minimum": 0 }
+        },
+        "additionalProperties": false
+      }
+    }
+  },
+  "required": ["version", "entries"]
+}

package/package.json

@@ -1,15 +1,34 @@
 {
   "name": "@birdapi/velinstyle",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "types": "dist/velinstyle-components.d.ts",
-  "description": "WCAG-first CSS + Web Components: OKLCH themes, container queries, 35+ components—lean bundles, optional CLI. Ship inclusive UI faster.",
+  "types": "dist/velinstyle.d.ts",
+  "sideEffects": [
+    "components/index.js",
+    "components/velin-*.js"
+  ],
+  "description": "WCAG 2.2 AAA CSS + Web Components: OKLCH themes, PII scanner, perf CLI, runtime tree-shaking. Ship inclusive UI faster.",
   "type": "module",
   "main": "dist/velinstyle.css",
   "module": "dist/velinstyle-components.js",
+  "exports": {
+    ".": "./components/runtime-entry.js",
+    "./bundle": "./dist/velinstyle-components.min.js",
+    "./css": "./dist/velinstyle.min.css",
+    "./sanitize": "./components/sanitize.js",
+    "./runtime": "./components/runtime/index.js",
+    "./secure": "./components/velin-secure-field.js",
+    "./email": "./components/velin-email.js",
+    "./search": "./core/search/index.js",
+    "./motion": "./core/motion/index.js",
+    "./attributes": "./core/attributes/index.js",
+    "./highlight": "./core/highlight/index.js",
+    "./meta": "./core/meta/index.js",
+    "./a11y": "./components/a11y-entry.js"
+  },
   "bin": {
     "velinstyle": "cli/index.js"
   },
@@ -17,7 +36,7 @@
     "type": "git",
     "url": "https://github.com/SkyliteDesign/velinstyle.git"
   },
-  "homepage": "https://skylitedesign.github.io/velinstyle/",
+  "homepage": "https://velinstyle.info",
   "bugs": {
     "url": "https://github.com/SkyliteDesign/velinstyle/issues"
   },
@@ -25,11 +44,16 @@
     "dist/",
     "src/",
     "components/",
+    "core/",
     "cli/",
+    "examples/search-index.schema.json",
     "icons/velin-icons.svg"
   ],
   "scripts": {
-    "build": "npm run build:css:min && npm run build:css:dev && npm run build:js:min && npm run build:js:dev && npm run build:js:iife && npm run build:themes && npm run build:icons",
+    "build": "npm run build:css:min && npm run build:css:dev && npm run build:js:min && npm run build:js:dev && npm run build:js:iife && npm run build:js:chunks && npm run build:loaders && npm run build:types && npm run build:themes && npm run build:icons",
+    "build:loaders": "node scripts/generate-component-loaders.mjs",
+    "build:types": "node scripts/generate-types.mjs",
+    "build:js:chunks": "esbuild components/runtime-entry.js --bundle --splitting --format=esm --outdir=dist/chunks --chunk-names=[name]-[hash]",
     "build:css:min": "lightningcss --bundle --minify src/velinstyle.css -o dist/velinstyle.min.css",
     "build:css:dev": "lightningcss --bundle src/velinstyle.css -o dist/velinstyle.css",
     "build:js:min": "esbuild components/index.js --bundle --minify --format=esm --outfile=dist/velinstyle-components.min.js",
@@ -42,10 +66,26 @@
     "lint": "stylelint \"src/**/*.css\"",
     "test": "vitest run",
     "test:a11y": "node tests/a11y/run.js",
+    "test:a11y:coverage": "node tests/a11y/coverage.js",
     "test:contrast": "node scripts/check-contrast.js",
     "test:security": "vitest run tests/sanitize.test.js tests/cli-security-scanner.test.js",
+    "test:perf": "vitest run tests/perf-audit.test.js",
+    "test:search:bench": "vitest run tests/search-benchmark.test.js",
+    "test:e2e": "playwright test",
+    "test:e2e:chromium": "playwright test --project=chromium",
+    "docs:patch-theme-picker": "node scripts/patch-docs-theme-picker.mjs",
+    "tokens:validate": "node cli/index.js tokens validate --input examples/tokens.sample.json",
+    "tokens:validate:full": "node cli/index.js tokens validate --input examples/tokens.full.json",
+    "docs:generate": "node cli/index.js docs generate",
+    "search:index": "node cli/index.js search index",
+    "meta:build": "node cli/index.js meta",
+    "ci:checks": "node scripts/ci-checks.mjs",
     "docs:prepare": "npm run build && node scripts/prepare-docs-pages.js",
-    "docs:sync-site": "npm run build && python ../velinstyle-site/tools/sync-0.7.0.py"
+    "docs:patch-nav": "node scripts/patch-docs-nav.js",
+    "docs:sync-site": "npm run build && npm run docs:generate && python ../velinstyle-site/tools/sync-framework-0.9.0.py && python ../velinstyle-site/tools/patch-site-a11y-aaa.py && python ../velinstyle-site/tools/patch-docs-090-final.py",
+    "readme:capture": "node tools/capture-readme-demos.mjs",
+    "readme:assets:webp": "node tools/readme-png-to-webp.mjs",
+    "demos:sync": "node tools/sync-demos-to-repo.mjs --out showcase-demos && node tools/sync-demos-to-repo.mjs --out ../velinstyle-demos"
   },
   "keywords": [
     "css",
@@ -64,13 +104,19 @@
   "author": "SkyliteDesign",
   "license": "MIT",
   "devDependencies": {
-    "lightningcss-cli": "^1.28.0",
+    "axe-core": "^4.10.0",
     "esbuild": "^0.24.0",
+    "jsdom": "^26.1.0",
+    "lightningcss-cli": "^1.28.0",
+    "@playwright/test": "^1.60.0",
+    "playwright": "^1.60.0",
     "serve": "^14.0.0",
+    "sharp": "^0.34.5",
     "stylelint": "^16.0.0",
     "stylelint-config-standard": "^36.0.0",
-    "vitest": "^3.2.0",
-    "jsdom": "^26.1.0",
-    "axe-core": "^4.10.0"
+    "vitest": "^3.2.0"
+  },
+  "dependencies": {
+    "isomorphic-dompurify": "^3.13.0"
   }
 }

package/src/a11y/authentication.css

@@ -0,0 +1,37 @@
+/* WCAG 2.2 — authentication patterns (3.3.8 visible labels, error association) */
+@layer a11y {
+  .velin-auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--velin-space-4);
+    max-width: 28rem;
+  }
+
+  .velin-auth-form .velin-field-error {
+    color: var(--velin-color-danger, #b91c1c);
+    font-size: var(--velin-text-sm);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--velin-space-2);
+  }
+
+  .velin-auth-form .velin-field-error::before {
+    content: "";
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-block-start: 0.1em;
+    background: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+
+  .velin-input[aria-invalid="true"],
+  .velin-auth-form .velin-input:invalid:not(:placeholder-shown) {
+    border-color: var(--velin-color-danger, #b91c1c);
+    outline-color: var(--velin-color-danger, #b91c1c);
+  }
+
+  .velin-auth-form .velin-input[aria-invalid="true"] {
+    background-image: linear-gradient(transparent, transparent);
+  }
+}

package/src/a11y/consistent-help.css

@@ -0,0 +1,22 @@
+/* WCAG 2.2 — consistent help (3.2.6) */
+@layer a11y {
+  .velin-field-help {
+    font-size: var(--velin-text-sm);
+    color: var(--velin-color-text-muted);
+    margin-block-start: var(--velin-space-1);
+    line-height: var(--velin-leading-snug);
+  }
+
+  .velin-form-legend {
+    font-size: var(--velin-text-lg);
+    font-weight: var(--velin-weight-semibold);
+    margin-block-end: var(--velin-space-2);
+    padding: 0;
+  }
+
+  .velin-form-section-help {
+    font-size: var(--velin-text-sm);
+    color: var(--velin-color-text-muted);
+    margin-block-end: var(--velin-space-4);
+  }
+}

package/src/a11y/dragging-alternatives.css

@@ -0,0 +1,30 @@
+/* WCAG 2.2 — dragging movements alternative (2.5.7) */
+@layer a11y {
+  .velin-drag-handle {
+    cursor: grab;
+    touch-action: none;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .velin-drag-handle:active {
+    cursor: grabbing;
+  }
+
+  .velin-drag-keyboard-hint {
+    font-size: var(--velin-text-xs);
+    color: var(--velin-color-text-muted);
+    margin-block-start: var(--velin-space-1);
+  }
+
+  .velin-drag-keyboard-hint kbd {
+    font-family: var(--velin-font-mono);
+    padding: 0.1em 0.35em;
+    border-radius: var(--velin-radius-sm);
+    border: 1px solid var(--velin-color-border);
+    background: var(--velin-color-surface-dim);
+  }
+}

package/src/a11y/focus-appearance.css

@@ -0,0 +1,20 @@
+/* WCAG 2.2 — focus appearance (2.4.13 AAA) */
+@layer a11y {
+  :root {
+    --velin-focus-ring-width: 3px;
+    --velin-focus-ring-offset: 2px;
+    --velin-focus-ring-color: var(--velin-color-focus, oklch(0.55 0.2 264));
+  }
+
+  :where(
+    a:focus-visible,
+    button:focus-visible,
+    input:focus-visible,
+    select:focus-visible,
+    textarea:focus-visible,
+    [tabindex]:not([tabindex="-1"]):focus-visible
+  ) {
+    outline: var(--velin-focus-ring-width) solid var(--velin-focus-ring-color);
+    outline-offset: var(--velin-focus-ring-offset);
+  }
+}

package/src/a11y/high-contrast-aaa.css

@@ -1,37 +1,27 @@
-/* WCAG 1.4.6 Contrast (Enhanced) — optional AAA via data-velin-contrast="aaa" */
+/* WCAG 1.4.3 — lighter AA palette when authors opt out of default AAA tokens */
 @layer a11y {
-  :root[data-velin-contrast="aaa"] {
-    --velin-color-text: oklch(8% 0.01 250);
-    --velin-color-text-muted: oklch(28% 0.01 250);
-    --velin-color-text-subtle: oklch(38% 0.01 250);
-    --velin-color-border: oklch(35% 0.01 250);
-    --velin-color-border-strong: oklch(20% 0.01 250);
-    --velin-color-primary: oklch(38% 0.18 250);
-    --velin-color-primary-hover: oklch(32% 0.18 250);
-    --velin-color-on-primary: oklch(100% 0 0);
-    --velin-color-focus: oklch(35% 0.22 250);
+  :root[data-velin-contrast="aa"] {
+    --velin-color-text: oklch(15% 0.01 250);
+    --velin-color-text-muted: oklch(45% 0.01 250);
+    --velin-color-text-subtle: oklch(60% 0.005 250);
+    --velin-color-primary: oklch(55% 0.15 250);
+    --velin-color-primary-text: oklch(42% 0.15 250);
+    --velin-color-border: oklch(82% 0.01 250);
+    --velin-color-focus: oklch(60% 0.2 250);
   }
 
-  :root[data-velin-contrast="aaa"][data-velin-theme="dark"],
-  :root[data-velin-contrast="aaa"]:not([data-velin-theme="light"]) {
-    @media (prefers-color-scheme: dark) {
-      --velin-color-text: oklch(98% 0.005 250);
-      --velin-color-text-muted: oklch(82% 0.005 250);
-      --velin-color-text-subtle: oklch(72% 0.005 250);
-      --velin-color-border: oklch(55% 0.01 250);
-      --velin-color-border-strong: oklch(70% 0.01 250);
-      --velin-color-primary: oklch(78% 0.14 250);
-      --velin-color-on-primary: oklch(8% 0.01 250);
-    }
-  }
-
-  :root[data-velin-contrast="aaa"] .velin-btn {
+  /* Legacy: data-velin-contrast="aaa" kept for compatibility (defaults are already AAA) */
+  :root[data-velin-contrast="aaa"] .velin-btn,
+  :root:not([data-velin-contrast="aa"]) .velin-btn {
     border-width: 2px;
   }
 
   :root[data-velin-contrast="aaa"] .velin-input,
   :root[data-velin-contrast="aaa"] .velin-select,
-  :root[data-velin-contrast="aaa"] .velin-textarea {
+  :root[data-velin-contrast="aaa"] .velin-textarea,
+  :root:not([data-velin-contrast="aa"]) .velin-input,
+  :root:not([data-velin-contrast="aa"]) .velin-select,
+  :root:not([data-velin-contrast="aa"]) .velin-textarea {
     border-width: 2px;
   }
 }

package/src/a11y/skip-link.css

@@ -14,8 +14,10 @@
     transition: var(--velin-transition-transform);
   }
 
-  .velin-skip-link:focus {
+  .velin-skip-link:focus-visible {
     inset-block-start: var(--velin-space-4);
+    outline: 3px solid var(--velin-color-focus);
+    outline-offset: 2px;
   }
 
   @media (prefers-reduced-motion: reduce) {

package/src/a11y/sr-only.css

@@ -13,7 +13,7 @@
   }
 
   /* Allow element to become visible on focus (e.g. skip links) */
-  .velin-sr-only--focusable:focus,
+  .velin-sr-only--focusable:focus-visible,
   .velin-sr-only--focusable:active {
     position: static;
     width: auto;

package/src/base/reset.css

@@ -131,40 +131,4 @@
     display: none !important;
   }
 
-  /* Prevent FOUC for VelinStyle custom elements before registration */
-  velin-modal:not(:defined),
-  velin-drawer:not(:defined),
-  velin-tabs:not(:defined),
-  velin-accordion:not(:defined),
-  velin-dropdown:not(:defined),
-  velin-toast:not(:defined),
-  velin-dialog:not(:defined),
-  velin-popover:not(:defined),
-  velin-tooltip-wc:not(:defined),
-  velin-lightbox:not(:defined),
-  velin-carousel:not(:defined),
-  velin-collapse:not(:defined),
-  velin-stepper-wc:not(:defined),
-  velin-countdown:not(:defined),
-  velin-progress-ring:not(:defined),
-  velin-persist:not(:defined),
-  velin-copy:not(:defined),
-  velin-scroll-top:not(:defined),
-  velin-scrollspy:not(:defined),
-  velin-theme-toggle:not(:defined),
-  velin-icon:not(:defined),
-  velin-combobox:not(:defined),
-  velin-bottom-nav:not(:defined),
-  velin-sheet:not(:defined),
-  velin-segmented-control:not(:defined),
-  velin-rating:not(:defined),
-  velin-menubar:not(:defined),
-  velin-command:not(:defined),
-  velin-announcer:not(:defined),
-  velin-sparkline:not(:defined),
-  velin-counter:not(:defined),
-  velin-live-dot:not(:defined) {
-    opacity: 0;
-    visibility: hidden;
-  }
 }

package/src/base/wc-placeholder.css

@@ -0,0 +1,102 @@
+/**
+ * Reserve space for custom elements before upgrade to reduce CLS.
+ * Loaded from reset.css — pairs opacity:0 with min dimensions per display mode.
+ */
+@layer base {
+  velin-modal:not(:defined),
+  velin-drawer:not(:defined),
+  velin-dialog:not(:defined),
+  velin-sheet:not(:defined),
+  velin-lightbox:not(:defined),
+  velin-command:not(:defined) {
+    display: block;
+    block-size: 0;
+    overflow: hidden;
+    opacity: 0;
+    visibility: hidden;
+    contain: layout style;
+  }
+
+  velin-tabs:not(:defined),
+  velin-accordion:not(:defined),
+  velin-carousel:not(:defined),
+  velin-collapse:not(:defined),
+  velin-stepper:not(:defined),
+  velin-stepper-wc:not(:defined),
+  velin-bottom-nav:not(:defined),
+  velin-menubar:not(:defined),
+  velin-segmented-control:not(:defined),
+  velin-code-block:not(:defined),
+  velin-secure-field:not(:defined),
+  velin-search:not(:defined) {
+    display: block;
+    min-block-size: 2.75rem;
+    opacity: 0;
+    visibility: hidden;
+    contain: layout style;
+  }
+
+  velin-dropdown:not(:defined),
+  velin-combobox:not(:defined),
+  velin-popover:not(:defined),
+  velin-tooltip:not(:defined),
+  velin-tooltip-wc:not(:defined),
+  velin-rating:not(:defined),
+  velin-copy:not(:defined),
+  velin-email:not(:defined),
+  velin-countdown:not(:defined),
+  velin-counter:not(:defined),
+  velin-live-dot:not(:defined),
+  velin-progress-ring:not(:defined),
+  velin-icon:not(:defined),
+  velin-theme-toggle:not(:defined) {
+    display: inline-block;
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    vertical-align: middle;
+    opacity: 0;
+    visibility: hidden;
+    contain: layout style;
+  }
+
+  velin-sparkline:not(:defined) {
+    display: inline-block;
+    min-inline-size: 4rem;
+    min-block-size: 1.5rem;
+    vertical-align: middle;
+    opacity: 0;
+    visibility: hidden;
+    contain: layout style;
+  }
+
+  velin-scroll-top:not(:defined) {
+    position: fixed;
+    inset-block-end: var(--velin-space-4, 1rem);
+    inset-inline-end: var(--velin-space-4, 1rem);
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    contain: layout style;
+  }
+
+  velin-toast:not(:defined),
+  velin-announcer:not(:defined) {
+    position: fixed;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    contain: strict;
+  }
+
+  velin-persist:not(:defined),
+  velin-scrollspy:not(:defined) {
+    display: contents;
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/src/components/attributes.css

@@ -0,0 +1,42 @@
+@layer components {
+  .velin-quote {
+    margin-block: var(--velin-space-4);
+    padding-inline-start: var(--velin-space-4);
+    border-inline-start: 4px solid var(--velin-color-primary);
+    font-style: italic;
+    color: var(--velin-color-text-muted);
+  }
+
+  .velin-code-block {
+    position: relative;
+    margin-block: var(--velin-space-4);
+    border-radius: var(--velin-radius-md);
+    overflow: hidden;
+    background: var(--velin-color-surface-elevated, var(--velin-color-surface));
+    border: 1px solid var(--velin-color-border);
+  }
+
+  .velin-code-block pre {
+    margin: 0;
+    padding: var(--velin-space-4);
+    overflow-x: auto;
+    font-family: var(--velin-font-mono, ui-monospace, monospace);
+    font-size: var(--velin-text-sm, 0.875rem);
+  }
+
+  .velin-code-block__copy {
+    position: absolute;
+    inset-block-start: var(--velin-space-2);
+    inset-inline-end: var(--velin-space-2);
+  }
+
+  .velin-highlight {
+    background: color-mix(in oklch, var(--velin-color-warning, #f59e0b) 35%, transparent);
+    padding-inline: 2px;
+    border-radius: 2px;
+  }
+
+  [velin-anchor] {
+    scroll-margin-block: var(--velin-space-16, 4rem);
+  }
+}