@birdapi/velinstyle 1.1.0 → 1.2.1

package/schemas/section.schema.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/section.schema.json",
+  "title": "VelinStyle Section Blueprint Meta",
+  "type": "object",
+  "required": ["id", "role"],
+  "properties": {
+    "id": { "type": "string" },
+    "role": { "type": "string" },
+    "blueprintFile": { "type": "string" },
+    "inputs": { "type": "array", "items": { "type": "string" } },
+    "requiredContent": { "type": "array", "items": { "type": "string" } },
+    "optionalContent": { "type": "array", "items": { "type": "string" } },
+    "designRules": { "type": "array", "items": { "type": "string" } },
+    "a11yRules": { "type": "array", "items": { "type": "string" } },
+    "seoRules": { "type": "array", "items": { "type": "string" } },
+    "compatiblePrev": { "type": "array", "items": { "type": "string" } },
+    "compatibleNext": { "type": "array", "items": { "type": "string" } },
+    "examplePrompts": { "type": "array", "items": { "type": "string" } },
+    "commonMistakes": { "type": "array", "items": { "type": "string" } }
+  }
+}

package/schemas/skill-bundle.schema.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-bundle.schema.json",
+  "title": "VelinStyle Skill Bundle",
+  "type": "object",
+  "required": ["id", "origin", "packs"],
+  "properties": {
+    "id": { "type": "string" },
+    "origin": { "type": "string", "enum": ["official", "community", "enterprise"] },
+    "packs": { "type": "array", "items": { "type": "string" } },
+    "graphs": { "type": "array", "items": { "type": "string" } },
+    "templates": { "type": "array", "items": { "type": "string" } },
+    "docs": { "type": "array", "items": { "type": "string" } }
+  }
+}

package/schemas/skill-graph.schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-graph.schema.json",
+  "title": "VelinStyle Workflow Graph",
+  "type": "object",
+  "required": ["id", "entry", "nodes", "edges"],
+  "properties": {
+    "id": { "type": "string" },
+    "name": { "type": "string" },
+    "entry": { "type": "string" },
+    "nodes": { "type": "object" },
+    "edges": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": ["from", "to"],
+        "properties": {
+          "from": { "type": "string" },
+          "to": { "type": "string" },
+          "when": { "type": "string" }
+        }
+      }
+    }
+  }
+}

package/schemas/skill-pack.schema.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-pack.schema.json",
+  "title": "VelinStyle Skill Pack",
+  "type": "object",
+  "required": ["id", "name", "skills"],
+  "properties": {
+    "id": { "type": "string" },
+    "name": { "type": "string" },
+    "version": { "type": "string" },
+    "priority": { "type": "string" },
+    "skills": { "type": "array", "items": { "type": "string" }, "minItems": 1 }
+  }
+}

package/schemas/skill-project.schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-project.schema.json",
+  "title": "VelinStyle Project Skill Chain",
+  "type": "object",
+  "required": ["id", "name", "workflowGraph", "packs"],
+  "properties": {
+    "id": { "type": "string" },
+    "name": { "type": "string" },
+    "priority": { "type": "string" },
+    "workflowGraph": { "type": "string" },
+    "packs": { "type": "array", "items": { "type": "string" } },
+    "skills": { "type": "array", "items": { "type": "string" } },
+    "optimizedFor": { "type": "array", "items": { "type": "string" } }
+  }
+}

package/schemas/skill-record.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-record.schema.json",
+  "title": "VelinStyle Skill Record",
+  "type": "object",
+  "required": ["id", "category", "priority", "status", "capabilities", "inputs", "outputs", "compatibility", "prosePath"],
+  "properties": {
+    "id": { "type": "string", "pattern": "^velin-[a-z0-9-]+$" },
+    "name": { "type": "string" },
+    "description": { "type": "string" },
+    "category": { "type": "string", "enum": ["design", "development", "components", "utilities", "themes", "motion", "accessibility", "testing", "review", "documentation", "migration", "release", "developer-experience", "performance", "security", "ai-workflows"] },
+    "priority": { "type": "string", "enum": ["core", "recommended", "advanced", "experimental"] },
+    "status": { "type": "string", "enum": ["draft", "experimental", "beta", "stable", "deprecated", "legacy"] },
+    "confidence": { "type": "string", "enum": ["high", "medium", "low"] },
+    "capabilities": { "type": "array", "items": { "type": "string" }, "minItems": 1 },
+    "dependsOn": { "type": "array", "items": { "type": "string" } },
+    "requiresCli": { "type": "array", "items": { "type": "string" } },
+    "inputs": { "type": "array", "items": { "type": "string", "enum": ["prompt", "html", "css", "tokens", "docs", "screenshot", "figma", "markdown", "plan-json", "component-tag", "url", "meta-json"] } },
+    "outputs": { "type": "array", "items": { "type": "string", "enum": ["html", "css", "markdown", "plan-json", "review-json", "diff", "checklist", "report", "meta-json", "registry-json"] } },
+    "optimizedFor": { "type": "array", "items": { "type": "string", "enum": ["cursor", "vscode", "claude-code", "windsurf"] } },
+    "compatibility": { "type": "object" },
+    "onlyIf": { "type": "array", "items": { "type": "string" } },
+    "hooks": { "type": "object" },
+    "origin": { "type": "string", "enum": ["official", "community", "enterprise"] },
+    "prosePath": { "type": "string", "pattern": "^skills/.+/SKILL\\.md$" }
+  }
+}

package/schemas/skill-registry.schema.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-registry.schema.json",
+  "title": "VelinStyle Skill Registry",
+  "type": "object",
+  "required": ["version", "skills", "packs", "workflowGraphs", "bundles", "templates", "projects"],
+  "properties": {
+    "version": { "type": "string" },
+    "adapter": { "type": "string" },
+    "skills": { "type": "array", "items": { "$ref": "./skill-record.schema.json" } },
+    "packs": { "type": "array" },
+    "workflowGraphs": { "type": "array" },
+    "bundles": { "type": "array" },
+    "templates": { "type": "array" },
+    "projects": { "type": "array" }
+  }
+}

package/schemas/skill-template.schema.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-template.schema.json",
+  "title": "VelinStyle Project Template",
+  "type": "object",
+  "required": ["id", "workflowGraph", "packs"],
+  "properties": {
+    "id": { "type": "string" },
+    "workflowGraph": { "type": "string" },
+    "packs": { "type": "array", "items": { "type": "string" } },
+    "theme": { "type": "string" },
+    "demo": { "type": "string" },
+    "docs": { "type": "array", "items": { "type": "string" } },
+    "starterFiles": { "type": "array", "items": { "type": "string" } },
+    "defaults": { "type": "object" }
+  }
+}

package/schemas/token-graph.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/token-graph.schema.json",
+  "title": "VelinStyle Token Semantic Graph",
+  "type": "object",
+  "required": ["version", "tokens"],
+  "properties": {
+    "version": { "type": "integer", "minimum": 1 },
+    "tokens": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": ["name", "layer", "usage"],
+        "properties": {
+          "name": { "type": "string" },
+          "layer": { "type": "string", "enum": ["core", "semantic", "component"] },
+          "usage": { "type": "string" },
+          "cssVariable": { "type": "string" },
+          "pairsWith": { "type": "array", "items": { "type": "string" } },
+          "contrastTarget": { "type": "string", "enum": ["aa", "aaa", "none"] },
+          "surfaceRole": { "type": "string" },
+          "description": { "type": "string" }
+        }
+      }
+    }
+  }
+}

package/schemas/utility.schema.json

@@ -0,0 +1,166 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/utility.schema.json",
+  "title": "VelinStyle Utility Source Schema",
+  "description": "Draft machine-readable source for the Utility Engine (VS-035 / #12). Authors edit this shape; the generator emits CSS, catalog, and docs. Hand-authored src/utilities/*.css remain authoritative until the generator MVP lands (ADR 0007).",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["version", "prefix", "breakpoints", "families"],
+  "properties": {
+    "version": {
+      "type": "integer",
+      "minimum": 1,
+      "description": "Schema document version for the generator."
+    },
+    "prefix": {
+      "type": "string",
+      "const": "velin",
+      "description": "Mandatory class prefix (ADR 0004)."
+    },
+    "breakpoints": {
+      "type": "object",
+      "description": "Viewport breakpoints. Keys become name segments before the property.",
+      "additionalProperties": {
+        "type": "object",
+        "required": ["minWidth"],
+        "properties": {
+          "minWidth": {
+            "type": "string",
+            "description": "CSS length used in @media (width >= …)."
+          },
+          "token": {
+            "type": "string",
+            "description": "Optional CSS variable name; wiring tokens into @media is a follow-up."
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "scales": {
+      "type": "object",
+      "description": "Named token scales referenced by family values.",
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": { "type": "string" }
+      }
+    },
+    "variantBudgets": {
+      "type": "object",
+      "description": "Placeholder for VS-039 — which variant families may expand which utilities.",
+      "additionalProperties": {
+        "type": "object",
+        "properties": {
+          "allow": {
+            "type": "array",
+            "items": { "type": "string" }
+          },
+          "maxClasses": { "type": "integer", "minimum": 0 }
+        },
+        "additionalProperties": false
+      }
+    },
+    "families": {
+      "type": "array",
+      "minItems": 1,
+      "items": { "$ref": "#/$defs/family" }
+    }
+  },
+  "$defs": {
+    "family": {
+      "type": "object",
+      "required": ["id", "property", "values"],
+      "additionalProperties": false,
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "Stable family id (e.g. display, spacing)."
+        },
+        "property": {
+          "type": "string",
+          "description": "CSS property name emitted for each value."
+        },
+        "classStem": {
+          "type": "string",
+          "description": "Optional stem override when class name ≠ property (e.g. w for inline-size)."
+        },
+        "logicalDefault": {
+          "type": "boolean",
+          "default": true,
+          "description": "Prefer logical properties (ADR 0002)."
+        },
+        "output": {
+          "type": "string",
+          "enum": ["generated", "hand"],
+          "default": "generated",
+          "description": "generated → src/utilities/generated/; hand → legacy file until migrated."
+        },
+        "responsive": {
+          "type": "boolean",
+          "default": false,
+          "description": "When true, emit viewport variants for breakpoints in allowlist."
+        },
+        "responsiveBreakpoints": {
+          "type": "array",
+          "items": { "type": "string" },
+          "description": "Subset of breakpoint keys; empty means all."
+        },
+        "values": {
+          "type": "array",
+          "minItems": 1,
+          "items": { "$ref": "#/$defs/value" }
+        }
+      }
+    },
+    "value": {
+      "type": "object",
+      "required": ["name", "css"],
+      "additionalProperties": false,
+      "properties": {
+        "name": {
+          "type": "string",
+          "description": "Class segment after stem (e.g. block → .velin-block)."
+        },
+        "css": {
+          "type": "string",
+          "description": "Declaration value (e.g. block, var(--velin-space-4))."
+        },
+        "scaleRef": {
+          "type": "string",
+          "description": "Optional scales.* key for docs/catalog."
+        }
+      }
+    }
+  },
+  "examples": [
+    {
+      "version": 1,
+      "prefix": "velin",
+      "breakpoints": {
+        "sm": { "minWidth": "36rem" },
+        "md": { "minWidth": "48rem" },
+        "lg": { "minWidth": "62rem" },
+        "xl": { "minWidth": "80rem" },
+        "2xl": { "minWidth": "96rem" }
+      },
+      "families": [
+        {
+          "id": "display",
+          "property": "display",
+          "responsive": true,
+          "responsiveBreakpoints": ["sm", "md", "lg", "xl"],
+          "output": "hand",
+          "values": [
+            { "name": "block", "css": "block" },
+            { "name": "flex", "css": "flex" },
+            { "name": "grid", "css": "grid" },
+            { "name": "hidden", "css": "none" },
+            { "name": "inline", "css": "inline" },
+            { "name": "inline-block", "css": "inline-block" },
+            { "name": "inline-flex", "css": "inline-flex" },
+            { "name": "contents", "css": "contents" }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/components/alert.css

@@ -10,6 +10,17 @@
     color: var(--velin-color-text);
     font-size: var(--velin-text-base);
     line-height: var(--velin-leading-normal);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    overflow-wrap: break-word;
+  }
+
+  /*
+   * Text-only alerts (no icon/close/content shell): use block flow so
+   * inline <strong>/<code> nodes do not become horizontal flex items.
+   */
+  .velin-alert:not(:has(.velin-alert__icon, .velin-alert__close, .velin-alert__content)) {
+    display: block;
   }
 
   .velin-alert[role="alert"] {
@@ -24,7 +35,17 @@
   }
 
   .velin-alert__content {
-    flex-grow: 1;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow-wrap: break-word;
+  }
+
+  .velin-alert__content > p {
+    margin-block: 0 var(--velin-space-2);
+  }
+
+  .velin-alert__content > p:last-child {
+    margin-block-end: 0;
   }
 
   .velin-alert__title {

package/src/components/calendar-dropzone.css

@@ -0,0 +1,5 @@
+/* Host hooks for calendar / dropzone when used without shadow pierce */
+velin-calendar,
+velin-file-dropzone {
+  display: block;
+}

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/layout/app-shell.css

@@ -0,0 +1,33 @@
+@layer layout {
+  .velin-app-shell {
+    display: flex;
+    min-block-size: 100dvh;
+  }
+  .velin-app-shell__nav {
+    inline-size: 16rem;
+    flex-shrink: 0;
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
+  .velin-app-shell__body {
+    flex: 1;
+    min-inline-size: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .velin-app-shell__content {
+    flex: 1;
+  }
+  .velin-toc {
+    inline-size: 10rem;
+    flex-shrink: 0;
+  }
+  .velin-docs-nav {
+    inline-size: 12rem;
+    flex-shrink: 0;
+  }
+  .velin-docs-main {
+    flex: 1;
+    min-inline-size: 16rem;
+  }
+}

package/src/tokens/shadow.css

@@ -10,6 +10,19 @@
     --velin-shadow-inner: inset 0 2px 4px oklch(0% 0 0 / 0.06);
   }
 
+  /* Dark shadows: attribute OR system (ADR 0011 parity with color.css) */
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-velin-theme="light"]) {
+      --velin-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.2);
+      --velin-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.25), 0 1px 2px oklch(0% 0 0 / 0.2);
+      --velin-shadow-md: 0 4px 6px oklch(0% 0 0 / 0.3), 0 2px 4px oklch(0% 0 0 / 0.2);
+      --velin-shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.35), 0 4px 6px oklch(0% 0 0 / 0.2);
+      --velin-shadow-xl: 0 20px 25px oklch(0% 0 0 / 0.4), 0 8px 10px oklch(0% 0 0 / 0.2);
+      --velin-shadow-2xl: 0 25px 50px oklch(0% 0 0 / 0.5);
+      --velin-shadow-inner: inset 0 2px 4px oklch(0% 0 0 / 0.3);
+    }
+  }
+
   [data-velin-theme="dark"] {
     --velin-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.2);
     --velin-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.25), 0 1px 2px oklch(0% 0 0 / 0.2);

package/src/utilities/border.css

@@ -7,6 +7,8 @@
   .velin-border-inline { border-inline: 1px solid var(--velin-color-border); }
   .velin-border-block-start { border-block-start: 1px solid var(--velin-color-border); }
   .velin-border-block-end { border-block-end: 1px solid var(--velin-color-border); }
+  .velin-border-inline-end { border-inline-end: 1px solid var(--velin-color-border); }
+  .velin-border-inline-start { border-inline-start: 1px solid var(--velin-color-border); }
 
   /* Border color */
   .velin-border-primary { border-color: var(--velin-color-primary); }

package/src/utilities/display.css

@@ -27,30 +27,7 @@
   .velin-opacity-75 { opacity: 0.75; }
   .velin-opacity-100 { opacity: 1; }
 
-  /* Responsive display via min-width */
-  @media (width >= 36rem) {
-    .velin-sm-block { display: block; }
-    .velin-sm-flex { display: flex; }
-    .velin-sm-grid { display: grid; }
-    .velin-sm-hidden { display: none; }
-    .velin-sm-inline { display: inline; }
-  }
-
-  @media (width >= 48rem) {
-    .velin-md-block { display: block; }
-    .velin-md-flex { display: flex; }
-    .velin-md-grid { display: grid; }
-    .velin-md-hidden { display: none; }
-    .velin-md-inline { display: inline; }
-  }
-
-  @media (width >= 62rem) {
-    .velin-lg-block { display: block; }
-    .velin-lg-flex { display: flex; }
-    .velin-lg-grid { display: grid; }
-    .velin-lg-hidden { display: none; }
-    .velin-lg-inline { display: inline; }
-  }
+  /* Responsive display variants live only in responsive.css (VS-037 / #14). */
 
   /* Columns (multi-column layout) */
   .velin-columns-1 { columns: 1; }