@birdapi/velinstyle 1.2.0 → 1.2.2

package/package.json

@@ -1,142 +1,143 @@
-{
-  "name": "@birdapi/velinstyle",
-  "version": "1.2.0",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  },
-  "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",
-    "./skills-registry": "./packages/velinstyle-skills/registry.json"
-  },
-  "bin": {
-    "velinstyle": "cli/index.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/SkyliteDesign/velinstyle.git"
-  },
-  "homepage": "https://velinstyle.info",
-  "bugs": {
-    "url": "https://github.com/SkyliteDesign/velinstyle/issues"
-  },
-  "files": [
-    "dist/",
-    "src/",
-    "components/",
-    "core/",
-    "cli/",
-    "packages/skill-engine/",
-    "packages/velinstyle-skills/",
-    "schemas/",
-    "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:js:chunks && npm run build:loaders && npm run build:react:src && npm run build:types && npm run build:themes && npm run build:icons",
-    "build:loaders": "node scripts/generate-component-loaders.mjs",
-    "build:react:src": "node scripts/generate-react-wrappers.mjs",
-    "build:react": "npm run build:react:src && npm --prefix packages/react run build",
-    "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",
-    "build:js:dev": "esbuild components/index.js --bundle --format=esm --outfile=dist/velinstyle-components.js",
-    "build:js:iife": "esbuild components/index.js --bundle --format=iife --outfile=dist/velinstyle-components.iife.js",
-    "build:themes": "node scripts/build-themes.js",
-    "build:icons": "node icons/build-sprite.js",
-    "dev": "npx serve . --cors -l 3000",
-    "watch": "lightningcss --bundle src/velinstyle.css -o dist/velinstyle.css --watch",
-    "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",
-    "skills:generate": "node packages/velinstyle-skills/scripts/generate-assets.mjs && node -e \"import('./packages/velinstyle-skills/index.js').then(m=>m.writeCatalogFile())\"",
-    "skills:validate": "node scripts/validate-skills.mjs",
-    "skills:doctor": "node scripts/check-skills-paths.mjs",
-    "meta:build": "node cli/index.js meta",
-    "ci:checks": "node scripts/ci-checks.mjs",
-    "check:blueprints": "node scripts/check-blueprint-classes.mjs",
-    "check:chaos": "node scripts/check-chaos-detection.mjs",
-    "release:check": "node scripts/check-release-sync.mjs",
-    "release:sync": "node scripts/check-release-sync.mjs --fix",
-    "intelligence:validate": "node scripts/validate-intelligence-schemas.mjs",
-    "prepublishOnly": "npm run build && npm run check:blueprints && npm run search:index && npm run skills:generate && npm run skills:validate && npm run skills:doctor && npm run meta:build && npm run intelligence:validate && npm run release:check -- --skip-site",
-    "pack:check": "npm pack --dry-run",
-    "docs:prepare": "npm run build && node scripts/prepare-docs-pages.js",
-    "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",
-    "strategy:bootstrap-issues": "node scripts/bootstrap-github-backlog.mjs",
-    "strategy:bootstrap-issues:dry": "node scripts/bootstrap-github-backlog.mjs --dry-run",
-    "strategy:bootstrap-next30": "node scripts/bootstrap-github-backlog.mjs --issues-only --seed=../interne_docs/strategy/next-30-issues.json --map=../interne_docs/strategy/next-30-issue-map.json",
-    "strategy:bootstrap-next30:dry": "node scripts/bootstrap-github-backlog.mjs --dry-run --issues-only --seed=../interne_docs/strategy/next-30-issues.json --map=../interne_docs/strategy/next-30-issue-map.json"
-  },
-  "keywords": [
-    "css",
-    "framework",
-    "accessibility",
-    "a11y",
-    "wcag",
-    "mobile-first",
-    "container-queries",
-    "oklch",
-    "web-components",
-    "design-tokens",
-    "dark-mode",
-    "rtl"
-  ],
-  "author": "SkyliteDesign",
-  "license": "MIT",
-  "devDependencies": {
-    "@playwright/test": "^1.60.0",
-    "axe-core": "^4.10.0",
-    "esbuild": "^0.24.0",
-    "jsdom": "^26.1.0",
-    "lightningcss-cli": "^1.28.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"
-  },
-  "dependencies": {
-    "isomorphic-dompurify": "^3.21.0"
-  }
-}
+{
+  "name": "@birdapi/velinstyle",
+  "version": "1.2.2",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "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",
+    "./transparency": "./core/transparency/index.js",
+    "./a11y": "./components/a11y-entry.js",
+    "./skills-registry": "./packages/velinstyle-skills/registry.json"
+  },
+  "bin": {
+    "velinstyle": "cli/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SkyliteDesign/velinstyle.git"
+  },
+  "homepage": "https://velinstyle.info",
+  "bugs": {
+    "url": "https://github.com/SkyliteDesign/velinstyle/issues"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "components/",
+    "core/",
+    "cli/",
+    "packages/skill-engine/",
+    "packages/velinstyle-skills/",
+    "schemas/",
+    "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:js:chunks && npm run build:loaders && npm run build:react:src && npm run build:types && npm run build:themes && npm run build:icons",
+    "build:loaders": "node scripts/generate-component-loaders.mjs",
+    "build:react:src": "node scripts/generate-react-wrappers.mjs",
+    "build:react": "npm run build:react:src && npm --prefix packages/react run build",
+    "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",
+    "build:js:dev": "esbuild components/index.js --bundle --format=esm --outfile=dist/velinstyle-components.js",
+    "build:js:iife": "esbuild components/index.js --bundle --format=iife --outfile=dist/velinstyle-components.iife.js",
+    "build:themes": "node scripts/build-themes.js",
+    "build:icons": "node icons/build-sprite.js",
+    "dev": "npx serve . --cors -l 3000",
+    "watch": "lightningcss --bundle src/velinstyle.css -o dist/velinstyle.css --watch",
+    "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",
+    "skills:generate": "node packages/velinstyle-skills/scripts/generate-assets.mjs && node -e \"import('./packages/velinstyle-skills/index.js').then(m=>m.writeCatalogFile())\"",
+    "skills:validate": "node scripts/validate-skills.mjs",
+    "skills:doctor": "node scripts/check-skills-paths.mjs",
+    "meta:build": "node cli/index.js meta",
+    "ci:checks": "node scripts/ci-checks.mjs",
+    "check:blueprints": "node scripts/check-blueprint-classes.mjs",
+    "check:chaos": "node scripts/check-chaos-detection.mjs",
+    "release:check": "node scripts/check-release-sync.mjs",
+    "release:sync": "node scripts/check-release-sync.mjs --fix",
+    "intelligence:validate": "node scripts/validate-intelligence-schemas.mjs",
+    "prepublishOnly": "npm run build && npm run check:blueprints && npm run search:index && npm run skills:generate && npm run skills:validate && npm run skills:doctor && npm run meta:build && npm run intelligence:validate && npm run release:check -- --skip-site",
+    "pack:check": "npm pack --dry-run",
+    "docs:prepare": "npm run build && node scripts/prepare-docs-pages.js",
+    "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",
+    "strategy:bootstrap-issues": "node scripts/bootstrap-github-backlog.mjs",
+    "strategy:bootstrap-issues:dry": "node scripts/bootstrap-github-backlog.mjs --dry-run",
+    "strategy:bootstrap-next30": "node scripts/bootstrap-github-backlog.mjs --issues-only --seed=../interne_docs/strategy/next-30-issues.json --map=../interne_docs/strategy/next-30-issue-map.json",
+    "strategy:bootstrap-next30:dry": "node scripts/bootstrap-github-backlog.mjs --dry-run --issues-only --seed=../interne_docs/strategy/next-30-issues.json --map=../interne_docs/strategy/next-30-issue-map.json"
+  },
+  "keywords": [
+    "css",
+    "framework",
+    "accessibility",
+    "a11y",
+    "wcag",
+    "mobile-first",
+    "container-queries",
+    "oklch",
+    "web-components",
+    "design-tokens",
+    "dark-mode",
+    "rtl"
+  ],
+  "author": "SkyliteDesign",
+  "license": "MIT",
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "axe-core": "^4.10.0",
+    "esbuild": "^0.24.0",
+    "jsdom": "^26.1.0",
+    "lightningcss-cli": "^1.28.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"
+  },
+  "dependencies": {
+    "isomorphic-dompurify": "^3.21.0"
+  }
+}

package/packages/velinstyle-skills/catalog.json

@@ -1,6 +1,6 @@
 {
   "version": "1.0.0",
-  "generatedAt": "2026-08-01T07:28:49.920Z",
+  "generatedAt": "2026-08-04T10:26:09.763Z",
   "totals": {
     "skills": 40,
     "packs": 6,

package/src/components/data-table.css

@@ -65,6 +65,25 @@
     text-align: center;
   }
 
+  /* Row severity (class + data-severity alias) */
+  .velin-data-table__row--danger,
+  .velin-data-table tr[data-severity="danger"] {
+    background-color: color-mix(in oklch, var(--velin-color-danger) 12%, transparent);
+    box-shadow: inset 3px 0 0 var(--velin-color-danger);
+  }
+
+  .velin-data-table__row--warning,
+  .velin-data-table tr[data-severity="warning"] {
+    background-color: color-mix(in oklch, var(--velin-color-warning) 12%, transparent);
+    box-shadow: inset 3px 0 0 var(--velin-color-warning);
+  }
+
+  .velin-data-table__row--selected,
+  .velin-data-table tr[data-severity="selected"] {
+    background-color: color-mix(in oklch, var(--velin-color-primary) 12%, transparent);
+    box-shadow: inset 3px 0 0 var(--velin-color-primary);
+  }
+
   .velin-data-table__pagination {
     display: flex;
     align-items: center;

package/src/components/empty-auth.css

@@ -0,0 +1,33 @@
+@layer components {
+  .velin-otp-input {
+    display: block;
+  }
+
+  .velin-password-strength {
+    display: block;
+  }
+
+  .velin-empty-state {
+    display: block;
+    text-align: center;
+    padding: var(--velin-space-8) var(--velin-space-4);
+  }
+
+  .velin-empty-state__title {
+    margin: 0 0 var(--velin-space-2);
+    font-size: var(--velin-text-xl);
+    font-weight: var(--velin-weight-bold);
+  }
+
+  .velin-empty-state__description {
+    margin: 0 0 var(--velin-space-4);
+    color: var(--velin-color-text-muted);
+  }
+
+  .velin-empty-state__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-3);
+    justify-content: center;
+  }
+}

package/src/components/table.css

@@ -55,12 +55,22 @@
   }
 
   /* Row color variants */
-  .velin-table-primary { background-color: color-mix(in oklch, var(--velin-color-primary) 10%, transparent); }
-  .velin-table-secondary { background-color: color-mix(in oklch, var(--velin-color-secondary) 10%, transparent); }
-  .velin-table-success { background-color: color-mix(in oklch, var(--velin-color-success) 10%, transparent); }
-  .velin-table-warning { background-color: color-mix(in oklch, var(--velin-color-warning) 10%, transparent); }
-  .velin-table-danger { background-color: color-mix(in oklch, var(--velin-color-danger) 10%, transparent); }
-  .velin-table-info { background-color: color-mix(in oklch, var(--velin-color-info) 10%, transparent); }
+  .velin-table-primary,
+  .velin-table--primary { background-color: color-mix(in oklch, var(--velin-color-primary) 10%, transparent); }
+  .velin-table-secondary,
+  .velin-table--secondary { background-color: color-mix(in oklch, var(--velin-color-secondary) 10%, transparent); }
+  .velin-table-success,
+  .velin-table--success { background-color: color-mix(in oklch, var(--velin-color-success) 10%, transparent); }
+  .velin-table-warning,
+  .velin-table--warning { background-color: color-mix(in oklch, var(--velin-color-warning) 10%, transparent); }
+  .velin-table-danger,
+  .velin-table--danger { background-color: color-mix(in oklch, var(--velin-color-danger) 10%, transparent); }
+  .velin-table-info,
+  .velin-table--info { background-color: color-mix(in oklch, var(--velin-color-info) 10%, transparent); }
+  .velin-table--selected {
+    background-color: color-mix(in oklch, var(--velin-color-primary) 12%, transparent);
+    box-shadow: inset 3px 0 0 var(--velin-color-primary);
+  }
 
   /* Caption top */
   .velin-table .velin-caption-top {

package/src/components/transparency.css

@@ -0,0 +1,138 @@
+@layer components {
+  .velin-transparency {
+    --velin-tx-bg: color-mix(in oklab, var(--velin-color-surface) 88%, transparent);
+    --velin-tx-fg: var(--velin-color-text);
+    --velin-tx-border: var(--velin-color-border);
+    --velin-tx-accent: var(--velin-color-info, var(--velin-color-primary));
+    box-sizing: border-box;
+    z-index: var(--velin-z-overlay, 1900);
+    font-family: var(--velin-font-sans, system-ui, sans-serif);
+    font-size: var(--velin-text-xs, 0.75rem);
+    line-height: 1.3;
+    color: var(--velin-tx-fg);
+  }
+
+  .velin-transparency--tone-information { --velin-tx-accent: var(--velin-color-info, var(--velin-color-primary)); }
+  .velin-transparency--tone-warning { --velin-tx-accent: var(--velin-color-warning); }
+  .velin-transparency--tone-neutral { --velin-tx-accent: var(--velin-color-text-muted); }
+  .velin-transparency--tone-verified { --velin-tx-accent: var(--velin-color-success); }
+  .velin-transparency--tone-generated { --velin-tx-accent: var(--velin-color-primary); }
+  .velin-transparency--tone-human { --velin-tx-accent: var(--velin-color-success); }
+  .velin-transparency--tone-mixed { --velin-tx-accent: var(--velin-color-secondary, var(--velin-color-primary)); }
+
+  .velin-transparency--badge,
+  .velin-transparency--icon,
+  .velin-transparency--overlay {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    max-width: min(16rem, 90%);
+    padding: 0.25rem 0.55rem;
+    border-radius: var(--velin-radius-full, 999px);
+    border: 1px solid color-mix(in oklab, var(--velin-tx-accent) 45%, var(--velin-tx-border));
+    background: var(--velin-tx-bg);
+    backdrop-filter: blur(8px);
+    box-shadow: var(--velin-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.15));
+  }
+
+  .velin-transparency--pos-top-right { top: 0.5rem; right: 0.5rem; left: auto; bottom: auto; }
+  .velin-transparency--pos-top-left { top: 0.5rem; left: 0.5rem; right: auto; bottom: auto; }
+  .velin-transparency--pos-bottom-right { bottom: 0.5rem; right: 0.5rem; top: auto; left: auto; }
+  .velin-transparency--pos-bottom-left { bottom: 0.5rem; left: 0.5rem; top: auto; right: auto; }
+
+  .velin-transparency--ribbon {
+    position: absolute;
+    top: 0.85rem;
+    right: -0.35rem;
+    padding: 0.3rem 0.85rem;
+    border-radius: var(--velin-radius-sm, 4px);
+    background: var(--velin-tx-accent);
+    color: var(--velin-color-on-primary, #fff);
+    transform: rotate(8deg);
+    box-shadow: var(--velin-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.2));
+  }
+
+  .velin-transparency--inline {
+    position: static;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin-inline: 0.25rem;
+    padding: 0.15rem 0.45rem;
+    border-radius: var(--velin-radius-md, 6px);
+    border: 1px solid var(--velin-tx-border);
+    background: var(--velin-color-surface-dim, var(--velin-tx-bg));
+  }
+
+  .velin-transparency--footer,
+  .velin-transparency--banner {
+    position: static;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem 0.75rem;
+    width: 100%;
+    margin-block-start: 0.5rem;
+    padding: 0.55rem 0.75rem;
+    border-block-start: 2px solid var(--velin-tx-accent);
+    background: color-mix(in oklab, var(--velin-tx-accent) 8%, var(--velin-color-surface));
+    border-radius: 0 0 var(--velin-radius-md, 6px) var(--velin-radius-md, 6px);
+  }
+
+  .velin-transparency--panel,
+  .velin-transparency--tooltip {
+    position: absolute;
+    display: grid;
+    gap: 0.25rem;
+    min-width: 12rem;
+    max-width: min(20rem, 92%);
+    padding: 0.65rem 0.75rem;
+    border-radius: var(--velin-radius-md, 6px);
+    border: 1px solid var(--velin-tx-border);
+    background: var(--velin-color-surface);
+    box-shadow: var(--velin-shadow-md, 0 8px 24px rgb(0 0 0 / 0.18));
+  }
+
+  .velin-transparency--panel .velin-transparency__details,
+  .velin-transparency--tooltip .velin-transparency__details,
+  .velin-transparency--footer .velin-transparency__details,
+  .velin-transparency--ribbon .velin-transparency__details {
+    display: block;
+  }
+
+  .velin-transparency__label {
+    font-weight: var(--velin-weight-semibold, 600);
+    color: var(--velin-tx-accent);
+  }
+
+  .velin-transparency__details {
+    color: var(--velin-color-text-muted);
+    font-weight: var(--velin-weight-normal, 400);
+  }
+
+  .velin-transparency--icon {
+    min-width: 1.75rem;
+    min-height: 1.75rem;
+    padding: 0.25rem;
+    justify-content: center;
+  }
+
+  .velin-transparency--icon .velin-transparency__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  .velin-transparency--icon::before {
+    content: "ⓘ";
+    color: var(--velin-tx-accent);
+    font-style: normal;
+  }
+
+  [velin-transparency],
+  [velin-disclosure] {
+    position: relative;
+  }
+}

package/src/velinstyle.css

@@ -51,6 +51,7 @@
 @import "components/nav.css";
 @import "components/alert.css";
 @import "components/badge.css";
+@import "components/transparency.css";
 @import "components/table.css";
 @import "components/data-table.css";
 @import "components/tooltip.css";
@@ -75,6 +76,7 @@
 @import "components/attributes.css";
 @import "components/highlight.css";
 @import "components/calendar-dropzone.css";
+@import "components/empty-auth.css";
 
 /* Utilities */
 @import "utilities/color.css";